/* A small, single-sided spectrum between the artwork and its caption. */
.work-audio-bars {
  position: absolute;
  z-index: 35;
  left: 50%;
  bottom: clamp(72px, 14%, 116px);
  width: min(288px, 52%);
  height: 42px;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.work-audio-bars.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.work-audio-bars__canvas,
.work-audio-bars__idle {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.work-audio-bars__canvas {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  transition: opacity 140ms ease, transform 180ms ease;
}

.work-audio-bars__idle {
  /* Keep silent bands visible so the spectrum retains its centered width. */
  opacity: 1;
}

.work-audio-bars.is-running .work-audio-bars__canvas {
  opacity: 1;
  transform: scaleY(1);
}

@media (max-width: 768px) {
  .work-audio-bars {
    bottom: max(48px, 12%);
    width: min(220px, 68%);
    height: 32px;
  }
}

@media (max-height: 560px) {
  .work-audio-bars {
    bottom: 40px;
    width: min(216px, 52%);
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-audio-bars,
  .work-audio-bars__canvas,
  .work-audio-bars__idle {
    transition: none;
  }
}