/*
 * components/css/surfaces/M8c-02-framework.css  (S80 DARK net-new rebuild)
 * /framework surface on the dark single-accent foundation — a peer of the
 * homepage, NOT the prior cream page. Consumes the foundation cascade + the
 * composed primitives (SiteNav, SectionBeat, CtaButton, FiveAxisModel,
 * Scrollytelling, SiteFooter) and adds ONLY surface scaffolding: the substrate
 * canvas, the scrollytelling step typography, the participatory mark control,
 * and the reduced-motion umbrella. The five-axis model + the pin contract live
 * in their primitives; this file owns no model or pin rules.
 *
 * Register: same as the homepage — ONE accent (lime) on a warm dark ground;
 * lime is scarce and earned (the active signal bar + the single convergence
 * bloom). Zero :root re-declaration (foundation-tokens.css sole token site).
 * Zero retired-palette hex. var(--*) only.
 */

/* ── Box-sizing reset (framework scope) ─────────────────────────────────────── */
.m8c-02-framework,
.m8c-02-framework *,
.m8c-02-framework *::before,
.m8c-02-framework *::after { box-sizing: border-box; }

/* ── Root surface (dark) ────────────────────────────────────────────────────── */
.m8c-02-framework {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  position: relative;
  overflow-x: hidden;
  font-family: "Inter", system-ui, sans-serif;
  /* pin the scrollytelling stage just below the sticky SiteNav */
  --scrolly-pin-top: 92px;
}

/* Living substrate — fixed reactive sensor field behind all content
 * (js/substrate.js). Identical contract to the homepage's .home-substrate:
 * width/height 100% so the canvas (a replaced element) fills the viewport
 * instead of its intrinsic 150px. Content layers above via z-index. */
.fw-substrate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.m8c-02-framework main,
.m8c-02-framework .site-footer { position: relative; z-index: 1; }

/* Lime accent on display words = lime TEXT (17:1 on dark), never a fill. */
.m8c-02-framework .accent { color: var(--lime); }
.scrolly__aha-title .accent { text-shadow: var(--glow-lime); }

/* ── Scrollytelling steps — question-first typography ────────────────────────
 * Each step LEADS with the diagnostic question; the label + meaning resolve
 * after, once the reader has self-located. */
.scrolly__step-q {
  margin: 0;
  color: var(--text);
  line-height: var(--lh-subhead);
  max-width: 24ch;
}
.scrolly__step-meta {
  margin: var(--space-sm) 0 0;
  color: var(--text-3);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 700;
}
.scrolly__step-body {
  margin: var(--space-sm) 0 0;
  color: var(--text-2);
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* Participatory mark — the reader self-locates their bottleneck. Enhancement
 * only: `hidden` in markup until js/scrolly.js wires it (page complete without
 * JS). Single-select; aria-pressed carries the semantic, lime carries the read. */
.scrolly__mark {
  margin-top: var(--space-md);
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--hairline-strong);
  padding: var(--space-2xs) var(--space-sm);
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.scrolly__mark:hover,
.scrolly__mark:focus-visible { color: var(--text); border-color: var(--text); }
.scrolly__mark[aria-pressed="true"] {
  color: var(--lime);
  border-color: var(--lime);
}

/* ── The aha step (convergence climax) ──────────────────────────────────────── */
.scrolly__step-eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--lime);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 700;
}
.scrolly__aha-title {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  text-transform: uppercase;
}
.scrolly__aha-body {
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--text-2);
  max-width: var(--measure);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
}

/* ── The loop-closer — the climax CTA's own arrival ─────────────────────────
 * Full-width band after the scrollytelling, before the footer: the resolution
 * of the tension the convergence opened. Generous breathing room above + below
 * (no wedge between the stage tail and the footer), a hairline off the footer. */
.fw-climax {
  display: flex;
  justify-content: center;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-gutter);
  border-top: 1px solid var(--hairline);
}

/* ── Mobile floor — complete static map ─────────────────────────────────────
 * At the Scrollytelling un-pin breakpoint (920px) the stage flows above the
 * steps and the active-tracking has no visual payoff (the map scrolls away as
 * the reader works the steps). So show the COMPLETE static map — all layers
 * legible, the binding layer lime — instead of the descent's dim/active states.
 * The stepped prose below carries the per-layer walk. */
@media (max-width: 920px) {
  /* The stage un-pins; the convergence seal is hidden here (the aha prose + the
   * CTA band carry the open loop). So keep the map COMPLETE + legible through the
   * descent AND the converged state — never the receded/anonymized desktop end. */
  .m8c-02-framework .strata--interactive[data-scrolly-ready] .strata__row,
  .m8c-02-framework .strata--interactive[data-scrolly-ready][data-converged] .strata__row { opacity: 1; transform: none; }
  .m8c-02-framework .strata--interactive[data-scrolly-ready][data-converged] .strata__numeral,
  .m8c-02-framework .strata--interactive[data-scrolly-ready][data-converged] .strata__name,
  .m8c-02-framework .strata--interactive[data-scrolly-ready][data-converged] .strata__state { opacity: 1; }
  .m8c-02-framework .strata--interactive[data-scrolly-ready] .strata__bar-fill {
    transform: scaleX(var(--fill, 0.6)); background: var(--text-3); box-shadow: none;
  }
}

/* ── D22 · reduced-motion umbrella (surface scope) ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .m8c-02-framework,
  .m8c-02-framework * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}