/**
 * YAOTW Stylo — Scroll reveal (front-end runtime).
 *
 * Anti-masking: every hiding rule is gated behind `html.wps-reveal-on`, a class
 * added by scroll-reveal.js at runtime. If the JS never runs, this class is
 * absent and nothing below applies — no element is ever hidden.
 *
 * Shared easing: cubic-bezier(0.16, 1, 0.3, 1).
 *
 * These `wps-reveal*` classes are JS-toggled behaviour classes, distinct from
 * the injected utility classes (`.wps_*`, underscores). Do not merge them.
 *
 * `.wps-no-reveal` (the public author opt-out, since 2.2.0) has no rule here on
 * purpose: it is handled entirely in scroll-reveal.js, which simply never tags
 * an excluded subtree. Nothing to un-hide means nothing to override.
 *
 * No `will-change` (removed in 2.1.1): it was set on every tagged node and never
 * released, permanently promoting hundreds of elements to compositor layers. It
 * cannot be released on `.wps-reveal--in` — that class is precisely what starts
 * the transition, so the hint would be dropped at t=0, exactly when it is
 * useful. Modern engines promote `opacity` / `transform` transitions on their
 * own, so no hint is needed.
 *
 * @package WPStylo_Companion
 * @since   2.0.0
 */

/* ── fade-up ─────────────────────────────────────────────────────────────── */
html.wps-reveal-on .wps-reveal--fade-up {
	opacity: 0;
	transform: translateY( 30px );
	filter: blur( 8px );
	transition: opacity .8s cubic-bezier( .16, 1, .3, 1 ),
		transform .8s cubic-bezier( .16, 1, .3, 1 ),
		filter .9s cubic-bezier( .16, 1, .3, 1 );
}

html.wps-reveal-on .wps-reveal--fade-up.wps-reveal--in {
	opacity: 1;
	transform: none;
	filter: none;
}

html.wps-reveal-on .wps-reveal--fade-up .wps-reveal__item {
	opacity: 0;
	transform: translateY( 20px );
	filter: blur( 6px );
	transition: opacity .7s cubic-bezier( .16, 1, .3, 1 ),
		transform .7s cubic-bezier( .16, 1, .3, 1 ),
		filter .8s cubic-bezier( .16, 1, .3, 1 );
	transition-delay: var( --wps-reveal-stagger, 0ms );
}

html.wps-reveal-on .wps-reveal--fade-up.wps-reveal--in .wps-reveal__item {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ── slide-left ──────────────────────────────────────────────────────────── */
html.wps-reveal-on .wps-reveal--slide-left {
	opacity: 0;
	transform: translateX( -30px );
	filter: blur( 8px );
	transition: opacity .8s cubic-bezier( .16, 1, .3, 1 ),
		transform .8s cubic-bezier( .16, 1, .3, 1 ),
		filter .9s cubic-bezier( .16, 1, .3, 1 );
}

html.wps-reveal-on .wps-reveal--slide-left.wps-reveal--in {
	opacity: 1;
	transform: none;
	filter: none;
}

html.wps-reveal-on .wps-reveal--slide-left .wps-reveal__item {
	opacity: 0;
	transform: translateX( -20px );
	filter: blur( 6px );
	transition: opacity .7s cubic-bezier( .16, 1, .3, 1 ),
		transform .7s cubic-bezier( .16, 1, .3, 1 ),
		filter .8s cubic-bezier( .16, 1, .3, 1 );
	transition-delay: var( --wps-reveal-stagger, 0ms );
}

html.wps-reveal-on .wps-reveal--slide-left.wps-reveal--in .wps-reveal__item {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ── slide-right ─────────────────────────────────────────────────────────── */
html.wps-reveal-on .wps-reveal--slide-right {
	opacity: 0;
	transform: translateX( 30px );
	filter: blur( 8px );
	transition: opacity .8s cubic-bezier( .16, 1, .3, 1 ),
		transform .8s cubic-bezier( .16, 1, .3, 1 ),
		filter .9s cubic-bezier( .16, 1, .3, 1 );
}

html.wps-reveal-on .wps-reveal--slide-right.wps-reveal--in {
	opacity: 1;
	transform: none;
	filter: none;
}

html.wps-reveal-on .wps-reveal--slide-right .wps-reveal__item {
	opacity: 0;
	transform: translateX( 20px );
	filter: blur( 6px );
	transition: opacity .7s cubic-bezier( .16, 1, .3, 1 ),
		transform .7s cubic-bezier( .16, 1, .3, 1 ),
		filter .8s cubic-bezier( .16, 1, .3, 1 );
	transition-delay: var( --wps-reveal-stagger, 0ms );
}

html.wps-reveal-on .wps-reveal--slide-right.wps-reveal--in .wps-reveal__item {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ── zoom-in ─────────────────────────────────────────────────────────────── */
html.wps-reveal-on .wps-reveal--zoom-in {
	opacity: 0;
	transform: scale( 0.96 );
	filter: blur( 8px );
	transition: opacity .8s cubic-bezier( .16, 1, .3, 1 ),
		transform .8s cubic-bezier( .16, 1, .3, 1 ),
		filter .9s cubic-bezier( .16, 1, .3, 1 );
}

html.wps-reveal-on .wps-reveal--zoom-in.wps-reveal--in {
	opacity: 1;
	transform: none;
	filter: none;
}

html.wps-reveal-on .wps-reveal--zoom-in .wps-reveal__item {
	opacity: 0;
	transform: scale( 0.98 );
	filter: blur( 6px );
	transition: opacity .7s cubic-bezier( .16, 1, .3, 1 ),
		transform .7s cubic-bezier( .16, 1, .3, 1 ),
		filter .8s cubic-bezier( .16, 1, .3, 1 );
	transition-delay: var( --wps-reveal-stagger, 0ms );
}

html.wps-reveal-on .wps-reveal--zoom-in.wps-reveal--in .wps-reveal__item {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ── fade-in (opacity only, no staggered children) ───────────────────────── */
html.wps-reveal-on .wps-reveal--fade-in {
	opacity: 0;
	transition: opacity .8s cubic-bezier( .16, 1, .3, 1 );
}

html.wps-reveal-on .wps-reveal--fade-in.wps-reveal--in {
	opacity: 1;
}

/* ── Defensive reduced-motion reset ──────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	html.wps-reveal-on .wps-reveal,
	html.wps-reveal-on .wps-reveal__item {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}