@font-face {
  font-family: 'MomoTrustDisplay';
  src: url('../fonts/MomoTrustDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-red: #E01A2B;
  --brand-red-rgb: 224, 26, 43;
  --slider-track: #3f3f3f;
}

/* App promo card: red glow behind the phone mockup.
   Sized explicitly — an unsized radial-gradient resolves to
   farthest-corner, which floods a wide, short card with red. */
.promo-glow {
  background: radial-gradient(
    ellipse 24% 62% at 43% 45%,
    rgba(var(--brand-red-rgb), 0.65) 0%,
    rgba(var(--brand-red-rgb), 0.18) 45%,
    rgba(var(--brand-red-rgb), 0) 90%
  );
}

/* Live Now waveform. Per-bar heights trace the waveform shape in the
   reference design; animation-name is only switched on while playing, so
   the bars sit at their true heights when paused instead of collapsed. */
.waveform-bar {
  width: 4px;
  border-radius: 9999px;
  transform-origin: center;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.waveform-bar:nth-child(1)  { height: 30%; }
.waveform-bar:nth-child(2)  { height: 27%; }
.waveform-bar:nth-child(3)  { height: 61%; }
.waveform-bar:nth-child(4)  { height: 41%; }
.waveform-bar:nth-child(5)  { height: 93%; }
.waveform-bar:nth-child(6)  { height: 46%; }
.waveform-bar:nth-child(7)  { height: 32%; }
.waveform-bar:nth-child(8)  { height: 36%; }
.waveform-bar:nth-child(9)  { height: 55%; }
.waveform-bar:nth-child(10) { height: 100%; }
.waveform-bar:nth-child(11) { height: 55%; }
.waveform-bar:nth-child(12) { height: 36%; }
.waveform-bar:nth-child(13) { height: 66%; }
.waveform-bar:nth-child(14) { height: 54%; }
.waveform-bar:nth-child(15) { height: 36%; }
.waveform-bar:nth-child(16) { height: 59%; }
.waveform-bar:nth-child(17) { height: 23%; }
.waveform-bar:nth-child(18) { height: 12%; }
.waveform-bar:nth-child(19) { height: 8%; }
.waveform-bar:nth-child(20) { height: 43%; }
.waveform-bar:nth-child(21) { height: 14%; }
.waveform-bar:nth-child(22) { height: 8%; }
.waveform-bar:nth-child(23) { height: 32%; }
.waveform-bar:nth-child(24) { height: 8%; }

.waveform-bar:nth-child(3n) { animation-delay: 0.15s; animation-duration: 0.9s; }
.waveform-bar:nth-child(4n) { animation-delay: 0.3s; animation-duration: 1.1s; }

#live-waveform.is-playing .waveform-bar {
  animation-name: waveform-bounce;
}

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

/* Live Now: waveform flourish flanking the logo tile */
.logo-wave-bar {
  width: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
}
.logo-wave-bar:nth-child(1) { height: 25%; }
.logo-wave-bar:nth-child(2) { height: 55%; }
.logo-wave-bar:nth-child(3) { height: 85%; }
.logo-wave-bar:nth-child(4) { height: 100%; }
.logo-wave-bar:nth-child(5) { height: 70%; }
.logo-wave-bar:nth-child(6) { height: 40%; }
.logo-wave-bar:nth-child(7) { height: 20%; }

/* Volume slider skin */
.brand-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--brand-red) 70%, var(--slider-track) 70%);
  outline: none;
}
.brand-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-red);
  cursor: pointer;
  border: 2px solid white;
}
.brand-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-red);
  cursor: pointer;
  border: 2px solid white;
}
.brand-slider::-moz-range-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--slider-track);
}