/* ==========================================================================
   animations.css — Keyframes, scroll-reveal y microinteracciones
   Todo respeta prefers-reduced-motion (ver bloque al final).
   ========================================================================== */

/* ---- Keyframes ---- */
@keyframes esp-shimmer { to { background-position: -200% 0; } }
/* "Pop" decidido del contador, sin dip elástico (impeccable: nada de bounce). */
@keyframes esp-bump { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes esp-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes esp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes esp-float-bottle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes esp-pulse-glow { 0%,100% { opacity: .4; } 50% { opacity: .6; } }
@keyframes esp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Calor / chile (hover de cards) ---- */
@keyframes esp-flicker {            /* chile que "prende" */
	0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
	40% { transform: scale(1.28) rotate(-6deg); filter: drop-shadow(0 0 6px rgba(226,42,35,.9)); }
	70% { transform: scale(1.12) rotate(3deg); filter: drop-shadow(0 0 4px rgba(255,120,40,.7)); }
}
@keyframes esp-wiggle {             /* botella "picosa" tiembla */
	0%,100% { transform: rotate(0); }
	20% { transform: rotate(-2.2deg); } 40% { transform: rotate(1.8deg); }
	60% { transform: rotate(-1.4deg); } 80% { transform: rotate(1deg); }
}
@keyframes esp-shine {              /* barrido de luz en botones */
	from { transform: translateX(-120%) skewX(-18deg); }
	to { transform: translateX(220%) skewX(-18deg); }
}
@keyframes esp-glow-pulse { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 14px rgba(255,198,46,.55); } }
@keyframes esp-ember-rise {
	0% { transform: translateY(0) scale(1); opacity: 0; }
	20% { opacity: 1; } 100% { transform: translateY(-60px) scale(0.4); opacity: 0; }
}

/* ==========================================================================
   DESIGN SYSTEM — keyframes nombrados (API pública)
   ========================================================================== */
@keyframes fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes glow-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(226, 42, 35, 0); }
	50%      { box-shadow: 0 0 26px 2px rgba(226, 42, 35, 0.45); }
}
@keyframes cart-bounce {
	0% { transform: scale(1); }
	35% { transform: scale(1.32); }
	100% { transform: scale(1); }
}
@keyframes chili-pop {
	0%, 100% { transform: scale(1) rotate(0); }
	40% { transform: scale(1.28) rotate(-6deg); }
	70% { transform: scale(1.1) rotate(3deg); }
}
@keyframes subtle-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

/* ---- Scroll reveal fluido (JS añade .is-visible) ----
   Usa animación (no transición) para poder escalonar en cascada sin chocar
   con las transiciones de hover de las propias cajas. */
[data-esp-reveal] { opacity: 0; will-change: opacity, transform; }
[data-esp-reveal].is-visible { animation: esp-fade-up 0.62s var(--esp-ease-emph) both; }
.no-js [data-esp-reveal] { opacity: 1; animation: none; }

/* Stagger de grids: las cards entran una tras otra (flujo). */
.esp-flavors > .is-visible:nth-child(2), ul.products > .is-visible:nth-child(2) { animation-delay: 0.06s; }
.esp-flavors > .is-visible:nth-child(3), ul.products > .is-visible:nth-child(3) { animation-delay: 0.12s; }
.esp-flavors > .is-visible:nth-child(4), ul.products > .is-visible:nth-child(4) { animation-delay: 0.18s; }
.esp-flavors > .is-visible:nth-child(5), ul.products > .is-visible:nth-child(5) { animation-delay: 0.24s; }
.esp-flavors > .is-visible:nth-child(6), ul.products > .is-visible:nth-child(6) { animation-delay: 0.30s; }
.esp-flavors > .is-visible:nth-child(7), ul.products > .is-visible:nth-child(7) { animation-delay: 0.36s; }
.esp-flavors > .is-visible:nth-child(8), ul.products > .is-visible:nth-child(8) { animation-delay: 0.42s; }

/* ---- Microinteracciones ---- */
.esp-cart-link.is-bump { animation: esp-bump 0.4s var(--esp-ease); }
.esp-hero__glow { animation: esp-pulse-glow 6s ease-in-out infinite; }
.esp-hero__mascot { animation: esp-float 7s ease-in-out infinite; }

/* Add to cart estados (los aplica cart-microinteractions.js) */
.add_to_cart_button.esp-loading, .single_add_to_cart_button.esp-loading { opacity: .7; pointer-events: none; }
.add_to_cart_button.esp-added, .single_add_to_cart_button.esp-added { box-shadow: 0 0 0 3px rgba(255, 198, 46, 0.3), 0 10px 28px rgba(45, 186, 79, 0.4); }
/* Chili pop al añadir */
.esp-chili-pop { position: absolute; top: -6px; left: 50%; margin-left: -11px; color: var(--color-gold); line-height: 0; pointer-events: none; z-index: 5; animation: esp-chili-float 0.6s ease-out forwards; }
@keyframes esp-chili-float {
	0% { opacity: 0; transform: translateY(0) scale(0.6); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-26px) scale(1.1); }
}

/* ---- prefers-reduced-motion: apaga todo el movimiento ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-esp-reveal] { opacity: 1 !important; transform: none !important; }
	.esp-hero__mascot, .esp-hero__glow { animation: none !important; }
}