/* ==========================================================================
   Águilas Racing — animations.css
   Todas las animaciones del diseño original: Scroll Reveal, Fade In, Zoom,
   Parallax, Hover Effects, Microinteracciones, Smooth Scroll, Sticky Header.
   Respeta prefers-reduced-motion (ver base.css).
   ========================================================================== */

@keyframes ar-reveal-up {
	from {
		opacity: 0;
		transform: translateY(48px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes ar-reveal-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes ar-reveal-left {
	from {
		opacity: 0;
		transform: translateX(-56px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes ar-reveal-right {
	from {
		opacity: 0;
		transform: translateX(56px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes ar-reveal-scale {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes ar-sheen {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}
@keyframes ar-pulse-dot {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}
@keyframes ar-toast-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*
 * Estrategia "progressive enhancement": por defecto TODO el contenido es
 * visible (opacity:1) para que funcione perfecto sin JS, con JS deshabilitado,
 * en lectores de pantalla y para SEO. Sólo cuando main.js carga añade la
 * clase .ar-pending a estos elementos (antes de que entren en el viewport),
 * y luego .ar-in-view cuando el IntersectionObserver los detecta — ahí recién
 * se anima. Si JS falla o no corre, el contenido nunca queda oculto.
 */
.ar-reveal-up.ar-pending,
.ar-reveal-left.ar-pending,
.ar-reveal-right.ar-pending,
.ar-reveal-scale.ar-pending,
.ar-reveal-fade.ar-pending {
	opacity: 0;
}

.ar-reveal-up.ar-in-view {
	animation: ar-reveal-up 0.8s ease both;
}
.ar-reveal-left.ar-in-view {
	animation: ar-reveal-left 0.8s ease both;
}
.ar-reveal-right.ar-in-view {
	animation: ar-reveal-right 0.8s ease both;
}
.ar-reveal-scale.ar-in-view {
	animation: ar-reveal-scale 0.7s ease both;
}
.ar-reveal-fade.ar-in-view {
	animation: ar-reveal-fade 1s ease both;
}

.ar-delay-1.ar-in-view {
	animation-delay: 0.1s;
}
.ar-delay-2.ar-in-view {
	animation-delay: 0.25s;
}
.ar-delay-3.ar-in-view {
	animation-delay: 0.4s;
}

/* El Hero se anima siempre al cargar (above the fold, no depende de scroll) */
.ar-hero-kicker {
	animation: ar-reveal-fade 1s ease both;
}
.ar-hero-title {
	animation: ar-reveal-up 0.9s ease 0.1s both;
}
.ar-hero-subtitle {
	animation: ar-reveal-up 0.9s ease 0.25s both;
}
.ar-hero-ctas {
	animation: ar-reveal-up 0.9s ease 0.4s both;
}

/* Toast de confirmación (carrito / formulario) */
.ar-toast:not([hidden]) {
	animation: ar-toast-in 0.4s ease both;
}

/* Sheen: brillo diagonal sutil reutilizable sobre botones dorados destacados */
.ar-sheen {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	background-size: 200% 100%;
	animation: ar-sheen 2.6s linear infinite;
}

/* Microinteracciones ya cubiertas por transition en layout.css (:hover en tarjetas,
   botones, enlaces). Reforzamos aquí una curva de easing consistente en todo el sitio. */
a,
button,
.ar-btn,
.ar-team-card,
.ar-car-card,
.ar-product-card,
.ar-gallery-item img,
.ar-blog-media img,
.ar-sponsor-logo img {
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}