/* Precursor Signal — section-by-section motion
   The hero already carries the page; everything below it was static. Each
   section gets one motion idea that belongs to *that* section's meaning, not a
   generic effect sprayed everywhere. Timings follow the design system
   (mechanical, no bounce) and the whole file no-ops under reduced motion. */

/* ============ 1. MARQUEE — the signal tape ============
   Items should dissolve at both ends rather than being clipped by a hard edge,
   so the tape reads as continuous rather than as a box. */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-track { transition: animation-duration var(--dur-base); }

/* ============ 2. METHOD — five layers, read in order ============
   The layer cards arrive left-to-right like a signal propagating through the
   stack, and a hairline connector draws along behind them. */
#method .sa-cards { position: relative; }
#method .sa-connector {
  position: absolute; left: 0; right: 0; top: 46px; height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--signal-dark) 12%, var(--signal-dark) 88%, transparent);
  transform: scaleX(0); transform-origin: left center; opacity: 0.5;
  transition: transform 1.15s var(--ease-out);
}
#method .sa-cards.cine-in .sa-connector { transform: scaleX(1); }
#method .sa-card { position: relative; z-index: 1; }
/* cards rise AND settle back in depth, which reads richer than a flat fade */
.cine-group#method-cards > .cine-item,
#method .sa-cards.cine-group > .cine-item {
  transform: translate3d(0, 26px, 0) scale(0.975);
  transition: opacity 0.66s var(--ease-out), transform 0.66s var(--ease-out);
}
#method .sa-cards.cine-group.cine-in > .cine-item { transform: none; }
/* the lead-time badge is the payload of each card — let it land last */
#method .sa-lead { display: inline-block; transition: transform 0.5s var(--ease-out) 0.25s, opacity 0.5s var(--ease-out) 0.25s; }
#method .sa-cards:not(.cine-in) .sa-lead { opacity: 0; transform: translateY(6px); }
#method .sa-card:hover .sa-lead { color: var(--signal-dark); }

/* ============ 3. COVERAGE — the sector map ============
   The orbit rings scribe themselves in before the nodes bloom, and the whole
   ring keeps a very slow rotation so the map never looks frozen. */
.sm-orbit-path { transition: transform 1.1s var(--ease-out), opacity 0.8s ease; }
.sector-map:not(.in-view) .sm-orbit-path { transform: scale(0.86); opacity: 0; }
/* NOTE: no ring rotation here. Each node is positioned with
   rotate(var(--angle)) and its inner block carries the matching
   counter-rotation that keeps the label upright — animating either one
   overrides that correction and tips every label off-axis. */
/* hub breathes in sympathy with the nodes */
@keyframes smHubBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.sector-map.in-view .sm-hub-circle { animation: smHubBreathe 6s var(--ease-standard) infinite; }

/* ---- sonar ping: pulses radiate from the hub and light each orbit as they
   pass, matching the reference video. Geometry is real: the hub is 166px, the
   inner orbit 290px (1.75x) and the outer 500px (3.01x), so a pulse scaled to
   3.05x reaches the outer ring exactly as it fades. A wave leaves every 3s. ---- */
@keyframes smSonar {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.50; }
  70%  { opacity: 0.10; }
  100% { transform: translate(-50%, -50%) scale(3.05); opacity: 0; }
}
.sector-map.in-view .sm-hub-ring {
  animation: smSonar 9s var(--ease-out) infinite !important;
  border-color: rgba(124, 217, 107, 0.5) !important;
}
.sector-map.in-view .sm-hub-ring.r1 { animation-delay: 0s !important; }
.sector-map.in-view .sm-hub-ring.r2 { animation-delay: 3s !important; }
.sector-map.in-view .sm-hub-ring.r3 { animation-delay: 6s !important; }

/* each node answers the wave as it arrives. The halo lives on a pseudo-element
   so the circle's own drift animation and the label's counter-rotation are
   left completely alone. */
.sm-node-circle { position: relative; }
.sm-node-circle::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--signal); opacity: 0; pointer-events: none;
}
@keyframes smNodePing {
  0%   { opacity: 0;    transform: scale(0.88); }
  10%  { opacity: 0.9;  transform: scale(1); }
  45%  { opacity: 0;    transform: scale(1.42); }
  100% { opacity: 0;    transform: scale(1.42); }
}
.sector-map.in-view .sm-node.ring-inner .sm-node-circle::after {
  animation: smNodePing 3s var(--ease-out) 0.24s infinite;
}
.sector-map.in-view .sm-node.ring-outer .sm-node-circle::after {
  animation: smNodePing 3s var(--ease-out) 2.8s infinite;
}
/* the hub brightens fractionally on each emission */
@keyframes smHubEmit { 0%, 100% { box-shadow: var(--glow-signal); } 6% { box-shadow: var(--glow-signal-strong); } }
.sector-map.in-view .sm-hub-circle { animation: smHubEmit 3s var(--ease-standard) infinite !important; }

/* ============ 4. PRICING — the dark band ============
   A single slow glint crosses each tier as it arrives: premium, once, not a
   looping shine. */
.tier { position: relative; overflow: hidden; }
.tier::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 42%;
  left: -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14) 45%, rgba(124,217,107,0.16) 55%, transparent);
  transform: skewX(-18deg);
}
.tiers.cine-in .tier::after { animation: tierGlint 1.5s var(--ease-out) 0.35s 1 both; }
.tiers.cine-in .tier.tier-b::after { animation-delay: 0.55s; }
@keyframes tierGlint { from { left: -60%; } to { left: 130%; } }
.tier-price { display: inline-block; }

/* ============ 5. FAQ — the answer list ============
   A green rule grows down the left of the row you're pointing at, so the list
   tracks the reader instead of sitting inert. */
.faq-list details { position: relative; }
.faq-list details::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 2px;
  background: var(--signal-dark); border-radius: 1px;
  transform: scaleY(0); transform-origin: top center;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-list details:hover::before, .faq-list details[open]::before { transform: scaleY(1); }
.faq-list summary { transition: color var(--dur-base) var(--ease-standard), padding-left var(--dur-base) var(--ease-out); }
.faq-list details:hover summary { padding-left: 0.6rem; }

/* ============ 6. FOOTER — the closing band ============
   The oversized ghost word drifts against the scroll, giving the footer depth
   as it comes into view. */
.ghost-word { will-change: transform; transition: opacity 0.9s ease; }
.footer-nav a { transition: color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); display: inline-block; }
.footer-nav a:hover { color: var(--signal); transform: translateX(2px); }

/* ============ section seams ============
   Light and dark bands meet on a soft gradient rather than a hard line. */
.dark-section { position: relative; }
.dark-section::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, rgba(245,242,237,0.16), transparent);
}

@media (prefers-reduced-motion: reduce) {
  #method .sa-connector { transform: scaleX(1); transition: none; }
  #method .sa-lead { opacity: 1 !important; transform: none !important; }
  .sector-map.in-view .sm-hub-circle,
  .sector-map.in-view .sm-hub-ring,
  .sector-map.in-view .sm-node-circle::after { animation: none !important; }
  .sm-orbit-path { transform: none !important; opacity: 1 !important; }
  .tiers.cine-in .tier::after { animation: none !important; }
  .faq-list details::before { transition: none; }
  .ghost-word { transform: none !important; }
}

/* ---------- orbit guide rings removed ----------
   The two dashed .sm-orbit-path circles read as stray rings behind the map
   rather than as structure, so they are hidden. The nodes' own positions
   already describe the two orbits. */
.sm-orbit-path { display: none !important; }

/* ---------- Coverage: drop the decorative render, centre the map ----------
   The section was a two-column grid (map left, iridescent video right). The
   render is off-brand for an instrument aesthetic and the design system rules
   out decorative imagery, so it goes and the map takes the full width. */
#sectors { grid-template-columns: 1fr !important; }
#sectors .sec-bg { display: none !important; }
#sectors .sec-left { max-width: 780px; margin-left: auto; margin-right: auto; width: 100%; }
#sectors .sector-map { margin-left: auto; margin-right: auto; }

/* ---------- Coverage: wider spread, larger type and icons ----------
   Orbits pushed out (outer 250 -> 340, inner 145 -> 200), hub 166 -> 200,
   and every label/icon scaled up to match the extra room. */
#sectors .sec-left { max-width: 1060px !important; }
.sector-map {
  --map-radius: clamp(240px, 38vw, 390px) !important;
  --map-radius-inner: clamp(150px, 23vw, 232px) !important;
  max-width: 1120px !important;
  width: 100% !important;
}
/* node discs and their icons */
.sm-node-circle {
  width: calc(var(--size, 64px) * 1.40) !important;
  height: calc(var(--size, 64px) * 1.40) !important;
}
.sm-node-circle svg { width: 50% !important; height: 50% !important; }
/* labels and counts */
.sm-node-label {
  font-size: 0.78rem !important;
  max-width: 8.8rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.015em !important;
}
.sm-node-count { font-size: 0.84rem !important; font-weight: 700 !important; }
/* hub */
.sm-hub { width: 200px !important; height: 200px !important; }
.sm-hub-title { font-size: clamp(1.15rem, 2.8vw, 1.7rem) !important; }

/* ---- sonar timings re-derived for the new geometry ----
   hub 200px, inner orbit 400px (2.0x), outer orbit 680px (3.4x).
   A pulse scaled to 3.4x reaches the outer ring exactly as it fades.
   Inner ring is reached at (2.0-1)/(3.4-1) = 41.7% of 9s = 3.75s -> 0.75s
   into the 3s emission cycle; the outer ring at 9s -> 0s. */
@keyframes smSonar {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.50; }
  70%  { opacity: 0.10; }
  100% { transform: translate(-50%, -50%) scale(3.9); opacity: 0; }
}
.sector-map.in-view .sm-node.ring-inner .sm-node-circle::after { animation-delay: 0.68s !important; }
.sector-map.in-view .sm-node.ring-outer .sm-node-circle::after { animation-delay: 0s !important; }

@media (max-width: 900px) {
  .sector-map { --map-radius: clamp(170px, 36vw, 250px) !important; --map-radius-inner: clamp(105px, 22vw, 150px) !important; }
  .sm-node-label { font-size: 0.66rem !important; max-width: 6.6rem !important; }
}

/* ---------- Coverage: sector counts removed ----------
   The per-sector tallies are dropped from the map; the label alone identifies
   each node. Counts remain available on the sector pages themselves. */
.sm-node-count { display: none !important; }