/* ==========================================================================
   sal-animations.css — Waiis SAL Animations
   Compatible con: sal.js v1.x (mciastek/sal — Intersection Observer)

   Sal.js aplica la clase "sal-animate" cuando el elemento entra en el
   viewport, y establece transition-duration / transition-delay como
   estilos inline a partir de data-sal-duration y data-sal-delay.

   INCLUYE: media query prefers-reduced-motion (A11Y obligatoria).
   ========================================================================== */

/* ── Base: transición compartida por todos los tipos de animación ─────────── */
[data-sal] {
	transition-property: opacity, transform;
	transition-timing-function: ease-out;
	transition-duration: 400ms; /* fallback; sal.js sobrescribe con data-sal-duration */
	/* transition-delay lo sobrescribe sal.js con data-sal-delay */
}

/* ── Estados INICIALES (ocultos antes de entrar en viewport) ─────────────── */
[data-sal='fade'] {
	opacity: 0;
}

[data-sal='slide-up'] {
	opacity: 0;
	transform: translateY( 2.5rem );
}

[data-sal='slide-down'] {
	opacity: 0;
	transform: translateY( -2.5rem );
}

[data-sal='slide-left'] {
	opacity: 0;
	transform: translateX( 2.5rem );
}

[data-sal='slide-right'] {
	opacity: 0;
	transform: translateX( -2.5rem );
}

[data-sal='zoom-in'] {
	opacity: 0;
	transform: scale( 0.9 );
}

[data-sal='flip-up'] {
	opacity: 0;
	transform: perspective( 600px ) rotateX( 12deg );
}

/* ── Estado ANIMADO (sal.js añade .sal-animate cuando el elemento es visible) */
[data-sal].sal-animate {
	opacity: 1;
	transform: none;
}

/* ── Accesibilidad: usuarios que prefieren movimiento reducido ────────────── */
/*
 * Si el sistema operativo tiene activada la opción "Reducir movimiento",
 * forzamos todos los estados de animación a su valor final visible de forma
 * inmediata, sin transición. Esto cumple WCAG 2.1 — Criterio 2.3.3 (AAA)
 * y el estándar de usuario prefers-reduced-motion.
 */
@media ( prefers-reduced-motion: reduce ) {

	[data-sal],
	[data-sal].sal-animate {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}