/* Restore the landing page's original sound-wave illustration. */
.audio-display {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
  align-items: center;
  min-width: 0;
  padding-top: 12px;
}
.audio-orbit {
  position: relative;
  grid-area: 1 / 1;
  justify-self: center;
  width: min(calc(100% - 32px), 360px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.audio-orbit::before,
.audio-orbit::after {
  content: '';
  position: absolute;
  width: 72.5%;
  aspect-ratio: 1;
  border: 1px solid #b2d6ff2d;
  border-radius: 50%;
  box-shadow: 0 0 80px #5aafff12;
}
.audio-orbit::after {
  width: 100%;
  border-style: dashed;
  border-color: #86a3d332;
  animation: podcast-signal-orbit 48s linear infinite;
  animation-play-state: paused;
}
.audio-bars {
  position: relative;
  grid-area: 1 / 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: center;
  width: min(100%, 499px);
  height: 175px;
}
.audio-bars i {
  display: block;
  flex: 0 0 4px;
  width: 4px;
  min-height: 8px;
  height: var(--height, 45px);
  border-radius: 50px;
  background: linear-gradient(#c0e3ff, #518be0);
  box-shadow: 0 0 12px #7cbdff6a;
  animation: podcast-signal-wave var(--duration, 1.5s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  animation-play-state: paused;
}
.audio-display.is-running .audio-orbit::after,
.audio-display.is-running .audio-bars i { animation-play-state: running; }
.audio-label {
  grid-area: 2 / 1;
  border-top: 1px solid #526b873e;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px 14px;
  color: #86a2c5;
  font: 400 10px/1.6 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.audio-label span:last-child { white-space: nowrap; }
@keyframes podcast-signal-wave {
  from { transform: scaleY(.28); opacity: .42; }
  to { transform: scaleY(1.1); opacity: 1; }
}
@keyframes podcast-signal-orbit { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .audio-orbit { width: min(calc(100% - 32px), 300px); }
}
@media (max-width: 560px) {
  .audio-display { row-gap: 18px; }
  .audio-orbit { width: min(calc(100% - 24px), 240px); }
  .audio-bars { width: min(100%, 222px); }
  .audio-bars i { width: 2px; flex-basis: 2px; }
  .audio-label { flex-wrap: wrap; gap: 5px 16px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-orbit::after,
  .audio-bars i { animation: none; }
  .audio-bars i { transform: scaleY(.72); opacity: .8; }
}