/*
 * Scroll-reveal system. Hidden states apply ONLY when JS is on (html.js,
 * set by an inline script in the head) so no-JS visitors and crawlers see
 * everything. animations.js adds .is-inview when an element enters the
 * viewport. All motion is GPU-only (opacity/transform/clip-path) and fully
 * disabled under prefers-reduced-motion.
 */

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

/* Variant: rise */
html.js [data-reveal="rise"],
html.js [data-reveal="rise-stagger"] > * { transform: translateY(24px); }

/* Variant: scale-in (media) */
html.js [data-reveal="scale-in"] { transform: scale(.96); }

/* Variant: lines — JS wraps words in .zgb-word > span */
html.js [data-reveal="lines"] { opacity: 1; }
html.js [data-reveal="lines"] .zgb-word { display: inline-block; overflow: hidden; vertical-align: top; }
html.js [data-reveal="lines"] .zgb-word > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform var(--zgb-dur-slow) var(--zgb-ease-out);
	transition-delay: calc(var(--w, 0) * 45ms);
}

/* Settle to rest */
html.js [data-reveal].is-inview,
html.js [data-reveal="rise-stagger"].is-inview > * {
	opacity: 1;
	transform: none;
	transition: opacity var(--zgb-dur) var(--zgb-ease-out),
	            transform var(--zgb-dur) var(--zgb-ease-out);
}
html.js [data-reveal="lines"].is-inview .zgb-word > span { transform: none; }

/* Per-element delay hooks */
html.js [data-reveal-delay="1"] { transition-delay: .08s; }
html.js [data-reveal-delay="2"] { transition-delay: .16s; }
html.js [data-reveal-delay="3"] { transition-delay: .24s; }

/* Grid stagger: JS sets --i on each child */
html.js [data-reveal="rise-stagger"].is-inview > * {
	transition-delay: calc(var(--i, 0) * var(--zgb-reveal-stagger));
}

/* Animated rule draw-in */
html.js .zgb-rule[data-reveal] { opacity: 1; transform: scaleX(0); }
html.js .zgb-rule[data-reveal].is-inview { transform: scaleX(1); transition: transform var(--zgb-dur) var(--zgb-ease-out); }

/* Reduced motion + no-IO failsafe (belt-and-braces) */
@media (prefers-reduced-motion: reduce) {
	html.js [data-reveal],
	html.js [data-reveal="rise-stagger"] > *,
	html.js [data-reveal="lines"] .zgb-word > span {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}