/**
 * Scroll-reveal animations — lightweight IntersectionObserver-based system.
 * Elements get [data-reveal] attribute via JS, animate in when they enter viewport.
 */

/* ---- Base reveal state (before visible) ---- */
[data-reveal] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
	will-change: opacity, transform;
}

[data-reveal="fade"] {
	transform: none;
}

[data-reveal="fade-up"] {
	transform: translateY(40px);
}

[data-reveal="fade-down"] {
	transform: translateY(-30px);
}

[data-reveal="fade-left"] {
	transform: translateX(40px);
}

[data-reveal="fade-right"] {
	transform: translateX(-40px);
}

[data-reveal="scale"] {
	transform: scale(0.92);
}

/* ---- Revealed state ---- */
[data-reveal].is-revealed {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

/* ---- Stagger delays for grid children ---- */
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }
[data-reveal-delay="6"] { transition-delay: 480ms; }
[data-reveal-delay="7"] { transition-delay: 560ms; }
[data-reveal-delay="8"] { transition-delay: 640ms; }

/* ---- Reduced motion: show everything immediately ---- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}