/* One set of letters becomes both the play triangle and the live equalizer. */
#music-toggle {
  --music-level-time: 0;
  --music-level-will: 0;
  --music-level-tell: 0;
  --music-top: 174px;
  position: fixed;
  top: calc(var(--music-top) + env(safe-area-inset-top));
  right: calc(6px + env(safe-area-inset-right));
  transform: translateY(0);
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
  z-index: 11;
  display: block;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20, 43, 36, .34), rgba(20, 43, 36, 0) 72%);
  color: #e6e8df;
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-shadow: 0 1px 3px rgba(5, 19, 14, .55);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

#music-toggle[hidden] { display: none; }
#music-toggle:focus-visible { outline: 1px solid #e6e8df; outline-offset: 3px; }
#music-toggle:disabled { cursor: default; opacity: .45; }

.music-shape {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: center;
  transition: transform .2s ease, opacity .25s ease;
}

#music-toggle:active .music-shape { transform: scale(.94); }

.music-word {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  transform: translate3d(var(--word-x), var(--word-y), 0) rotate(var(--word-angle));
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}

.music-word[data-music-word="time"] {
  --word-x: 34px;
  --word-y: 20px;
  --word-angle: 30deg;
  --music-level: var(--music-level-time);
}

.music-word[data-music-word="will"] {
  --word-x: 34px;
  --word-y: 44px;
  --word-angle: -30deg;
  --music-level: var(--music-level-will);
}

.music-word[data-music-word="tell"] {
  --word-x: 12px;
  --word-y: 32px;
  --word-angle: 90deg;
  --music-level: var(--music-level-tell);
}

.music-pulse {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  transform: translate3d(0, 0, 0) scaleY(1);
  transition: transform .14s ease-out;
}

.music-letter {
  position: absolute;
  top: -6px;
  left: -6px;
  display: block;
  width: 12px;
  height: 12px;
  text-align: center;
  font: inherit;
  letter-spacing: normal;
  line-height: 12px;
  transform: translate3d(calc((var(--letter) - 1.5) * 10px), 0, 0);
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}

#music-toggle[data-state="playing"] [data-music-word="time"] { --word-x: 18px; }
#music-toggle[data-state="playing"] [data-music-word="will"] { --word-x: 32px; }
#music-toggle[data-state="playing"] [data-music-word="tell"] { --word-x: 46px; }

#music-toggle[data-state="playing"] .music-word {
  --word-y: 32px;
  --word-angle: 0deg;
}

#music-toggle[data-state="playing"] .music-letter {
  transform: translate3d(0, calc((var(--letter) - 1.5) * 10px), 0);
}

#music-toggle[data-state="playing"] [data-music-word="time"] .music-letter:nth-child(3) {
  transform: translate3d(0, calc((var(--letter) - 1.5) * 10px), 0) rotate(90deg);
}

#music-toggle[data-state="playing"] .music-pulse {
  transform: translate3d(0, calc(var(--music-level) * -3px), 0)
    scaleY(calc(1 + var(--music-level) * .07));
}

#music-toggle[data-state="loading"] .music-shape { opacity: .55; }

/* Glide down as the poem enters view, leaving the cover dates untouched. */
#music-toggle[data-reading="true"] {
  transform: translateY(max(0px, calc(100dvh - var(--music-top) - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom))));
}

/* A photograph or index keeps the control centered in its quiet header. */
#music-toggle[data-in-dialog="true"] {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  transition: none;
}

#music-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 700px) {
  #music-toggle { --music-top: 184px; right: calc(26px + env(safe-area-inset-right)); }
  #music-toggle[data-in-dialog="true"] { right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #music-toggle, .music-shape, .music-word, .music-letter, .music-pulse { transition: none; }
  #music-toggle[data-state="playing"] .music-pulse { transform: none; }
  #music-toggle:active .music-shape { transform: none; }
}