/*
 * C21 UAE — Scroll-triggered entrance animations
 *
 * Each animation type sets the element's "before" state (hidden / offset).
 * When IntersectionObserver fires, scroll-animations.js adds .c21-anim-active,
 * which transitions the element to its natural / visible state.
 */

/* ── Shared transition for all animated elements ──────────────────────────── */
[data-c21-animation="fade"],
[data-c21-animation="slide-left"],
[data-c21-animation="slide-right"],
[data-c21-animation="slide-up"],
[data-c21-animation="zoom-in"] {
	transition-property:        opacity, transform;
	transition-timing-function: cubic-bezier( 0.4, 0, 0.2, 1 );
	transition-duration:        0.7s;
	will-change:                opacity, transform;
}

/* ── Initial (hidden) states ──────────────────────────────────────────────── */
[data-c21-animation="fade"]        { opacity: 0; }
[data-c21-animation="slide-left"]  { opacity: 0; transform: translateX( -64px ); }
[data-c21-animation="slide-right"] { opacity: 0; transform: translateX(  64px ); }
[data-c21-animation="slide-up"]    { opacity: 0; transform: translateY(  40px ); }
[data-c21-animation="zoom-in"]     { opacity: 0; transform: scale( 0.92 );       }

/* ── Activated state — element is in view, play the animation ─────────────── */
[data-c21-animation].c21-anim-active {
	opacity:   1;
	transform: none;
}

/* ── Respect user preference for reduced motion ───────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	[data-c21-animation] {
		transition: none !important;
		opacity:    1    !important;
		transform:  none !important;
	}
}