/* =========================================================
   ForGrowth Academy — hero-sequence.css
   ISOLATED. Fixes only the hero intro scroll sequence.

   THE BUG
   The curtain needed up to 720px of scroll to hand off to the hero, but the
   hero sat at the very top of the document. By the time it faded in, the page
   had already scrolled ~720px, so BUILD. and LAUNCH. had travelled above the
   viewport and only GROW. remained on screen.

   THE FIX
   A runway element before the hero absorbs exactly the scroll the curtain
   needs. The hero therefore arrives with its top at the viewport top at the
   precise moment the curtain finishes clearing — nothing is ever pushed off
   the top of the screen.

   Runway height and the JS span are kept equal at 45vh (see js/experience.js).
   ========================================================= */

.curtain-runway {
  /* Must match SPAN in js/experience.js. */
  height: 45vh;
  pointer-events: none;
}

/* The three headline lines use overflow:hidden masks for their load-in
   animation. That animation finishes while the curtain still covers the hero,
   so by reveal time the words are settled. This guarantees they are never
   left mid-animation inside a mask, whatever the scroll timing. */
.hero h1 .line { overflow: visible; }

/* Give the heading room so no descender or accent is trimmed by the mask that
   the base stylesheet applies. */
.hero h1 .line span { will-change: auto; }

/* Keep the whole hero within the viewport once revealed, so the heading,
   paragraph and buttons read as one block rather than the heading sliding
   past the top edge. */
@media (min-height: 640px) {
  .hero-veiled {
    min-height: calc(100vh - 70px);   /* 70px = sticky header height */
    display: flex;
    align-items: center;
  }
  .hero-veiled > .container { width: 100%; }
}

/* Shorter viewports: let the hero size naturally rather than forcing a
   height that would squash the three lines. */
@media (max-height: 639px) {
  .curtain-runway { height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
  /* No intro to scroll through — remove the runway so the hero is immediate. */
  .curtain-runway { height: 0; }
}