/* =====================================================================
   Header + Hero opening — v2 (masks, curtain, decompression)
   Timeline (from html.is-ready):
     0ms   wordmark unmasked (curtain →)           nav links pop in (stagger 50)
     120ms h1 words slide out of their line masks (38ms/word, cap 420)
     300ms hero-media curtain rises + image decompresses (1.2s)
     420ms side paragraph focuses (blur → sharp)
     560ms CTA focuses                             820ms hero-meta wiped →
     900ms dots pop (stagger 60)
   Everything is on screen by ~1.5s.
   ===================================================================== */

/* ---- hidden until ready (html.js only → no-JS shows everything) ---- */
/* Only while not ready: the entrance keyframes start at opacity 0 (fill: backwards),
   so once html.is-ready lands the hidden state must go away or the elements would
   snap back to opacity 0 when their animation finishes. */
html.js:not(.is-ready) .wordmark,
html.js:not(.is-ready) .nav a,
html.js:not(.is-ready) .header-actions > *,
html.js:not(.is-ready) .hero-side > *,
html.js:not(.is-ready) .hero-media,
html.js:not(.is-ready) .hero-dots span { opacity: 0; }

html.js .hero h1.is-split:not(.is-shown) { opacity: 1; }          /* words are masked, not faded */
html.js:not(.is-ready) .hero h1:not(.is-split) { opacity: 0; }

/* the hero never uses the generic reveal */
.hero .reveal { opacity: 1; transform: none; }

/* ---- header ---- */
html.is-ready .wordmark {
  --r: 4px;
  animation: mm-curtain-right var(--dur-slow) var(--ease-expo) backwards,
             mm-focus-still var(--dur-std) var(--ease-out) backwards;
}
html.is-ready .nav a {
  animation: mm-pop var(--dur-std) var(--ease-out) backwards;
  animation-delay: calc(60ms + var(--i, 0) * 50ms);
}
html.is-ready .nav a:nth-child(1) { --i: 0; }
html.is-ready .nav a:nth-child(2) { --i: 1; }
html.is-ready .nav a:nth-child(3) { --i: 2; }
html.is-ready .nav a:nth-child(4) { --i: 3; }
html.is-ready .nav a:nth-child(5) { --i: 4; }
html.is-ready .header-actions > * {
  animation: mm-focus-still var(--dur-std) var(--ease-out) backwards;
  animation-delay: 260ms;
}
html.is-ready .header-actions > .btn { animation-delay: 340ms; }

/* ---- headline: masked words ---- */
.hero h1.is-split { --d: 120ms; }
.hero h1 .w { clip-path: inset(-.12em -.06em -.22em -.06em); }
.hero h1 .w-in { transform-origin: 0 100%; }

/* ---- side column ---- */
html.is-ready .hero-side > p {
  animation: mm-focus var(--dur-slow) var(--ease-out) backwards;
  animation-delay: 420ms;
}
html.is-ready .hero-side > .btn {
  animation: mm-focus var(--dur-slow) var(--ease-out) backwards;
  animation-delay: 560ms;
}
html.is-ready .hero-meta {
  --r: 0px;
  animation: mm-curtain-right var(--dur-mask) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
  animation-delay: 820ms;
}
html.is-ready .hero-flags i {
  animation: mm-pop var(--dur-std) var(--ease-spring) backwards;
  animation-delay: calc(1000ms + var(--i, 0) * 60ms);
}
html.is-ready .hero-flags i:nth-child(2) { --i: 1; }
html.is-ready .hero-flags i:nth-child(3) { --i: 2; }

/* ---- media: curtain + decompression ---- */
.hero-media { --r: var(--radius-lg); }
html.is-ready .hero-media {
  animation: mm-curtain-up var(--dur-media) var(--ease-expo) backwards,
             mm-focus-still 1ms linear backwards;
  animation-delay: 300ms;
}
html.js .hero-media img { transform: scale(var(--zoom)); transform-origin: 50% 60%; }
html.is-ready .hero-media img {
  animation: mm-zoom calc(var(--dur-media) + 300ms) var(--ease-expo) forwards;
  animation-delay: 300ms;
}

/* ---- dots ---- */
html.is-ready .hero-dots span {
  animation: mm-pop var(--dur-std) var(--ease-spring) backwards;
  animation-delay: calc(900ms + var(--i, 0) * 60ms);
}
html.is-ready .hero-dots span:nth-child(2) { --i: 1; }
html.is-ready .hero-dots span:nth-child(3) { --i: 2; }
html.is-ready .hero-dots span:nth-child(4) { --i: 3; }
.hero-dots span { transition: transform var(--dur-std) var(--ease-out), background-color var(--dur-std) ease; }
.hero-dots span.is-active { animation-name: mm-pop, mm-breathe; }

/* ---- scroll parallax (JS sets --hero-shift 0→40px while the hero leaves) ---- */
.hero-copy, .hero-side {
  transform: translateY(calc(var(--hero-shift, 0px) * -.5));
  will-change: transform;
}
.hero-media img { will-change: transform; }

/* Scroll-driven: image keeps drifting inside its frame after the intro */
@supports (animation-timeline: view()) {
  .hero-media-drift { /* applied to the figure, not the img → no keyframe conflict */
    animation: mm-hero-drift linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  @keyframes mm-hero-drift {
    from { translate: 0 0; }
    to   { translate: 0 -40px; }
  }
}

/* ---- touch / small screens: shorter, no decompression zoom ---- */
@media (max-width: 720px) {
  :root { --dur-media: 900ms; --zoom: 1.08; }
  html.is-ready .hero-media { animation-delay: 200ms; }
  html.is-ready .hero-side > p { animation-delay: 360ms; }
  html.is-ready .hero-side > .btn { animation-delay: 460ms; }
  html.is-ready .hero-meta { animation-delay: 620ms; }
  html.is-ready .hero-flags i { animation-delay: calc(760ms + var(--i, 0) * 60ms); }
  html.is-ready .hero-dots span { animation-delay: calc(700ms + var(--i, 0) * 60ms); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .wordmark, html.js .nav a, html.js .header-actions > *,
  html.js .hero h1, html.js .hero-side > *, html.js .hero-media,
  html.js .hero-dots span { opacity: 1 !important; animation: none; }
  html.js .hero-media img { transform: none; animation: none; }
  .hero-copy, .hero-side { transform: none; }
  .hero-dots span.is-active { animation: none; }
}