/**
 * Animation CSS Classes
 *
 * Paired with assets/js/modules/animations.js
 * All transitions are GPU-accelerated (transform + opacity only).
 */

/* --- Base state --- */
.reveal {
	opacity: 0;
	transition:
		opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

/* --- Visible state --- */
.reveal.is-visible {
	opacity: 1;
	transform: none !important;
}

/* --- Directions --- */
.reveal[data-reveal="fade-up"]    { transform: translateY(30px); }
.reveal[data-reveal="fade-down"]  { transform: translateY(-30px); }
.reveal[data-reveal="fade-left"]  { transform: translateX(30px); }
.reveal[data-reveal="fade-right"] { transform: translateX(-30px); }
.reveal[data-reveal="fade-in"]    { transform: none; }
.reveal[data-reveal="zoom-in"]    { transform: scale(0.92); }

/* --- Lazy load images --- */
img[data-src] {
	opacity: 0;
	transition: opacity 0.4s ease;
}
img.is-loaded {
	opacity: 1;
}

[data-bg] {
	opacity: 0;
	transition: opacity 0.4s ease;
	background-size: cover;
	background-position: center;
}
[data-bg].is-loaded {
	opacity: 1;
}

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	img[data-src],
	[data-bg] {
		opacity: 1;
		transition: none;
	}
}