/**
 * Fade-in animations via IntersectionObserver.
 *
 * Usage: add data-animate="fade-up" to any element.
 * The JS toggles .is-visible when the element enters the viewport.
 */

[data-animate] {
	opacity: 0;
	transition:
		opacity 0.6s ease-out,
		transform 0.6s ease-out,
		translate 0.3s ease-out,
		box-shadow 0.3s ease-out;
}

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

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

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

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

[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}