/**
 * Motion Engine CSS — kate-angelo-child v1.0.0 (Daria, Deliverable 2).
 *
 * FAILSAFE — READ BEFORE EDITING. Every [data-reveal] / [data-split]
 * element must be FULLY VISIBLE BY DEFAULT, with no class required. The
 * hiding rules below only ever apply once `html` carries a `gsap-ready`
 * class, and that class is added by motion-engine.js ONLY after GSAP,
 * ScrollTrigger, and SplitText have all loaded and registered without
 * throwing, AND the user does not have prefers-reduced-motion set. If any
 * script fails to load, throws an error, or the user has reduced motion
 * on, `gsap-ready` is never added — meaning these hiding rules never match
 * anything, meaning every animatable element just renders normally.
 *
 * NEVER invert this pattern (default-hidden, revealed-only-if-JS-succeeds)
 * — that inversion is the exact, documented, repeat bug that broke the
 * About page's content multiple times earlier in this project. Default
 * state = visible. Opt-in state = hidden-pending-reveal.
 */

[data-reveal] {
	opacity: 1;
	transform: none;
}

html.gsap-ready [data-reveal] {
	opacity: 0;
	transform: translateY(32px);
}

html.gsap-ready [data-reveal].ka-revealed {
	opacity: 1;
	transform: none;
}

/* SplitText word/char units: no default hiding at all (SplitText only
 * restructures markup into spans; if the plugin never loads, the original
 * unsplit text just renders as normal, fully visible text — nothing to
 * fail safe against here beyond making sure the wrapped units can be
 * transformed). */
.ka-split-word,
.ka-split-char {
	display: inline-block;
	will-change: transform, opacity;
}

/* prefers-reduced-motion belt-and-suspenders: motion-engine.js already
 * refuses to add `gsap-ready` at all when this is set, so this rule should
 * never be reachable in practice — kept anyway as a second, CSS-only line
 * of defense in case `gsap-ready` is ever added by different code in a
 * future round without re-checking this media query in JS. */
@media (prefers-reduced-motion: reduce) {
	html.gsap-ready [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}