/**
 * Freshwave 2026 – Slide-In (Curtain) Animation Styles
 *
 * Classes:
 *   .slidein-container   — wrapper; observed by IntersectionObserver.
 *                          Receives `.is-visible` when it enters the viewport.
 *   .slideup-element     — individual item that reveals bottom-first (curtain rises).
 *                          clip-path animates: inset(100% 0 0 0) → inset(0% 0 0 0)
 *   .slidedown-element   — individual item that reveals top-first (curtain drops).
 *                          clip-path animates: inset(0 0 100% 0) → inset(0 0 0% 0)
 *
 *   Uses --slidein-delay (set by JS) for stagger timing.
 *   Stagger step = 50% of the animation duration (400ms for 0.8s).
 *
 * Modifier:
 *   .slidein-container.no-motion — applied when prefers-reduced-motion is set;
 *                                   elements are shown instantly, no transition.
 */

/* --------------------------------------------------------------------------
   Animation duration token — change here to adjust everything at once
   -------------------------------------------------------------------------- */
:root {
	--slidein-duration: 1.2s;
	--slidein-easing: cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* --------------------------------------------------------------------------
   Base hidden states
   -------------------------------------------------------------------------- */
.slideup-element {
	clip-path: inset( 100% 0 0 0 );
	transition: clip-path var( --slidein-duration ) var( --slidein-easing );
	/* JS sets --slidein-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( --slidein-delay, var( --animate-base-delay, 0ms ) );
}

.slidedown-element {
	clip-path: inset( 0 0 100% 0 );
	transition: clip-path var( --slidein-duration ) var( --slidein-easing );
	transition-delay: var( --slidein-delay, var( --animate-base-delay, 0ms ) );
}

/*
 * slideleft-element — content slides leftward (reveals right-to-left).
 *   Curtain starts clipping from the left (left inset = 100% → right side
 *   visible first), then pulls back to reveal the full element.
 */
.slideleft-element {
	clip-path: inset( 0 0 0 100% );
	transition: clip-path var( --slidein-duration ) var( --slidein-easing );
	transition-delay: var( --slidein-delay, var( --animate-base-delay, 0ms ) );
}

/*
 * slideright-element — content slides rightward (reveals left-to-right).
 *   Curtain starts clipping from the right (right inset = 100% → left side
 *   visible first), then pulls back to reveal the full element.
 */
.slideright-element {
	clip-path: inset( 0 100% 0 0 );
	transition: clip-path var( --slidein-duration ) var( --slidein-easing );
	transition-delay: var( --slidein-delay, var( --animate-base-delay, 0ms ) );
}

/* --------------------------------------------------------------------------
   Revealed state — added to .slidein-container by JS
   -------------------------------------------------------------------------- */
.slidein-container.is-visible .slideup-element,
.slidein-container.is-visible .slidedown-element,
.slidein-container.is-visible .slideleft-element,
.slidein-container.is-visible .slideright-element {
	clip-path: inset( 0% 0 0% 0 );
}

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

/* JS-set class when prefers-reduced-motion is detected */
.slidein-container.no-motion .slideup-element,
.slidein-container.no-motion .slidedown-element,
.slidein-container.no-motion .slideleft-element,
.slidein-container.no-motion .slideright-element {
	clip-path: inset( 0% 0 0% 0 );
	transition: none;
	transition-delay: 0ms;
}