/* ===== ANIMATIONS ===== */

/* Pulse for live dot */
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

/* Badge glow pulse */
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.25); }
  50%       { box-shadow: 0 0 0 5px rgba(255, 23, 68, 0); }
}

/* Skeleton shimmer */
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

@keyframes shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Toast slide in */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade + slide up for cards */
@keyframes card-appear {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.game-card:not(.skeleton) {
  animation: card-appear 0.35s ease both;
}
/* Stagger via CSS custom property set in JS */
.game-card { animation-delay: var(--stagger, 0ms); }

/* Spin-slow for live icon */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Score update flash */
@keyframes score-flash {
  0%   { background: rgba(0, 230, 118, 0.25); }
  100% { background: transparent; }
}
.score-updated {
  border-radius: var(--radius-sm);
  animation: score-flash 0.8s ease;
}

/* Tab switch */
.tab-panel {
  animation: tab-fade 0.25s ease;
}
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Config modal appear */
@keyframes modal-appear {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.config-modal {
  animation: modal-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Crest shimmer when loading */
@keyframes crest-load {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}
.team-crest.loading {
  background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-card-hover) 50%, var(--bg-secondary) 100%);
  background-size: 200% 100%;
  animation: crest-load 1.2s ease-in-out infinite;
}