/**
 * Scroll-reveal system — subtle, editorial reveal-on-enter transitions.
 * Paired with assets/js/scroll-reveal.js, which toggles `is-revealed`
 * via IntersectionObserver the first time an element enters the
 * viewport (once only — the observer unobserves after triggering).
 *
 * Elements start hidden only once JS confirms it can run the reveal
 * (see .lbm-reveal-ready below) so content is never stuck invisible
 * if JS fails to load — a no-JS/slow-JS visitor just sees everything
 * already in place, which degrades gracefully rather than breaking.
 */

.lbm-reveal {
	opacity: 1;
	transform: none;
}

.lbm-reveal-ready .lbm-reveal {
	opacity: 0;
	transition: opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal);
	transition-delay: calc(min(var(--lbm-reveal-i, 0), 6) * var(--reveal-stagger-step));
	will-change: opacity, transform;
}

.lbm-reveal-ready .lbm-reveal--up {
	transform: translateY(var(--reveal-distance));
}

.lbm-reveal-ready .lbm-reveal--left {
	transform: translateX(calc(-1 * var(--reveal-distance)));
}

.lbm-reveal-ready .lbm-reveal--right {
	transform: translateX(var(--reveal-distance));
}

.lbm-reveal-ready .lbm-reveal--scale {
	transform: scale(0.98);
}

.lbm-reveal-ready .lbm-reveal--fade {
	transform: none;
}

.lbm-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lbm-reveal-ready .lbm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}