/* ============================================================
   ANIMATIONS.CSS — Code × Music | All Keyframe Animations
   ============================================================ */

/* --- Core Transitions --- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Boot / Soundcheck --- */
@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes boot-line-appear {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes boot-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Glitch Effect --- */
@keyframes glitch-1 {
  0%, 100% { clip-path: inset(40% 0 61% 0); transform: translate(0); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(-5px, 2px); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(5px, -1px); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(-3px, 3px); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(4px, -2px); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(65% 0 13% 0); transform: translate(0); }
  20% { clip-path: inset(20% 0 52% 0); transform: translate(4px, -3px); }
  40% { clip-path: inset(72% 0 15% 0); transform: translate(-4px, 1px); }
  60% { clip-path: inset(5% 0 76% 0); transform: translate(3px, 2px); }
  80% { clip-path: inset(38% 0 44% 0); transform: translate(-2px, -1px); }
}

/* --- Equalizer Bars --- */
@keyframes eq-bar-1 {
  0%, 100% { height: var(--eq-height, 60%); }
  25% { height: calc(var(--eq-height, 60%) * 0.4); }
  50% { height: calc(var(--eq-height, 60%) * 0.85); }
  75% { height: calc(var(--eq-height, 60%) * 0.55); }
}

@keyframes eq-bar-2 {
  0%, 100% { height: var(--eq-height, 60%); }
  20% { height: calc(var(--eq-height, 60%) * 0.7); }
  45% { height: calc(var(--eq-height, 60%) * 0.35); }
  70% { height: calc(var(--eq-height, 60%) * 0.9); }
}

@keyframes eq-bar-3 {
  0%, 100% { height: var(--eq-height, 60%); }
  30% { height: calc(var(--eq-height, 60%) * 0.5); }
  60% { height: calc(var(--eq-height, 60%) * 0.95); }
  85% { height: calc(var(--eq-height, 60%) * 0.3); }
}

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

/* --- Guitar String Vibration --- */
@keyframes string-vibrate {
  0% { d: path("M 0 1 Q 25 1, 50 1 T 100 1"); }
  25% { d: path("M 0 1 Q 25 -1, 50 1 T 100 1"); }
  50% { d: path("M 0 1 Q 25 2, 50 0 T 100 1"); }
  75% { d: path("M 0 1 Q 25 0, 50 2 T 100 1"); }
  100% { d: path("M 0 1 Q 25 1, 50 1 T 100 1"); }
}

@keyframes string-pluck {
  0% { transform: scaleY(1); opacity: 0.3; }
  10% { transform: scaleY(6); opacity: 0.8; }
  30% { transform: scaleY(-3); opacity: 0.6; }
  50% { transform: scaleY(2); opacity: 0.4; }
  70% { transform: scaleY(-1); opacity: 0.3; }
  100% { transform: scaleY(1); opacity: 0.15; }
}

/* --- VU Meter Needle --- */
@keyframes vu-needle {
  0%, 100% { transform: rotate(-30deg); }
  30% { transform: rotate(15deg); }
  50% { transform: rotate(5deg); }
  70% { transform: rotate(20deg); }
  85% { transform: rotate(-5deg); }
}

/* --- Signal Node Pulse --- */
@keyframes signal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(0, 255, 136, 0); }
}

/* --- LED Blink --- */
@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- Noise --- */
@keyframes noise-shift {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 10%); }
  50% { transform: translate(-10%, 0%); }
  60% { transform: translate(10%, 5%); }
  70% { transform: translate(0%, -15%); }
  80% { transform: translate(-15%, 0%); }
  90% { transform: translate(10%, 5%); }
  100% { transform: translate(5%, 0); }
}

/* --- Scan Line --- */
@keyframes scan-line {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* --- Marquee / Scrolling Text --- */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Button Shimmer --- */
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* --- Cursor Blink --- */
@keyframes terminal-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Waveform Fade-in --- */
@keyframes waveform-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Boot VU Meter Smooth Bounce --- */
@keyframes boot-vu-bounce {
  0% { height: 10%; background: var(--accent-signal); }
  30% { height: 70%; background: var(--accent-signal); }
  50% { height: 95%; background: var(--accent-redline); }
  70% { height: 50%; background: var(--accent-warmth); }
  100% { height: 15%; background: var(--accent-signal); }
}