/*
 * Reusable one-time scroll reveal system.
 *
 * Basic:      data-scroll-reveal
 * Direction:  data-reveal-direction="left|right|up|down|none"
 * Delay:      data-reveal-delay="180"
 * Duration:   data-reveal-duration="900"
 * Load:       data-reveal-on-load
 * Stagger:    data-reveal-stagger="110"
 *
 * The legacy .reveal class remains supported throughout the theme.
 */

[data-scroll-reveal],
.reveal {
	--ff-reveal-x: 0px;
	--ff-reveal-y: 34px;
	--ff-reveal-delay: 0ms;
	--ff-reveal-duration: 800ms;
	opacity: 0;
	transform: translate3d(var(--ff-reveal-x), var(--ff-reveal-y), 0);
	transition:
		opacity var(--ff-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--ff-reveal-delay),
		transform var(--ff-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--ff-reveal-delay);
	will-change: opacity, transform;
}

[data-reveal-direction="left"] { --ff-reveal-x: -38px; --ff-reveal-y: 0px; }
[data-reveal-direction="right"] { --ff-reveal-x: 38px; --ff-reveal-y: 0px; }
[data-reveal-direction="down"] { --ff-reveal-x: 0px; --ff-reveal-y: -34px; }
[data-reveal-direction="none"] { --ff-reveal-x: 0px; --ff-reveal-y: 0px; }

[data-scroll-reveal].is-visible,
.reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/* A stagger container stays in place while its meaningful children reveal. */
[data-scroll-reveal][data-reveal-stagger],
.reveal[data-reveal-stagger] {
	opacity: 1;
	transform: none;
	transition: none;
	will-change: auto;
}

[data-reveal-item] {
	--ff-reveal-item-x: 0px;
	--ff-reveal-item-y: 34px;
	opacity: 0;
	transform: translate3d(var(--ff-reveal-item-x), var(--ff-reveal-item-y), 0);
	transition:
		opacity var(--ff-reveal-duration, 800ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ff-reveal-item-delay, 0ms),
		transform var(--ff-reveal-duration, 800ms) cubic-bezier(0.16, 1, 0.3, 1) var(--ff-reveal-item-delay, 0ms);
	will-change: opacity, transform;
}

[data-reveal-direction="left"] > [data-reveal-item] { --ff-reveal-item-x: -38px; --ff-reveal-item-y: 0px; }
[data-reveal-direction="right"] > [data-reveal-item] { --ff-reveal-item-x: 38px; --ff-reveal-item-y: 0px; }
[data-reveal-direction="down"] > [data-reveal-item] { --ff-reveal-item-x: 0px; --ff-reveal-item-y: -34px; }
[data-reveal-direction="none"] > [data-reveal-item] { --ff-reveal-item-x: 0px; --ff-reveal-item-y: 0px; }

.is-visible > [data-reveal-item] {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	[data-scroll-reveal],
	.reveal,
	[data-reveal-item] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}