/* ============================================================
   BOLÃO COPA 2026 - KBET | ANIMATIONS & MICRO-INTERAÇÕES
   ============================================================ */

/* ============================================================
   KEYFRAMES PRINCIPAIS
   ============================================================ */

/* Fade In de tela */
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide In da baixo */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slide In da esquerda */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade In simples */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale In (para cards e modais) */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Pulse de brilho amarelo - Acerto na Mosca */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255,204,0,0.4),
                0 0 24px rgba(255,204,0,0.2),
                0 0 48px rgba(255,204,0,0.1),
                inset 0 0 12px rgba(255,204,0,0.05);
  }
  50% {
    box-shadow: 0 0 20px rgba(255,204,0,0.7),
                0 0 40px rgba(255,204,0,0.4),
                0 0 80px rgba(255,204,0,0.2),
                inset 0 0 20px rgba(255,204,0,0.1);
  }
}

/* Pulse verde - Acerto de Vencedor */
@keyframes glowPulseGreen {
  0%, 100% {
    box-shadow: 0 0 12px rgba(0,100,55,0.4),
                0 0 24px rgba(0,100,55,0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(0,160,88,0.6),
                0 0 40px rgba(0,100,55,0.3);
  }
}

/* Rotação suave - loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Bounce suave para medalhas */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  50%  { opacity: 1; transform: scale(1.08) translateY(-5px); }
  70%  { transform: scale(0.96) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

/* Shake para erro */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Pulse para badge de live */
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.15); }
}

/* Contagem regressiva tick */
@keyframes timerTick {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Flicker para estrelas de fundo */
@keyframes starFlicker {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.8; }
}

/* Line draw para bracket */
@keyframes drawLine {
  from { stroke-dashoffset: 100%; }
  to   { stroke-dashoffset: 0%; }
}

/* Shimmer para loading de cards */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Confetti pop (usado quando salva palpite mestre) */
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(200px) rotate(720deg) scale(0.5); }
}

/* Toast slide in */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%) translateY(-50%); }
  to   { opacity: 1; transform: translateX(0) translateY(-50%); }
}

/* Toast slide out */
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0) translateY(-50%); }
  to   { opacity: 0; transform: translateX(100%) translateY(-50%); }
}

/* ============================================================
   CLASSES DE ANIMAÇÃO UTILITÁRIAS
   ============================================================ */

.animate-fade-in    { animation: fadeIn var(--transition-normal) both; }
.animate-slide-up   { animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-scale-in   { animation: scaleIn var(--transition-spring) both; }
.animate-bounce-in  { animation: bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* Delays escalonados para listas */
.animate-delay-1  { animation-delay: 50ms; }
.animate-delay-2  { animation-delay: 100ms; }
.animate-delay-3  { animation-delay: 150ms; }
.animate-delay-4  { animation-delay: 200ms; }
.animate-delay-5  { animation-delay: 250ms; }
.animate-delay-6  { animation-delay: 300ms; }

/* Glow aplicado em cards de acerto exato */
.glow-exact {
  animation: glowPulse 2.5s ease-in-out infinite;
  border-color: var(--color-primary) !important;
}

/* Glow verde para vencedor */
.glow-winner {
  animation: glowPulseGreen 2.5s ease-in-out infinite;
  border-color: var(--color-secondary-light) !important;
}

/* Loading shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,204,0,0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* Live indicator */
.live-dot {
  width: 8px;
  height: 8px;
  background: var(--color-error);
  border-radius: 50%;
  animation: livePulse 1.2s ease-in-out infinite;
  display: inline-block;
}

/* Shake em inputs inválidos */
.input-error {
  animation: shake 0.4s ease;
}

/* ============================================================
   TRANSIÇÕES HOVER DE CARDS
   ============================================================ */

/* Scale Up ao hover */
.hover-scale {
  transition: transform var(--transition-spring),
              box-shadow var(--transition-normal);
}

.hover-scale:hover,
.hover-scale:focus-visible {
  transform: scale(1.03) translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Scale Up para escudos/flags */
.hover-flag {
  transition: transform var(--transition-spring),
              filter var(--transition-normal);
}

.hover-flag:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(255,204,0,0.4));
}

/* Glow em botões primários */
.hover-glow:hover {
  box-shadow: var(--shadow-primary);
}