/* ════════════════════════════════════════════════════════════
   ANIMATIONS — solo 3 duraciones (120/180/250ms) + shimmer/pulse.
   Nada de animaciones largas o llamativas: sutil, no distrae.
   ════════════════════════════════════════════════════════════ */

@keyframes shimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:-100% 0; }
}
.skeleton-card{ animation:shimmer 1.4s ease-in-out infinite; }

@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.8); }
}

@keyframes spin{ to{ transform:rotate(360deg); } }
.spinner{ animation:spin .7s linear infinite; }

@keyframes fade-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
.match-card, .news-card, .comp-card{
  animation:fade-in var(--t-slow) ease both;
}
/* Evitar que 40 cards animen todas a la vez de forma robótica */
.scroll > *:nth-child(1){ animation-delay:0ms; }
.scroll > *:nth-child(2){ animation-delay:20ms; }
.scroll > *:nth-child(3){ animation-delay:40ms; }
.scroll > *:nth-child(4){ animation-delay:60ms; }
.scroll > *:nth-child(5){ animation-delay:80ms; }
.scroll > *:nth-child(n+6){ animation-delay:100ms; }

/* ── Toast entra/sale ── */
@keyframes toast-in{ from{ opacity:0;transform:translate(-50%,8px); } to{ opacity:1;transform:translate(-50%,0); } }
.toast{ animation:toast-in var(--t-base) ease; }

/* ── Transiciones puntuales (no keyframes, solo transition en el elemento) ── */
.chip, .tab, .bn-item, .card, .btn{ transition-timing-function:ease; }

/* ── Respeto a prefers-reduced-motion ── */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}