/* music.css
   The floating music control: an equaliser that animates while playing, then a
   two-button on/off pair. Two explicit choices rather than one cryptic icon, so
   no guest has to guess what tapping does or which state they are in.
   Fades in with the curtain, so it only ever sits on the light page.
   Part of the Mici & Tungi invitation. */
.music-toggle {
  --mt-icon: 15px;
  --mt-pad-y: 14px;
  --mt-pad-x: 15px;
  position: fixed;
  top: clamp(12px, 2.2vw, 20px);
  right: clamp(12px, 2.2vw, 20px);
  z-index: 110;
  max-width: calc(100vw - 24px);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: oklch(0.985 0.008 88 / 0.78);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.45);
}

/* Leading equaliser: an at-a-glance sign that this controls sound, and it
   animates only while the music is actually playing. */
.music-toggle .eq {
  display: flex;
  align-items: flex-end;
  align-self: center;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 16px;
  margin: 0 10px 0 13px;
}
.music-toggle .eq i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: var(--ink-mute);
  transform-origin: bottom center;
  transition: background 420ms ease, height 380ms cubic-bezier(.22,.61,.36,1);
}
.music-toggle .eq i:nth-child(1) { height: 7px;  animation-delay: 0ms;   }
.music-toggle .eq i:nth-child(2) { height: 14px; animation-delay: 180ms; }
.music-toggle .eq i:nth-child(3) { height: 10px; animation-delay: 360ms; }
.music-toggle .eq i:nth-child(4) { height: 5px;  animation-delay: 540ms; }

.music-toggle.playing .eq i {
  background: var(--ink);
  animation: eqBounce 1100ms ease-in-out infinite;
}
.music-toggle.muted .eq i { height: 3px; }
@keyframes eqBounce {
  0%, 100% { transform: scaleY(0.42); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.playing .eq i { animation: none; }
}

.music-toggle button {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mt-pad-y) var(--mt-pad-x);
  border-radius: 999px;
  /* Never below the 44px touch floor, whatever the padding resolves to. */
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-mute);
  transition: background 300ms ease, color 300ms ease;
}
.music-toggle button:hover { color: var(--ink); }
/* aria-pressed carries the state, so the styling follows it rather than a class. */
.music-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  cursor: default;
}
.music-toggle button svg { width: var(--mt-icon); height: var(--mt-icon); flex: none; display: block; }
/* An author-level `display` beats the UA's [hidden] rule, so state it explicitly:
   without this, hiding the control in JS has no visual effect at all. */
.music-toggle[hidden] { display: none; }

/* Hidden until the curtain opens — there is no music to control before then.
   `top` is transitioned as well so the pill can glide upward into the space
   the rod vacates on first scroll (see .lifted below), instead of jumping. */
.music-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease 400ms, top 800ms cubic-bezier(.22,.61,.36,1);
}
.music-toggle.revealed { opacity: 1; pointer-events: auto; }

/* Phones: trim the surround, never the targets — min-width/height hold at 44px.
   Also nudge the toggle down so it clears the curtain rod (which lingers a
   moment after the reveal), instead of sitting flush against it. Once the
   rod is dismissed (.lifted, added on first scroll) the pill glides upward
   into that vacated space — its natural resting position. */
@media (max-width: 720px) {
  .music-toggle { --mt-pad-x: 13px; top: 32px; right: 16px; }
  .music-toggle.lifted { top: 16px; }
  .music-toggle .eq { margin: 0 8px 0 11px; }
}
@media (max-width: 380px) {
  .music-toggle { --mt-pad-x: 11px; top: 28px; right: 12px; }
  .music-toggle.lifted { top: 12px; }
  .music-toggle .eq { width: 15px; margin: 0 6px 0 9px; }
  .music-toggle .eq i { width: 2px; }
}

/* Short landscape phones: the control must not crowd the curtain button. */
@media (max-height: 480px) {
  .music-toggle { --mt-pad-y: 11px; top: 10px; right: 10px; }
}

/* Coarse pointers get a slightly larger icon — same footprint, easier to read. */
@media (pointer: coarse) {
  .music-toggle { --mt-icon: 17px; }
}

/* Some browsers ignore backdrop-filter; keep the pill legible regardless. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .music-toggle { background: oklch(0.985 0.008 88 / 0.96); }
}