/* ============================================================
   The music switch.

   The second and last persistent control, and the only mark on the
   invitation that is not a letter. Three hairlines: they rise and
   fall while the track plays and rest flat when it does not, so the
   control says what it is doing without a word for it.

   It arrives with the invitation and stays for the rest of the visit.
   ============================================================ */

.sound {
  position: fixed;
  bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
  right: clamp(1.25rem, 5vw, 3.25rem);
  z-index: 50;

  appearance: none; -webkit-appearance: none;
  background: none; border: 0; border-radius: 0; margin: 0;
  /* Small to look at, large enough to hit. */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  color: var(--ink-warm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms ease 180ms, color 600ms ease;
  -webkit-tap-highlight-color: transparent;
}
html[data-audio][data-opened] .sound { opacity: 1; pointer-events: auto; }

.sound__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  opacity: .48;
  transition: opacity .45s ease;
}
.sound:hover .sound__bars { opacity: .8; }
.sound:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

.sound__bars i {
  display: block;
  width: 1px;
  height: 100%;
  background: currentColor;
  transform: scaleY(.22);
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.32,.08,.24,1);
}

/* Playing: the three lines breathe, each on its own beat. Muted: they
   settle, and stay settled. */
.sound[aria-pressed="true"] .sound__bars i { animation: level 1.9s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-duration: 1.5s; animation-delay: -.5s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-duration: 2.3s; animation-delay: -1.1s; }
.sound[aria-pressed="false"] .sound__bars { opacity: .3; }
.sound[aria-pressed="false"] .sound__bars i:nth-child(2) { transform: scaleY(.4); }

@keyframes level {
  0%, 100% { transform: scaleY(.28); }
  50%      { transform: scaleY(1); }
}

/* The switch crosses every ground the invitation has, and it is told
   what is behind it at the foot of the window rather than at the middle
   — the invitation rises over the hero from the bottom up, so the two
   are not the same thing for half a screen's worth of scrolling. */
html[data-foot="ink"]   .sound { color: #F4F1EC; }
html[data-foot="count"] .sound { color: #F4F1EC; }

@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed="true"] .sound__bars i { animation: none; transform: scaleY(.7); }
  .sound[aria-pressed="true"] .sound__bars i:nth-child(2) { transform: scaleY(1); }
}