/* ==========================================================================
   TIME DETECTIVE - ANIMATIONS & KEYFRAMES
   ========================================================================== */

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

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

@keyframes pulseRed {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.6)); }
}

@keyframes scanLaser {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 96%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); opacity: 0.9; }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes glowPulseCyan {
  0%, 100% { box-shadow: 0 0 15px rgba(52, 211, 153, 0.35); }
  50% { box-shadow: 0 0 30px rgba(52, 211, 153, 0.75); }
}

@keyframes glowPulseGold {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.35); }
  50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.75); }
}

@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@keyframes successPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

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

.anim-success {
  animation: successPop 0.4s ease-out;
}

.anim-pulse-cyan {
  animation: glowPulseCyan 2s infinite;
}

.anim-pulse-gold {
  animation: glowPulseGold 2s infinite;
}

/* Confetti container */
.confetti-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 14px;
  background-color: var(--accent-cyan);
  top: -20px;
  opacity: 0.9;
  animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
  0% {
    top: -20px;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    top: 105vh;
    transform: translateX(120px) rotate(720deg);
  }
}