/**
 * Animation states.
 *
 * Progressive enhancement model:
 *  - With NO JS, `[data-reveal]` elements are fully visible (these rules never apply,
 *    because the `.lhg-js` class is only added by JavaScript).
 *  - With JS, elements start hidden and main.js animates them in (GSAP) or reveals
 *    them instantly (reduced-motion / GSAP unavailable / safety timeout) via
 *    `.lhg-reveal-all`.
 */

/* Hidden initial states — only when JS is active. */
.lhg-js [data-reveal="fade-up"] { opacity: 0; transform: translateY(30px); }
.lhg-js [data-reveal="clip"]    { opacity: 0; clip-path: inset(0 0 100% 0); }
.lhg-js [data-reveal="words"]   { opacity: 0; }
.lhg-js [data-reveal="lines"] .hero__word { transform: translateY(110%); }

.lhg-js [data-reveal] { will-change: transform, opacity; }

/* Reveal-everything escape hatch: reduced motion, missing GSAP, or safety timeout. */
.lhg-js.lhg-reveal-all [data-reveal],
.lhg-js.lhg-reveal-all [data-reveal] .hero__word,
.lhg-js.lhg-reveal-all [data-reveal] .word {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

/* Word-split spans created by JS for the intro statement. */
.word { display: inline-block; }
.word__inner { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
	.lhg-js [data-reveal],
	.lhg-js [data-reveal] .hero__word {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}