/* ============================================================
   Casa Lopez — animations.css
   Keyframes y animaciones de utilidad. Siempre cargado (ver inc/enqueue.php).

   ESTRUCTURA:
     - Topbar rotativo:  cl-slide-in, cl-slide-out
     - Fade:             cl-fade-in
     - Shimmer (skeleton loading): cl-shimmer
     - Barra de progreso: cl-progress
     - Mega-menu:        cl-menu-in
     - Hero:             cl-hero-enter
     - Pulsado (CTA):    cl-pulse
     - Ticker horizontal: cl-ticker
     - Accesibilidad:    prefers-reduced-motion (desactiva todas)

   CÓMO MODIFICAR:
     - Velocidad de la animación: editar el valor en animation-duration donde se usa
       la clase (en main.css o pages.css), NO aquí — aquí solo se definen los keyframes.
     - Agregar una nueva animación: añadir el @keyframes aquí y usarlo en el CSS correspondiente.
     - El bloque @media (prefers-reduced-motion) al final desactiva TODAS las animaciones
       para usuarios que lo solicitan — no tocar esa sección.

   VARIABLES CSS USADAS: ninguna (las animations solo definen movimiento, no colores).
   ============================================================ */


/* Topbar rotativo */
@keyframes cl-slide-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

@keyframes cl-slide-out {
	from { transform: translateY(0);     opacity: 1; }
	to   { transform: translateY(-100%); opacity: 0; }
}

/* Fade genérico */
@keyframes cl-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* Shimmer skeleton */
@keyframes cl-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position:  400px 0; }
}

.cl-skeleton {
	background: linear-gradient(90deg, var(--bg-parch) 25%, var(--bg-mid) 50%, var(--bg-parch) 75%);
	background-size: 800px 100%;
	animation: cl-shimmer 1.4s infinite linear;
}

/* Progress bar fill */
@keyframes cl-progress {
	from { width: 0; }
}

.cl-ship-bar__fill {
	animation: cl-progress 0.6s ease-out both;
}

/* Mega-menu / dropdown fade-slide */
@keyframes cl-menu-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* Hero entry — elementos que arrancan desde abajo con cola editorial */
@keyframes cl-hero-enter {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Pulse sutil para badge */
@keyframes cl-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.15); }
}

.cl-cart-count--pulse {
	animation: cl-pulse 0.3s ease;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}