/* =========================================================================
   s8 — How it works (1-2-3)
   Layout archetype: STEPPER. Three numbered nodes joined by a connecting line.
   Horizontal on desktop, vertical on mobile. NO device frame (a calm beat
   between s7's gauges and s9's two devices).
   Signature motion (ONE): a single scrubbed proxy --draw (0 -> 1) on .s8-stage.
   Everything derives from it:
     - the connecting line draws itself (stroke-dashoffset retreats so it
       appears to travel 1 -> 2 -> 3) on desktop; on mobile a vertical fill
       grows via scaleY
     - each step ignites (node fills gold, number flips to dark, card rises in)
       as --draw crosses that step's own staged threshold (--i 0, 1, 2)
   Transform / opacity / stroke-dashoffset only. Reduced motion + no-JS force
   --draw:1 so the section rests fully drawn, every step lit and readable.
   ========================================================================= */

#s8 {
  /* Default to fully drawn so no-JS / CDN-blocked loads rest readable. The
     scrub script sets --draw:0 on .s8-stage the moment it takes control, then
     animates it back to 1 on scroll. */
  --draw: 1;
  text-align: center;
}

#s8 .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.6rem, 6vw, 4.2rem);
}

/* ---- head ------------------------------------------------------------- */
#s8 .s8-head {
  max-width: var(--maxw-prose);
  margin-inline: auto;
}
#s8 .s8-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
#s8 .s8-eyebrow::before,
#s8 .s8-eyebrow::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
#s8 .s8-eyebrow::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
#s8 .s8-title {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ice); text-wrap: balance;
  margin: 0;
}
#s8 .s8-title .accent { color: var(--gold-bright); font-style: italic; font-weight: 500; }
#s8 .s8-lead {
  color: var(--parchment-dim);
  font-size: var(--fs-lead);
  line-height: 1.5;
  margin: var(--sp-3) auto 0;
  max-width: 50ch;
  text-wrap: pretty;
}

/* ---- stage (the stepper) ---------------------------------------------- */
#s8 .s8-stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3.5vw, 3rem);
  align-items: start;
}
#s8 .s8-stage--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.6vw, 2.4rem);
}

/* ---- the connecting line ---------------------------------------------- */
/* Desktop: a horizontal SVG line spanning the node row, drawn via dashoffset.
   It sits behind the nodes, vertically centred on the node circles. */
#s8 .s8-line {
  position: absolute;
  /* node block is ~64px tall; centre the line on the node centre (~32px) */
  top: clamp(26px, 3.4vw, 34px);
  left: 16.6%;               /* start under node 1 centre (1/6 of width) */
  right: 16.6%;              /* end under node 3 centre */
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
}
/* four-node variant: node centres at 1/8, 3/8, 5/8, 7/8 -> 12.5% .. 87.5% */
#s8 .s8-stage--4 + .s8-line,
#s8 .s8-stage--4 .s8-line {
  left: 12.5%;
  right: 12.5%;
  transform: translateY(-50%);
  pointer-events: none;
}
#s8 .s8-line__svg {
  display: block;
  width: 100%;
  height: 8px;
  overflow: visible;
}
#s8 .s8-line__track {
  stroke: rgba(110, 118, 132, 0.26);
  stroke-width: 2;
  stroke-linecap: round;
}
#s8 .s8-line__draw {
  stroke: var(--gold-bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* path length of the 992-unit line; drawn by retreating the dashoffset */
  --L: 992;
  stroke-dasharray: var(--L);
  /* offset goes from full length (hidden) to 0 (drawn) as --draw climbs */
  stroke-dashoffset: calc(var(--L) * (1 - var(--draw)));
  filter: drop-shadow(0 0 5px rgba(196, 162, 101, 0.45));
}

/* ---- a step ----------------------------------------------------------- */
#s8 .s8-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* per-step ignition window: step i lights over [i/3 .. i/3 + 0.34] of --draw.
     --lit clamps 0..1 across that window. */
  --lo: calc(var(--i) * 0.30);
  --lit: clamp(0, calc((var(--draw) - var(--lo)) / 0.30), 1);
}
/* four-step ignition: tighter windows so node 4 lights within the scrub */
#s8 .s8-stage--4 .s8-step {
  --lo: calc(var(--i) * 0.22);
  --lit: clamp(0, calc((var(--draw) - var(--lo)) / 0.24), 1);
}

/* node: a ringed circle that fills gold as the line arrives */
#s8 .s8-node {
  position: relative;
  width: clamp(52px, 6.6vw, 68px);
  height: clamp(52px, 6.6vw, 68px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-deep, #040509);
  /* sits above the line */
  z-index: 1;
  margin-bottom: var(--sp-3);
}
#s8 .s8-node__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(110, 118, 132, 0.42);
  background:
    radial-gradient(circle at 50% 38%, rgba(196,162,101,0.18), transparent 70%);
  /* fill + glow scale with --lit */
  border-color: color-mix(in srgb, var(--gold-bright) calc(var(--lit) * 100%), rgba(110,118,132,0.42));
  box-shadow: 0 0 calc(var(--lit) * 22px) rgba(196, 162, 101, calc(var(--lit) * 0.5));
  transform: scale(calc(0.94 + var(--lit) * 0.06));
  transition: none; /* scrub-driven; no css transition to fight the scrub */
}
/* a solid gold disc that grows in as the step lights */
#s8 .s8-node__ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: var(--lit);
  transform: scale(calc(0.4 + var(--lit) * 0.6));
}
#s8 .s8-node__num {
  position: relative;
  z-index: 1;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1;
  /* number reads steel before, near-black once the gold disc fills under it */
  color: color-mix(in srgb, var(--bg-deep, #040509) calc(var(--lit) * 100%), var(--steel));
}

/* the card: rises + fades in as its step lights */
#s8 .s8-card {
  max-width: 26ch;
  opacity: calc(0.22 + var(--lit) * 0.78);
  transform: translateY(calc((1 - var(--lit)) * 16px));
}
#s8 .s8-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sp-1);
  color: var(--ice);
}
#s8 .s8-card__body {
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0;
  color: var(--parchment-dim);
}

/* ---- closing line ----------------------------------------------------- */
#s8 .s8-after {
  max-width: 56ch;
  margin: 0 auto;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ice);
}

/* =========================================================================
   Fallbacks: no color-mix support -> simpler but still legible.
   ========================================================================= */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #s8 .s8-node__ring { border-color: rgba(196, 162, 101, 0.7); }
  #s8 .s8-node__num  { color: var(--ice); }
}

/* =========================================================================
   Reduced motion + no-JS: rest fully drawn.
   (.reveal-disabled is added by main.js under reduced motion; we also key off
    the media query directly so a no-JS load still resolves.)
   ========================================================================= */
.reveal-disabled #s8 .s8-stage { --draw: 1; }
@media (prefers-reduced-motion: reduce) {
  #s8 .s8-stage { --draw: 1 !important; }
  #s8 .s8-node__ring { transition: none; }
}
/* =========================================================================
   MOBILE: vertical stepper. Line runs down the left gutter; nodes left,
   cards right. The horizontal SVG line is swapped for a vertical fill that
   grows via scaleY from --draw.
   ========================================================================= */
@media (max-width: 760px) {
  #s8 .s8-stage {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 460px;
    text-align: left;
  }

  /* swap the line: hide the horizontal SVG, draw a vertical bar in the gutter.
     Top sits at node 1's centre; bottom ends at node 3's centre so the line
     spans node-to-node with no stub past the last node. The last step holds
     the only content below its node, so its card height sets that gap; we
     terminate the line at the last node by ending it above that card. */
  #s8 .s8-line {
    top: clamp(24px, 6.4vw, 29px);
    bottom: auto;
    /* height = distance between first and last node centres. Each step row is
       roughly equal, so two inter-node gaps. We size to the stage minus the
       last node's own block + its card, approximated against the last step. */
    height: calc(100% - var(--s8-line-tail, clamp(78px, 22vw, 96px)));
    left: clamp(24px, 6.4vw, 29px);   /* centre of the mobile node column */
    right: auto;
    width: 2px;
    transform: translateX(-50%);
  }
  #s8 .s8-line__svg { display: none; }
  #s8 .s8-line::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(110, 118, 132, 0.26);
    border-radius: 2px;
  }
  #s8 .s8-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gold-bright);
    border-radius: 2px;
    transform-origin: top center;
    transform: scaleY(var(--draw));
    box-shadow: 0 0 5px rgba(196, 162, 101, 0.45);
  }

  #s8 .s8-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--sp-3);
    padding-bottom: clamp(1.6rem, 6vw, 2.4rem);
  }
  #s8 .s8-step:last-child { padding-bottom: 0; }

  #s8 .s8-node {
    width: clamp(48px, 13vw, 58px);
    height: clamp(48px, 13vw, 58px);
    flex: 0 0 auto;
    margin-bottom: 0;
  }
  #s8 .s8-card {
    max-width: none;
    padding-top: clamp(4px, 2vw, 9px);
  }
}