/* ============================================================
   MOTION: entrance choreography, fallbacks, reduced motion.
   transform, opacity and clip-path only.
   ============================================================ */

/* ── The engine hides what it reveals, unconditionally. If JS never
   ran, or the engine failed to load, show everything in place. ── */
html:not(.js) [data-sc-in],
html:not(.js) [data-sc-stagger] > *,
html:not(.js) [data-sc-cue],
html.sc-failed [data-sc-in],
html.sc-failed [data-sc-stagger] > *,
html.sc-failed [data-sc-cue] {
  opacity: 1 !important;
  transform: none !important;
}

/* JS smooth scrolling drives the real scroll position; CSS smoothing
   must get out of its way or the two fight. base.css keeps
   scroll-behavior: smooth as the no-JS fallback. */
html.has-smooth { scroll-behavior: auto; }

/* ── Title page entrance. CSS, not JS, so it runs the moment the page
   paints and needs nothing to have loaded. ── */
@keyframes lineUp {
  from { transform: translate3d(0, 108%, 0); }
  to   { transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__title { animation: riseIn 900ms var(--e-out) 120ms both; }
@media (min-width: 1200px) {
  .hero__title { animation: none; }
  .hero__title .line > span { animation: lineUp 1.15s var(--e-out) 120ms both; }
  .hero__title .line:nth-child(2) > span { animation-delay: 210ms; }
}
.mast        { animation: fadeIn 700ms var(--e-out) 80ms both; }
.hero__sub   { animation: riseIn 800ms var(--e-out) 420ms both; }
.hero__cta   { animation: riseIn 800ms var(--e-out) 500ms both; }
.hero__avail { animation: riseIn 800ms var(--e-out) 580ms both; }
.strand      { animation: fadeIn 1.4s var(--e-out) 250ms both; }

/* ── Headings: each rendered line rises from behind its own edge,
   once, on entry (lines.js). Words on one line share a delay. ── */
[data-lines].is-split .lw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* descender room inside the mask */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
[data-lines].is-split .lw__i {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--e-out);
  transition-delay: calc(var(--li, 0) * 90ms);
}
[data-lines].is-in .lw__i { transform: none; }

/* ── Noodle cursor canvas (noodle.js). Above the folio, below the skip link. ── */
.noodle {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 250;
  pointer-events: none;
}

/* ── Method: the orange floods down from the chapter's top edge, once. ── */
.js .method__ground {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--e-io);
}
.js .method.is-flooded .method__ground { clip-path: inset(0 0 0 0); }
.js .method.is-instant .method__ground { transition: none; }

/* Stage text stays white and fully opaque on orange (dimming would fail
   contrast), so only the thread marker beside the number changes. */

/* ============================================================
   REDUCED MOTION: fewer and gentler, not zero.
   Opacity that carries comprehension stays; position changes go.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__title, .hero__title .line > span,
  .mast, .hero__sub, .hero__cta, .hero__avail, .strand {
    animation: fadeIn 300ms ease-out both;
  }
  .hero__title .line > span { animation: none; transform: none; }

  .hero__field, .hero__body, .strand { transform: none !important; }
  .strand { transform: translate3d(0, calc(var(--band-y, 40vh) - 50%), 0) !important; }

  .js .method__ground { clip-path: none; transition: none; }

  [data-lines].is-split .lw__i {
    transform: none;
    opacity: 0;
    transition: opacity 300ms ease-out;
    transition-delay: calc(var(--li, 0) * 60ms);
  }
  [data-lines].is-in .lw__i { opacity: 1; }

  .stack__diagram, .close__cta { --draw: 1; --draw-c: 1; }

  .ledger__name, .ledger__name::before, .mstep__n::after,
  .link::after, .mast__links a::after, .btn, .btn__label, .btn__arr svg, .chip, .index {
    transition-duration: 0.01ms !important;
  }
  .ledger__row:hover .ledger__name { transform: none; }
}