/* ============================================================
   WesterAudio — Animations & Keyframes
   ============================================================ */

/* ─── Waveform bar animations (b1–b10) ───────────────────── */
@keyframes b1  { 0%,100% { transform: scaleY(1)    } 50% { transform: scaleY(0.12) } }
@keyframes b2  { 0%,100% { transform: scaleY(0.55) } 50% { transform: scaleY(1)    } }
@keyframes b3  { 0%,100% { transform: scaleY(0.28) } 50% { transform: scaleY(0.88) } }
@keyframes b4  { 0%,100% { transform: scaleY(0.82) } 50% { transform: scaleY(0.18) } }
@keyframes b5  { 0%,100% { transform: scaleY(0.42) } 50% { transform: scaleY(1)    } }
@keyframes b6  { 0%,100% { transform: scaleY(0.92) } 50% { transform: scaleY(0.32) } }
@keyframes b7  { 0%,100% { transform: scaleY(0.22) } 50% { transform: scaleY(0.78) } }
@keyframes b8  { 0%,100% { transform: scaleY(0.68) } 50% { transform: scaleY(0.22) } }
@keyframes b9  { 0%,100% { transform: scaleY(0.48) } 50% { transform: scaleY(1)    } }
@keyframes b10 { 0%,100% { transform: scaleY(1)    } 50% { transform: scaleY(0.38) } }

/* ─── Record pulse ring ───────────────────────────────────── */
@keyframes rec-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0;   }
}

/* ─── Waiting dot / live track dot ───────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.3; }
}

/* ─── Mic glow ring ──────────────────────────────────────── */
@keyframes mic-glow {
  0%, 100% { opacity: 0.25; transform: scale(1);    }
  50%       { opacity: 0.55; transform: scale(1.35); }
}

/* ─── Scroll-reveal (homepage only) ─────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal.is-visible {
  animation: fade-up var(--duration-reveal) var(--ease-out) forwards;
}

/* ─── Mobile drawer slide-in ─────────────────────────────── */
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}
@keyframes drawer-out {
  from { transform: translateX(0);    }
  to   { transform: translateX(100%); }
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}