/* =========================================
   Animations and Keyframes for Bulls & Cows
   ========================================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

.shake-animation {
  animation: shake 0.4s ease-in-out;
}

/* Pulse for Bull/Cow Hit */
@keyframes badgePop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.badge-pop {
  animation: badgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Number Slot Flip */
@keyframes digitFlip {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.digit-flip {
  animation: digitFlip 0.22s ease-out;
}

/* Glowing Winner Effect */
@keyframes winnerGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5), inset 0 0 15px rgba(245, 158, 11, 0.2);
  }
  50% {
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.85), inset 0 0 30px rgba(245, 158, 11, 0.4);
  }
}

.winner-card-glow {
  animation: winnerGlow 2s infinite ease-in-out;
}

/* Floating Emoji Reactions */
@keyframes floatUpFade {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1.2);
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-120px) scale(1);
    opacity: 0;
  }
}

/* Pulsing Turn Avatar (GPU Composited, Zero-Flicker) */
@keyframes turnPulse {
  0%, 100% {
    transform: scale(1);
    border-color: var(--color-accent);
  }
  50% {
    transform: scale(1.06);
    border-color: #a7f3d0;
  }
}

.turn-pulse {
  animation: turnPulse 2s infinite ease-in-out;
  transform: translateZ(0);
  will-change: transform;
}