/* Keyframes & Animations */

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
  }
}

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

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

@keyframes soundWave {
  0%, 100% {
    height: 6px;
  }
  50% {
    height: 24px;
  }
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 3s infinite ease-in-out;
}

.animate-float {
  animation: floatElement 4s infinite ease-in-out;
}

.sound-wave-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
}

.sound-wave-bars span {
  width: 3px;
  height: 12px;
  background: var(--accent-primary);
  border-radius: 2px;
  animation: soundWave 1.2s infinite ease-in-out;
}

.sound-wave-bars span:nth-child(1) { animation-delay: 0.1s; }
.sound-wave-bars span:nth-child(2) { animation-delay: 0.3s; }
.sound-wave-bars span:nth-child(3) { animation-delay: 0.2s; }
.sound-wave-bars span:nth-child(4) { animation-delay: 0.4s; }

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

.shake-error {
  animation: shake 0.4s ease-in-out;
  border-color: var(--accent-danger) !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4) !important;
}

.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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