/* ==========================================================================
   SONGAME - Animations & Keyframes
   ========================================================================== */

/* Logo Audio Bars Animation */
@keyframes logoWave {
  0% {
    height: 4px;
  }
  100% {
    height: 18px;
  }
}

/* Play Button Glow Ring Pulse */
@keyframes playPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Autocomplete Spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Modal Open Scale & Fade */
@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast In-Out */
@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Vinyl Record Slide Out from Sleeve */
@keyframes vinylSlideOut {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(54px) rotate(45deg);
  }
}

/* Vinyl Record Continuous Spin */
@keyframes vinylSpin {
  from {
    transform: translateX(54px) rotate(45deg);
  }
  to {
    transform: translateX(54px) rotate(405deg);
  }
}

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

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

/* Flip card reveal for guess */
@keyframes flipRow {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

.flip-reveal {
  animation: flipRow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Confetti effect particles */
.confetti-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}