/* =====================================================================
   GENE DRIVE SITE, DESIGN SYSTEM
   Warm optimism with a serious spine. Editorial science scrollytelling.
   This :root is the reusable foundation for the whole site. Every later
   unit is built to these tokens. Do not hardcode values past this block.
   ===================================================================== */

:root {
  /* ---- semantic color key (LOCKED, one color one meaning) ---- */
  --c-dna:      #E91E63;   /* DNA / helix backbone + base pairs    */
  --c-rna:      #26A69A;   /* RNA / guide RNA                      */
  --c-protein:  #43A047;   /* protein / Cas9 enzyme                */
  --c-cut:      #E53935;   /* the cut / break / error              */

  /* ---- semantics added in wave-2a (U1/U2 epidemiology layer) ----
     Aadi rule: red signals ACTIVE INFECTION in U1/U2; grey signals
     deactivated cycle (post-bottleneck). Both reuse the c-cut hue and
     the established faint/dim slate ramp so the palette stays small. */
  --c-infect:   #E53935;   /* alias of c-cut, "active infection"   */
  --c-deact:    #4A5563;   /* deactivated cycle, slate-grey        */

  /* ---- serious slate ground + warm light text ---- */
  --bg:         #0E1116;   /* near-black serious slate             */
  --bg-raise:   #161B22;   /* raised panel                         */
  --hair:       #2A323D;   /* hairline / quiet structure stroke    */
  --hair-soft:  #1E2530;   /* softest divider                      */
  --ink:        #F4EFE7;   /* warm off-white, primary text         */
  --ink-dim:    #AEB4BD;   /* secondary text                       */
  --ink-faint:  #6B7280;   /* counters, captions, faint labels     */
  --warm:       #F2C572;   /* warm optimism accent, used sparingly */

  /* ---- type scale (editorial, fluid) ---- */
  --serif: "Iowan Old Style", "Palatino Linotype", "Charter",
           "Georgia", "Times New Roman", serif;
  --sans:  ui-sans-serif, "Inter", "Helvetica Neue", "Segoe UI",
           system-ui, -apple-system, sans-serif;
  --mono:  "SF Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace,
           "Menlo", monospace;

  --t-display: clamp(2.6rem, 6.0vw, 5.2rem);
  --t-title:   clamp(1.7rem, 3.4vw, 2.9rem);
  --t-lede:    clamp(1.05rem, 1.7vw, 1.4rem);
  --t-body:    clamp(1rem, 1.3vw, 1.15rem);
  --t-cap:     clamp(0.82rem, 1.0vw, 0.95rem);
  --t-micro:   0.74rem;

  /* ---- spacing scale (8pt-ish, editorial generous) ---- */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2.5rem;
  --s-5: 4rem;    --s-6: 6rem;   --s-7: 9rem;

  /* ---- motion (deliberate, eased, no bounce) ---- */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:  240ms;
  --d-mid:   520ms;
  --d-slow:  900ms;

  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }

::selection { background: rgba(242,197,114,0.28); color: var(--ink); }

/* =====================================================================
   MULTI-SECTION ARCHITECTURE (wave-2a)
   Each unit (U1, U2, U5) is one .section. Each .section has its own
   .stage (pinned via ScrollTrigger) and its own .track (the scroll
   spacer that drives that section's timeline). The .stage uses
   position:sticky so it pins inside its own section only, then unpins
   when the section ends. The next section's stage pins next.
   This preserves U5 visuals and motion while letting U1 and U2 sit
   ahead of it in the page flow.
   ===================================================================== */

.section { position: relative; width: 100%; }

/* .stage is pinned by GSAP ScrollTrigger (pin: stage). No CSS sticky;
   GSAP manages the fixed-position lifecycle during the section's
   pinned range. We declare width/height so the stage holds the
   viewport while pinned. */
.stage {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(115% 95% at 50% 8%,
       #182230 0%, #11161E 46%, var(--bg) 100%);
  overflow: hidden;
}

/* faint editorial baseline grid, barely there, adds "crafted" texture */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px);
  background-size: 100% 2.25rem;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 45%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* preserve legacy id selector for U5 stage so any code path that
   queries #stage keeps working. The class .stage carries the actual
   styles; #stage matches the same element. */
#stage { /* intentionally empty; .stage carries the rules */ }

.scene-wrap, #scene-wrap {
  position: relative;
  width: min(94vw, 1240px);
  height: min(82vh, 760px);
}

.sec-canvas, #helix { width: 100%; height: 100%; display: block; }

/* ---- the step chrome: counter, title, caption ---- */
.chrome, #chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.step-index {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: var(--t-cap);
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  z-index: 3;
}
.step-index .rule {
  display: inline-block;
  width: 3.4rem;
  height: 1px;
  background: var(--hair);
  transform: translateY(-0.28em);
}

.step-title {
  position: absolute;
  top: 2.4rem;
  left: 0;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
  z-index: 3;
}
.step-title .accent { font-style: italic; color: var(--warm); }

.step-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 46ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-dim);
  z-index: 3;
}
.step-caption b { color: var(--ink); font-weight: 600; }

/* swap-in animation for chrome text (driven by JS class toggle) */
.swap { transition: opacity var(--d-mid) var(--e-out),
                     transform var(--d-mid) var(--e-out); }
.swap.out { opacity: 0; transform: translateY(0.55rem); }

/* ---- progress rail (reusable site chrome, fixed across all sections) ---- */
#rail {
  position: fixed;
  left: 50%;
  bottom: 2.1rem;
  transform: translateX(-50%);
  width: min(34vw, 360px);
  height: 2px;
  background: var(--hair-soft);
  border-radius: 2px;
  overflow: hidden;
  z-index: 50;
}
#rail-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-dna), var(--warm));
  border-radius: 2px;
}
#scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 3.0rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.34em;
  color: var(--ink-faint);
  text-transform: uppercase;
  transition: opacity var(--d-mid) var(--e-out);
  z-index: 50;
}

/* ---- "see the real structure" demoted affordance (U5 only) ---- */
#real-aside {
  position: absolute;
  right: 1.6rem;
  bottom: 1.7rem;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--hair-soft);
  border-radius: 999px;
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
  z-index: 4;
}
#real-aside:hover { color: var(--ink-dim); border-color: var(--hair); }
/* wave-2f: re-toned the chip dot from --c-dna (pink, reads as warning
   in this site's palette where red/pink signal infection/cut/loss) to
   --ink-faint so it reads as a neutral affordance, not an alarm. The
   dot remains visible as a chip-presence cue. No new color token. */
#real-aside .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint);
}

/* ---- the track that drives the scroll timeline (one per section) ---- */
.track, #track { position: relative; width: 100%; }

/* =====================================================================
   PERSISTENT CORNER DEATH COUNTER (wave-2a-polish)
   The ambient running tally. Sits top-right (away from the top-left
   step counter inside each section's chrome). Muted ink only, never
   red. Built from existing tokens (--ink-faint, --ink-dim, --hair,
   --warm), no new colors introduced. Three lines: tiny eyebrow label,
   the live integer (mono, monospace digit grouping), and a small
   foot label. A small warm dot on the left of the number is the only
   chromatic touch (kept low alpha so it does not alarm).
   ===================================================================== */
#corner-counter {
  position: fixed;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 60;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.18rem;
  padding: 0.55rem 0.85rem 0.55rem 0.95rem;
  border: 1px solid var(--hair-soft);
  border-radius: 6px;
  background: rgba(14,17,22,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;                      /* hidden until activation */
  transform: translateY(-0.45rem);
  transition: opacity var(--d-slow) var(--e-out),
              transform var(--d-slow) var(--e-out),
              border-color var(--d-mid) var(--e-out);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
#corner-counter.is-on {
  opacity: 1;
  transform: translateY(0);
}
#corner-counter .cc-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
#corner-counter .cc-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
#corner-counter .cc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
  opacity: 0.55;
  transform: translateY(-0.18em);
  transition: opacity var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
#corner-counter.is-tick .cc-dot {
  opacity: 1;
  box-shadow: 0 0 8px rgba(242,197,114,0.55);
}
#corner-counter .cc-num {
  font-family: var(--mono);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
  transition: color var(--d-fast) var(--e-out);
}
#corner-counter.is-tick .cc-num {
  color: var(--ink);
}
#corner-counter .cc-foot {
  font-family: var(--sans);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* =====================================================================
   WAVE-2d ADDITION: corner counter "promoted" state for U6 B5b bookend.
   At the "if we don't" beat, the persistent counter visually scales up
   and brightens to pair with the returning opening 600,000 number, so
   the bookend mechanic resolves on screen. transform-origin is pinned
   to the top-right so the scale grows DOWN-LEFT into the canvas area,
   not off the right edge. No new color tokens; just a considered
   transform + brighter ink. The counter keeps ticking. */
#corner-counter.is-promoted {
  transform-origin: 100% 0%;
  transform: scale(1.75);
  border-color: var(--hair);
  background: rgba(14,17,22,0.88);
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
#corner-counter.is-promoted .cc-num {
  color: var(--warm);
}
#corner-counter.is-promoted .cc-eyebrow,
#corner-counter.is-promoted .cc-foot {
  color: var(--ink-dim);
}

@media (max-width: 760px) {
  .scene-wrap, #scene-wrap { width: 92vw; height: 70vh; }
  .step-title { font-size: 1.6rem; }
  #corner-counter { top: 0.9rem; right: 1rem; padding: 0.4rem 0.6rem; }
  #corner-counter .cc-num { font-size: 1rem; }
  #corner-counter.is-promoted { transform-origin: 100% 0%; transform: scale(1.35); }
}