/* ── ANIMATIONS CSS ── */

/* Fade in */
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}

/* Page transitions */
.animate-fade-in     { animation:fadeIn .3s ease forwards; }
.animate-fade-up     { animation:fadeInUp .4s ease forwards; }
.animate-fade-down   { animation:fadeInDown .3s ease forwards; }
.animate-slide-left  { animation:slideInLeft .3s ease forwards; }
.animate-scale-in    { animation:scaleIn .3s ease forwards; }

/* Stagger children */
.stagger > * { opacity:0; animation:fadeInUp .4s ease forwards; }
.stagger > *:nth-child(1) { animation-delay:.05s; }
.stagger > *:nth-child(2) { animation-delay:.10s; }
.stagger > *:nth-child(3) { animation-delay:.15s; }
.stagger > *:nth-child(4) { animation-delay:.20s; }
.stagger > *:nth-child(5) { animation-delay:.25s; }
.stagger > *:nth-child(6) { animation-delay:.30s; }
.stagger > *:nth-child(7) { animation-delay:.35s; }
.stagger > *:nth-child(8) { animation-delay:.40s; }
.stagger > *:nth-child(9) { animation-delay:.45s; }
.stagger > *:nth-child(10) { animation-delay:.50s; }
.stagger > *:nth-child(11) { animation-delay:.55s; }
.stagger > *:nth-child(12) { animation-delay:.60s; }

/* Pulse */
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.animate-pulse { animation:pulse 2s ease-in-out infinite; }

/* Bounce */
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.animate-bounce { animation:bounce 2s ease-in-out infinite; }

/* Float */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.animate-float { animation:float 4s ease-in-out infinite; }

/* Spin */
@keyframes spin { to { transform:rotate(360deg); } }
.animate-spin { animation:spin .8s linear infinite; }

/* Wave (for audio bars) */
@keyframes wave { 0%,100%{height:4px} 50%{height:20px} }
.wave-bar {
  width:3px; border-radius:2px; display:inline-block;
  animation:wave .6s ease-in-out infinite;
}
.wave-bar:nth-child(1){animation-delay:0s}
.wave-bar:nth-child(2){animation-delay:.08s}
.wave-bar:nth-child(3){animation-delay:.16s}
.wave-bar:nth-child(4){animation-delay:.24s}
.wave-bar:nth-child(5){animation-delay:.16s}
.wave-bar:nth-child(6){animation-delay:.08s}
.wave-bar:nth-child(7){animation-delay:0s}

/* Mic pulse */
@keyframes micPulse {
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}
.mic-pulsing { animation:micPulse 1.2s infinite; }

/* Typing indicator */
@keyframes typingDot {
  0%,100%{transform:translateY(0);background:var(--gray-400)}
  50%{transform:translateY(-5px);background:var(--blue-600)}
}
.typing-dot { animation:typingDot 1s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.30s; }

/* Hero float */
@keyframes heroFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-15px)} }

/* Gradient shift */
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.animated-gradient {
  background-size:200% 200%;
  animation:gradientShift 4s ease infinite;
}

/* Number counter */
.counter { transition:all .5s var(--ease); }

/* Streak fire */
@keyframes fireFlicker {
  0%,100%{transform:scale(1) rotate(-2deg)}
  25%{transform:scale(1.1) rotate(2deg)}
  75%{transform:scale(.95) rotate(-1deg)}
}
.fire-icon { display:inline-block; animation:fireFlicker 1.5s ease-in-out infinite; }

/* Transition helpers */
.transition-all   { transition:all var(--t-base) var(--ease); }
.transition-fast  { transition:all var(--t-fast) var(--ease); }
.transition-slow  { transition:all var(--t-slow) var(--ease); }
.transition-color { transition:color var(--t-fast), background-color var(--t-fast); }