/* =============================================================
   animations.css — Todos los @keyframes de la aplicación.
   Centralizar aquí facilita ajustar tiempos sin tocar
   los componentes que los usan.
   ============================================================= */

/* Marquee del announcement bar */
@keyframes annScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Flotación del orbe en el hero */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* Entrada de ítems del carrito */
@keyframes ciIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Toast — entrada */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Toast — salida */
@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px); }
}

/* ── DESTELLOS MÍSICOS ──────────────────────────────────────── */

.sparkles-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.sp {
  position: absolute;
  color: #e8e8f0;
  font-size: var(--sz, 10px);
  line-height: 1;
  opacity: 0;
  animation: spTwinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
  text-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 14px rgba(220,220,240,0.5);
  user-select: none;
  font-variant-emoji: text;
  font-family: monospace;
}

.sp.gold {
  color: #F5C430;
  text-shadow: 0 0 6px rgba(245,196,48,0.9), 0 0 14px rgba(245,196,48,0.5);
}

@keyframes spTwinkle {
  0%   { opacity: 0;    transform: scale(0.4) rotate(0deg); }
  20%  { opacity: var(--peak, 0.7); transform: scale(1) rotate(20deg); }
  50%  { opacity: calc(var(--peak, 0.7) * 0.5); transform: scale(0.8) rotate(40deg); }
  80%  { opacity: var(--peak, 0.7); transform: scale(1.1) rotate(60deg); }
  100% { opacity: 0;    transform: scale(0.4) rotate(80deg); }
}