/**
 * Freshwave 2026 – Fade-In Animation Styles
 *
 * Classes:
 *   .fadein-container   — wrapper; observed by IntersectionObserver.
 *                         Receives `.is-visible` when it enters the viewport.
 *   .fadein-element     — individual items that animate.
 *                         Uses --fadein-delay (set by JS) for stagger timing.
 *
 * Modifier:
 *   .fadein-container.no-motion — applied when prefers-reduced-motion is set;
 *                                  elements are shown instantly, no transition.
 */

/* --------------------------------------------------------------------------
   Base hidden state
   -------------------------------------------------------------------------- */
.fadein-element {
	opacity: 0;
	transform: translateY( 24px );
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
	/* JS sets --fadein-delay (stagger + base); falls back to --animate-base-delay
	   (from an .animate-delay-* class) when JS hasn't run, then to 0. */
	transition-delay: var( --fadein-delay, var( --animate-base-delay, 0ms ) );
}

/* --------------------------------------------------------------------------
   Revealed state — added to .fadein-container by JS
   -------------------------------------------------------------------------- */
.fadein-container.is-visible .fadein-element {
	opacity: 1;
	transform: translateY( 0 );
}

/* --------------------------------------------------------------------------
   Reduced-motion override — skip transitions entirely
   -------------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.fadein-element {
		transition: none;
		transition-delay: 0ms;
	}
}

/* JS-set class when prefers-reduced-motion is detected */
.fadein-container.no-motion .fadein-element {
	opacity: 1;
	transform: translateY( 0 );
	transition: none;
	transition-delay: 0ms;
}