/* Shared base for all three directions */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  --ink: #0a0a0a;
  --cream: #f5f1e8;
  --vermilion: #c8412b;
  --ash: #2a2a2a;
  --mute: rgba(10,10,10,0.55);
  --rule: rgba(10,10,10,0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 14, "SOFT" 30;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; }
.upper { text-transform: uppercase; letter-spacing: 0.12em; }

/* ---------- Waveform animation ---------- */
.vo-bar {
  transition: fill 80ms linear;
}
.vo-wave--live .vo-bar {
  animation: vo-pulse 720ms cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes vo-pulse {
  0%   { transform: scaleY(0.55); }
  100% { transform: scaleY(1.18); }
}
.vo-wave--idle .vo-bar { opacity: 0.85; }

/* now-playing bars */
.vo-nowbars span { height: 30%; transition: height 120ms linear; }
.vo-nowbars.is-on span { animation: vo-bars 800ms ease-in-out infinite alternate; }
@keyframes vo-bars {
  0%   { height: 20%; }
  100% { height: 100%; }
}

.vo-playbtn { transition: transform .15s ease, background .15s ease, color .15s ease; }
.vo-playbtn:hover { transform: scale(1.06); }
.vo-playbtn:active { transform: scale(0.96); }