/* ==========================================================================
   Neon Pulse Calculator - Animation Styles (v3.0)
   ========================================================================== */

/* Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

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

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 245, 255, 0.3), 0 0 30px rgba(0, 245, 255, 0.15); }
  50% { box-shadow: 0 0 25px rgba(0, 245, 255, 0.5), 0 0 50px rgba(0, 245, 255, 0.25); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes numberPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes resultGlow {
  0% { box-shadow: 0 0 0 0 rgba(0, 245, 255, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(0, 245, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 245, 255, 0); }
}

/* Animation Classes */
.animate-fade-in { animation: fadeIn var(--transition-slow) ease-out; }
.animate-fade-in-up { animation: fadeInUp var(--transition-slow) ease-out; }
.animate-scale-in { animation: scaleIn var(--transition-base) ease-out; }
.animate-bounce-in { animation: bounceIn var(--transition-slow) ease-out; }
.animate-glow { animation: glowPulse 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.4s ease-in-out; }
.animate-number-pop { animation: numberPop 0.15s ease-out; }
.animate-result-glow { animation: resultGlow 0.6s ease-out; }

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }