/* ==========================================================================
   ESSENCE & TIME — Animaciones (soporte CSS)
   GSAP gestiona las secuencias (assets/js/animations.js). Aquí solo viven
   keyframes utilitarios y el estado inicial del hero, que se oculta
   únicamente cuando <html> tiene la clase .motion-ok (la pone un script en
   <head> si el usuario no pide movimiento reducido). Si GSAP no llega a
   cargar, el failsafe muestra el contenido igualmente.
   ========================================================================== */

@keyframes et-spin    { to { transform: rotate(360deg); } }
@keyframes et-shimmer { to { background-position: -220% 0; } }
@keyframes et-failsafe { to { opacity: 1; transform: none; visibility: visible; } }

.motion-ok [data-hero-item] {
  opacity: 0;
  animation: et-failsafe 0s linear 2.6s forwards;
}

/* Líneas de titular partidas por animations.js */
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line__inner { display: block; will-change: transform; }

/* Pulso del contador del carrito al añadir */
.count-badge.is-bumped { animation: et-bump .5s var(--ease-out); }
@keyframes et-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ok [data-hero-item] { opacity: 1; animation: none; }
  .count-badge.is-bumped { animation: none; }
}