/**
 * Scroll-triggered reveal + parallax (used with scroll-animations.js)
 * Performance: opacity/transform only, translate3d, one-time visibility
 */

/* ---------------------------------------------------------------------------
   CSS variables (tweak timing globally)
   --------------------------------------------------------------------------- */
:root {
	--scroll-reveal-duration: 0.72s;
	--scroll-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out feel */
	--scroll-reveal-distance: 30px;
	--scroll-stagger-step: 0.14s; /* delay between staggered items */
}

/* ---------------------------------------------------------------------------
   Single elements: add class .scroll-reveal — JS adds .is-visible once
   --------------------------------------------------------------------------- */
.scroll-reveal {
	opacity: 0;
	transform: translate3d(0, var(--scroll-reveal-distance), 0);
	transition: none;
	/* Hint GPU layer without forcing long-lived will-change */
}

.scroll-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--scroll-reveal-duration) var(--scroll-reveal-ease),
		transform var(--scroll-reveal-duration) var(--scroll-reveal-ease);
}

/* ---------------------------------------------------------------------------
   Section groups: .scroll-reveal-section gets .is-visible once;
   children .scroll-reveal-stagger animate with staggered delay
   --------------------------------------------------------------------------- */
.scroll-reveal-section:not(.is-visible) .scroll-reveal-stagger {
	opacity: 0;
	transform: translate3d(0, var(--scroll-reveal-distance), 0);
}

.scroll-reveal-section.is-visible .scroll-reveal-stagger {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--scroll-reveal-duration) var(--scroll-reveal-ease),
		transform var(--scroll-reveal-duration) var(--scroll-reveal-ease);
}

/* Stagger: item 1 = 0s, item 2 = 0.14s, … up to 12 */
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(1) {
	transition-delay: calc(var(--scroll-stagger-step) * 0);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(2) {
	transition-delay: calc(var(--scroll-stagger-step) * 1);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(3) {
	transition-delay: calc(var(--scroll-stagger-step) * 2);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(4) {
	transition-delay: calc(var(--scroll-stagger-step) * 3);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(5) {
	transition-delay: calc(var(--scroll-stagger-step) * 4);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(6) {
	transition-delay: calc(var(--scroll-stagger-step) * 5);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(7) {
	transition-delay: calc(var(--scroll-stagger-step) * 6);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(8) {
	transition-delay: calc(var(--scroll-stagger-step) * 7);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(9) {
	transition-delay: calc(var(--scroll-stagger-step) * 8);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(10) {
	transition-delay: calc(var(--scroll-stagger-step) * 9);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(11) {
	transition-delay: calc(var(--scroll-stagger-step) * 10);
}
.scroll-reveal-section.is-visible .scroll-reveal-stagger:nth-child(12) {
	transition-delay: calc(var(--scroll-stagger-step) * 11);
}

/* ---------------------------------------------------------------------------
   Parallax wrapper (optional background / hero imagery)
   JS sets --parallax-y on [data-parallax]
   --------------------------------------------------------------------------- */
.scroll-parallax-wrap {
	overflow: hidden;
}

[data-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--parallax-y, 0), 0);
}

/* Slightly shorter motion on small screens (handled in JS too) */
@media (max-width: 767.98px) {
	:root {
		--scroll-reveal-duration: 0.62s;
		--scroll-stagger-step: 0.12s;
	}
}

/* Respect user preference: show final state, no motion */
@media (prefers-reduced-motion: reduce) {
	.scroll-reveal,
	.scroll-reveal-section:not(.is-visible) .scroll-reveal-stagger {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	[data-parallax] {
		transform: none !important;
		--parallax-y: 0px !important;
	}
}