/* Hero load sequence — pre-state only. The choreography itself lives in * public/assets/js/hero-intro.js; this file exists for the handful of frames * between first paint and that script taking over. * * Without it the hero paints finished, then gets yanked back to its start * position the moment GSAP writes the from-states — a visible flinch on every * load. `.hero-armed` is stamped on by an inline head script (index.astro) * and removed in the same frame GSAP sets those from-states, so the handover is * seamless: the elements are hidden by this rule, then hidden by GSAP's own * inline opacity, and only the second one animates away. * * !important is load-bearing. Three of the armed elements carry their target * opacity in an inline style attribute (the background field, the grain layer), * and inline styles beat a class selector. This rule only applies while armed, * so it never competes with the tween that follows. * * Only the homepage links this file, and only the homepage arms the class — * every [data-intro] hook is inert everywhere else. */ .hero-armed [data-intro] { opacity: 0 !important } /* The two headline lines sit in overflow:hidden wrappers, which is what makes * site.js's masked [data-rvl] reveal work. Characters rising 40px from below * the baseline would be clipped by that same mask, so hero-intro.js flips the * wrapper to visible when it takes the hero over. The wrappers keep their * markup as-is: under reduced motion the mask is still exactly what's wanted. */ /* Split spans need a box to transform. inline-block is the whole reason these * classes exist — spaces stay real text nodes between them, so the paragraph * still wraps where it wrapped before it was split. */ .split-char, .split-word { display: inline-block } /* …and the reason character splitting needs a third class. Each .split-char is * an atomic inline box, so the browser treats every gap between two letters as * a wrap opportunity and a narrow viewport breaks the headline mid-word * ("I DESIGN H / OW" at 390px). split-text.js puts one of these around each * word; nowrap closes those opportunities, leaving only the whitespace text * nodes between wrappers — which is where the line would have broken all * along. inline-block keeps the wrapper a single box on the baseline. */ .split-word-wrap { display: inline-block; white-space: nowrap }