/**
 * Scroll-reveal utility. See assets/js/reveal.js for the class contract.
 *
 * Two gates, both load-bearing:
 *
 * 1. `prefers-reduced-motion: no-preference`. The reset in style.css kills
 *    `transition` with `!important` under `reduce`, so an element that
 *    started at `opacity: 0` there would never transition back to 1 — it
 *    would simply be invisible, permanently. Gating the hidden start state
 *    (rather than gating the transition) is the only ordering that cannot
 *    strand content.
 *
 * 2. `.miraigo-reveal-ready`, set by reveal.js on <html>. Nothing is hidden
 *    until the script that can un-hide it has actually run, which covers
 *    both a JS failure on the front end and the block editor, where this
 *    stylesheet is not enqueued at all.
 *
 * `.is-reveal` itself is style-free on purpose: it is the JS trigger, and
 * blocks with their own reveal shape (text-image) hang their styles off
 * `.is-revealed` without inheriting the generic fade.
 */

@media (prefers-reduced-motion: no-preference) {

	.miraigo-reveal-ready :is(.is-reveal--up, .is-reveal--left, .is-reveal--right) {
		opacity: 0;
		transition:
			opacity var(--wp--custom--transition--reveal) var(--miraigo-reveal-delay),
			transform var(--wp--custom--transition--reveal) var(--miraigo-reveal-delay);

		/* reveal.js writes --miraigo-reveal-index as a unitless sibling
		   position; the step itself stays a token. */
		--miraigo-reveal-delay: calc(var(--wp--custom--reveal--stagger) * var(--miraigo-reveal-index, 0));
	}

	.miraigo-reveal-ready .is-reveal--up {
		transform: translateY(var(--wp--custom--reveal--distance));
	}

	.miraigo-reveal-ready .is-reveal--left {
		transform: translateX(calc(var(--wp--custom--reveal--distance-inline) * -1));
	}

	.miraigo-reveal-ready .is-reveal--right {
		transform: translateX(var(--wp--custom--reveal--distance-inline));
	}

	.miraigo-reveal-ready :is(.is-reveal--up, .is-reveal--left, .is-reveal--right).is-revealed {
		opacity: 1;
		transform: none;
	}
}