/* The Music button (music.js): a small graphite pill in the top-right corner that stays in reach
   as the page scrolls (it steps aside while the reader scrolls down, and comes back when they
   scroll up), readable over the dark stage and the paper alike. It sits where the
   intro's Skip was, clear of the stage's circuit, and hides while the intro plays (the film has
   its own mute). A 44px target around a 34px pill; on phones, just the note. */

.music-toggle {
  --music-bg: rgb(22 22 27);
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cloud-72);
  font: 600 0.8125rem/1 var(--body);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  animation: music-in 500ms var(--ease) 200ms backwards;
}
html.intro-on .music-toggle { display: none; }
/* Scrolling down, it slides up out of the way (music.js). It stays in the tab order, and keyboard
   focus brings it straight back. */
.music-toggle.is-away:not(:focus-visible) {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.music-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 11px;
  border: 1px solid rgb(246 247 248 / 0.16);
  border-radius: 999px;
  background: var(--music-bg);
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.5);
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.music-toggle:hover {
  --music-bg: rgb(34 34 41);
  color: var(--cloud);
}
.music-toggle[aria-pressed="false"] { color: var(--cloud-56); }
.music-toggle[aria-pressed="false"]:hover { color: var(--cloud-72); }

.music-toggle svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.music-toggle ellipse { fill: currentColor; stroke: none; }
.music-toggle .music-beam { stroke-width: 2.6; stroke-linecap: butt; }
/* Off: a slash through the note, cut clear of it by a band of the pill's own colour. */
.music-toggle .music-gap { stroke: var(--music-bg); stroke-width: 5; }
.music-toggle[aria-pressed="true"] .music-gap,
.music-toggle[aria-pressed="true"] .music-slash { display: none; }

.music-state { font-weight: 500; }

/* The ring sits on the pill, framed in graphite, so it shows on the paper as well as the stage. */
.music-toggle:focus-visible { outline: none; }
.music-toggle:focus-visible .music-pill {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--graphite);
}

/* Phones: just the note, so it never sits over the words. Its name stays "Music". */
@media (max-width: 599px) {
  .music-pill {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .music-label,
  .music-state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@keyframes music-in {
  from { opacity: 0; }
}

@media (forced-colors: active) {
  .music-pill { border-color: ButtonText; }
  /* The band that cuts the slash clear of the note takes the system background too. */
  .music-toggle .music-gap { stroke: Canvas; }
  .music-toggle:focus-visible .music-pill { outline-color: Highlight; }
}

@media print {
  .music-toggle { display: none; }
}