/* Motion system. Every effect enhances an already-visible default:
   hidden initial states are gated behind html.js-enabled, and everything
   collapses under prefers-reduced-motion. */

/* ---------------------------------------------------------------------------
   Scroll reveals
--------------------------------------------------------------------------- */

.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* On the immersive homepage each chapter is a cut: the incoming frame rises
   further and settles from a slight scale, so page turns read as edits. */
.js-enabled .immersive-home .narrative-section[data-reveal] {
  opacity: 0;
  transform: translateY(48px) scale(0.988);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 860ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-enabled .immersive-home .narrative-section[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger direct children of [data-stagger] inside a revealed section. */
.js-enabled [data-reveal] [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-enabled [data-reveal].is-visible [data-stagger] > * {
  opacity: 1;
  transform: none;
}

.js-enabled [data-reveal].is-visible [data-stagger] > *:nth-child(1) { transition-delay: 140ms; }
.js-enabled [data-reveal].is-visible [data-stagger] > *:nth-child(2) { transition-delay: 230ms; }
.js-enabled [data-reveal].is-visible [data-stagger] > *:nth-child(3) { transition-delay: 320ms; }
.js-enabled [data-reveal].is-visible [data-stagger] > *:nth-child(4) { transition-delay: 410ms; }
.js-enabled [data-reveal].is-visible [data-stagger] > *:nth-child(5) { transition-delay: 500ms; }
.js-enabled [data-reveal].is-visible [data-stagger] > *:nth-child(n + 6) { transition-delay: 580ms; }

/* ---------------------------------------------------------------------------
   Projector start: letterbox bars part and the first frame flickers in.
   One-shot on page load, desktop only.
--------------------------------------------------------------------------- */

@keyframes letterbox-open {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

@keyframes projector-flicker {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 0.72;
  }
  16% {
    opacity: 0.28;
  }
  28% {
    opacity: 0.84;
  }
  38% {
    opacity: 0.48;
  }
  52% {
    opacity: 0.94;
  }
  62% {
    opacity: 0.78;
  }
  72%,
  100% {
    opacity: 1;
  }
}

@media (min-width: 901px) {
  /* Keep the hero frame visible during the projector prologue. The section-level
     scroll reveal would otherwise hide letterbox bars and flicker until
     --hero-open-content-delay. Inner copy still waits for .is-visible. */
  .js-enabled .immersive-home .home-hero.narrative-section[data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-enabled .home-hero .letterbox {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 45;
    height: var(--hero-open-letterbox-height);
    background: var(--black);
    pointer-events: none;
    transform: scaleY(1);
    animation: letterbox-open var(--hero-open-letterbox) cubic-bezier(0.22, 1, 0.36, 1)
      var(--hero-open-hold) both;
  }

  .js-enabled .home-hero .letterbox-top {
    top: 0;
    transform-origin: top center;
  }

  .js-enabled .home-hero .letterbox-bottom {
    bottom: 0;
    transform-origin: bottom center;
  }

  .js-enabled .home-hero .hero-frame {
    animation: projector-flicker var(--hero-open-flicker) ease-out var(--hero-open-hold) both;
  }
}

/* ---------------------------------------------------------------------------
   Hero choreography: title lines rise, redline draws, map thread follows
--------------------------------------------------------------------------- */

.js-enabled .home-hero .hero-body,
.js-enabled .home-hero .entry-row {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Title lines rise out of a mask, like frames pulled up into the gate. */
.js-enabled .home-hero .hero-line {
  opacity: 0;
  transform: translateY(0.42em);
  clip-path: inset(-0.1em -0.1em 100% -0.1em);
  transition:
    opacity 540ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-enabled .home-hero .hero-redline {
  transform: scaleX(0);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1) 480ms;
}

.js-enabled .home-hero.is-visible .hero-body,
.js-enabled .home-hero.is-visible .entry-row {
  opacity: 1;
  transform: none;
}

.js-enabled .home-hero.is-visible .hero-line {
  opacity: 1;
  transform: none;
  /* Negative inset so Spectral descenders never get shaved by the mask. */
  clip-path: inset(-0.25em -0.1em -0.25em -0.1em);
}

.js-enabled .home-hero.is-visible .hero-line:nth-child(1) { transition-delay: 100ms; }
.js-enabled .home-hero.is-visible .hero-line:nth-child(2) { transition-delay: 250ms; }
.js-enabled .home-hero.is-visible .hero-line:nth-child(3) { transition-delay: 400ms; }
.js-enabled .home-hero.is-visible .hero-body { transition-delay: 580ms; }
.js-enabled .home-hero.is-visible .entry-row { transition-delay: 720ms; }

.js-enabled .home-hero.is-visible .hero-redline {
  transform: scaleX(1);
}

.js-enabled .home-hero .thread-path path {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  transition: stroke-dashoffset 1700ms cubic-bezier(0.22, 1, 0.36, 1) 520ms;
}

.js-enabled .home-hero.is-visible .thread-path path {
  stroke-dashoffset: 0;
}

.js-enabled .home-hero .thread-dot {
  opacity: 0;
  transition: opacity 420ms ease;
}

.js-enabled .home-hero.is-visible .thread-dot {
  opacity: 1;
}

.js-enabled .home-hero.is-visible .dot-a { transition-delay: 900ms; }
.js-enabled .home-hero.is-visible .dot-b { transition-delay: 1300ms; }
.js-enabled .home-hero.is-visible .dot-c { transition-delay: 1700ms; }

/* Returning to the prologue should feel alive without replaying the opening
   projector sequence. After the first visit, the same elements use a shorter,
   lighter reveal. */
.js-enabled .home-hero.has-revealed-once .hero-body,
.js-enabled .home-hero.has-revealed-once .entry-row {
  transform: translateY(14px);
  transition-duration: 620ms;
}

.js-enabled .home-hero.has-revealed-once .hero-line {
  transform: translateY(0.16em);
  clip-path: inset(-0.25em -0.1em -0.25em -0.1em);
  transition-duration: 460ms, 680ms, 0ms;
}

.js-enabled .home-hero.has-revealed-once .hero-redline {
  transition-delay: 110ms;
  transition-duration: 560ms;
}

.js-enabled .home-hero.has-revealed-once .thread-path path {
  transition-duration: 1080ms;
  transition-delay: 160ms;
}

.js-enabled .home-hero.has-revealed-once.is-visible .hero-line:nth-child(1) { transition-delay: 60ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .hero-line:nth-child(2) { transition-delay: 140ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .hero-line:nth-child(3) { transition-delay: 220ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .hero-body { transition-delay: 300ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .entry-row { transition-delay: 380ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .dot-a { transition-delay: 420ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .dot-b { transition-delay: 540ms; }
.js-enabled .home-hero.has-revealed-once.is-visible .dot-c { transition-delay: 660ms; }

.js-enabled .home-hero.has-revealed-once.is-visible .hero-line,
.js-enabled .home-hero.has-revealed-once.is-visible .hero-body,
.js-enabled .home-hero.has-revealed-once.is-visible .entry-row {
  transform: none;
}

/* ---------------------------------------------------------------------------
   Chapter cuts: headings rise out of a mask when a chapter becomes active
--------------------------------------------------------------------------- */

.js-enabled .narrative-section .chapter-head h2,
.js-enabled .narrative-section .roadmap-copy h2,
.js-enabled .narrative-section .story-copy h2,
.js-enabled .narrative-section .lessons-copy h2,
.js-enabled .narrative-section .mission-copy h2,
.js-enabled .narrative-section .closing-frame h2 {
  opacity: 0;
  transform: translateY(0.36em);
  clip-path: inset(-0.1em -0.1em 100% -0.1em);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
    clip-path 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

.js-enabled .narrative-section.is-visible .chapter-head h2,
.js-enabled .narrative-section.is-visible .roadmap-copy h2,
.js-enabled .narrative-section.is-visible .story-copy h2,
.js-enabled .narrative-section.is-visible .lessons-copy h2,
.js-enabled .narrative-section.is-visible .mission-copy h2,
.js-enabled .narrative-section.is-visible .closing-frame h2 {
  opacity: 1;
  transform: none;
  clip-path: inset(-0.25em -0.1em -0.25em -0.1em);
}

/* ---------------------------------------------------------------------------
   The red thread: every structural line stitches in with one shared rhythm,
   and the red nodes land once the line has passed through.
--------------------------------------------------------------------------- */

.js-enabled .narrative-section .slate-sep {
  transform: scaleX(0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.js-enabled .narrative-section.is-visible .slate-sep {
  transform: scaleX(1);
}

/* Purpose hairlines stitch in one column after another. */
.js-enabled .purpose-columns article::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.js-enabled .purpose-section.is-visible .purpose-columns article::before {
  transform: scaleX(1);
}

.js-enabled .purpose-section.is-visible .purpose-columns article:nth-child(2)::before { transition-delay: 380ms; }
.js-enabled .purpose-section.is-visible .purpose-columns article:nth-child(3)::before { transition-delay: 560ms; }

.js-enabled .timeline::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.js-enabled .roadmap-section.is-visible .timeline::before {
  transform: scaleY(1);
}

/* Timeline dots land as the thread passes them. */
.js-enabled .timeline-step::before {
  transform: scale(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}

.js-enabled .roadmap-section.is-visible .timeline-step::before {
  transform: scale(1);
}

.js-enabled .roadmap-section.is-visible .timeline-step:nth-child(2)::before { transition-delay: 540ms; }
.js-enabled .roadmap-section.is-visible .timeline-step:nth-child(3)::before { transition-delay: 760ms; }
.js-enabled .roadmap-section.is-visible .timeline-step:nth-child(n + 4)::before { transition-delay: 980ms; }

.js-enabled .pipeline::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.js-enabled .structure-section.is-visible .pipeline::before {
  transform: scaleX(1);
}

/* Pipeline nodes land left to right behind the drawing line. */
.js-enabled .pipeline-node {
  transform: scale(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}

.js-enabled .structure-section.is-visible .pipeline-node {
  transform: scale(1);
}

.js-enabled .structure-section.is-visible .pipeline-step:nth-child(2) .pipeline-node { transition-delay: 540ms; }
.js-enabled .structure-section.is-visible .pipeline-step:nth-child(3) .pipeline-node { transition-delay: 760ms; }
.js-enabled .structure-section.is-visible .pipeline-step:nth-child(n + 4) .pipeline-node { transition-delay: 980ms; }

.js-enabled .lesson-reel::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.js-enabled .lessons-section.is-visible .lesson-reel::before {
  transform: scaleY(1);
}

@keyframes story-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(224, 56, 46, 0.18);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(224, 56, 46, 0.05);
  }
}

.preview-story-dot,
.thread-dot {
  animation: story-dot-pulse 3.2s ease-in-out infinite;
}

/* Parallax targets follow a JS-set custom property. */
[data-parallax] {
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   Reduced motion: show everything, animate nothing
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-enabled [data-reveal],
  .js-enabled .immersive-home .narrative-section[data-reveal],
  .js-enabled [data-reveal] [data-stagger] > *,
  .js-enabled .home-hero .hero-line,
  .js-enabled .home-hero .hero-body,
  .js-enabled .home-hero .entry-row,
  .js-enabled .home-hero .thread-dot {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-enabled .home-hero .hero-line,
  .js-enabled .narrative-section .chapter-head h2,
  .js-enabled .narrative-section .roadmap-copy h2,
  .js-enabled .narrative-section .story-copy h2,
  .js-enabled .narrative-section .lessons-copy h2,
  .js-enabled .narrative-section .mission-copy h2,
  .js-enabled .narrative-section .closing-frame h2 {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .js-enabled .home-hero .hero-redline,
  .js-enabled .narrative-section .slate-sep,
  .js-enabled .purpose-columns article::before,
  .js-enabled .timeline::before,
  .js-enabled .timeline-step::before,
  .js-enabled .pipeline::before,
  .js-enabled .pipeline-node,
  .js-enabled .lesson-reel::before {
    transform: none;
    transition: none;
  }

  .js-enabled .home-hero .thread-path path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .preview-story-dot,
  .thread-dot {
    animation: none;
  }

  /* Projector-start opening and cursor beam do not exist under reduced motion. */
  .js-enabled .home-hero .letterbox {
    display: none;
  }

  .js-enabled .home-hero .hero-frame {
    animation: none;
  }

  .projector-beam {
    display: none;
  }

  [data-parallax] {
    transform: none;
  }

  .pager-intent .narrative-section.is-pager-active .frame {
    transform: none;
    transition: none;
  }
}