@use "variables" as *;

// ---------------------------------------------------------------------------
// Scroll-in animations
//   Usage: add data-anim to an element.
//     <img data-anim="fade-in">           images -> fade-in (opacity)
//     <h2  data-anim="fade-up">            text   -> fade-up (opacity + rise)
//   Optional stagger: style="--anim-delay: .15s"
//   JS (main.js) adds .is-inview via IntersectionObserver.
//   Reduced-motion users skip it entirely (content shown as-is).
// ---------------------------------------------------------------------------
@media (prefers-reduced-motion: no-preference) {
	[data-anim] {
		opacity: 0;
		transition: opacity 0.8s ease, transform 0.8s ease;
		transition-delay: var(--anim-delay, 0s);
	}

	[data-anim="fade-up"] {
		transform: translateY(rem(30));
	}

	[data-anim].is-inview {
		opacity: 1;
		transform: none;
	}
}