/* ============================================================
   Background-music toggle — one small frosted glass note pill.
   Sits in the bottom corner, tucked away, understated. The DOM
   is built by /scripts/music.js; this file only styles it.

   Material = the shipped glass language (see glass.css): backdrop
   blur+saturate, gradient tint, crisp top-edge highlight, hairline
   border. Theme-adaptive: it follows the device's prefers-color-
   scheme — light glass (whiter tint, plum ink) in light mode, dark
   glass (plum tint, light ink) in dark mode — using glass.css's
   light/dark tone tokens as the vocabulary. It is a circle
   (border-radius:50%), so it needs no squircle bake.

   Safari note: backdrop-filter lives on the button/label themselves
   (never an ancestor), matching the hero countdown cells. Motion is
   on CHILD elements (the equalizer bars) or transform/opacity only,
   so backdrop sampling is never disturbed.

   Hover is flicker-proof: the hit area (.bm-music) is a FIXED 48px
   box that never resizes. The label is absolutely positioned and
   pointer-events:none, so revealing it can't change the hit area's
   bounds (the classic hover-flutter cause). Reveal is transform +
   opacity only — never a layout property — with intent delays
   applied in JS (expand after sustained hover, collapse after the
   pointer has been out a beat).
   ============================================================ */

.bm-music {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 48px; height: 48px;   /* stable hit area — never resizes */

  /* ---- theme tokens (light default) ---- */
  --pill-a: 255,255,255; --pill-oa: 0.74;   /* gradient stop A rgb / alpha */
  --pill-b: 244,238,251; --pill-ob: 0.56;   /* gradient stop B rgb / alpha */
  --pill-edge: rgba(255,255,255,0.92);      /* crisp top-edge highlight */
  --pill-hair: rgba(203,177,236,0.22);      /* hairline border */
  --pill-edge-hi: rgba(255,255,255,0.96);   /* hover edge highlight */
  --pill-hair-hi: rgba(203,177,236,0.34);
  --pill-ink: #241a2e;                      /* note glyph + eq bars + label text */
  --pill-ring: #6f52a8;                     /* focus ring */
}
.bm-music[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
  .bm-music {
    --pill-a: 44,30,60;  --pill-oa: 0.60;    /* plum tint (glass.css dark tone) */
    --pill-b: 26,17,38;  --pill-ob: 0.72;
    --pill-edge: rgba(255,255,255,0.22);
    --pill-hair: rgba(255,255,255,0.12);
    --pill-edge-hi: rgba(255,255,255,0.30);
    --pill-hair-hi: rgba(255,255,255,0.20);
    --pill-ink: #fdfbff;                     /* light ink on dark glass */
    --pill-ring: #cbb1ec;
  }
}

/* ---- the button (the frosted glass note) — the stable hit area ---- */
.bm-music-btn {
  position: relative;
  width: 48px; height: 48px;
  padding: 0; margin: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--pill-ink);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  background: linear-gradient(160deg, rgba(var(--pill-a),var(--pill-oa)), rgba(var(--pill-b),var(--pill-ob)));
  box-shadow:
    inset 0 1px 0 var(--pill-edge),
    inset 0 0 0 1px var(--pill-hair),
    0 10px 24px -10px rgba(12,7,24,0.55),      /* float shadow (lift off any backdrop) */
    0 2px 6px -3px rgba(12,7,24,0.4);
  transition: box-shadow .2s cubic-bezier(.22,.61,.36,1);
  -webkit-tap-highlight-color: transparent;
}
.bm-music.bm-hover .bm-music-btn,
.bm-music-btn:hover {
  box-shadow:
    inset 0 1px 0 var(--pill-edge-hi),
    inset 0 0 0 1px var(--pill-hair-hi),
    0 14px 30px -10px rgba(12,7,24,0.6),
    0 2px 6px -3px rgba(12,7,24,0.45);
}
.bm-music-btn:focus-visible {
  outline: 2px solid var(--pill-ring);
  outline-offset: 3px;
}

/* ---- the icons: note (paused) vs equalizer (playing) ---- */
.bm-music-btn .bm-note,
.bm-music-btn .bm-eq { grid-area: 1 / 1; display: flex; }
.bm-music-btn .bm-note svg { display: block; width: 20px; height: 20px; }

/* paused = show note; playing = show equalizer */
.bm-music[data-state="playing"] .bm-note { display: none; }
.bm-music:not([data-state="playing"]) .bm-eq { display: none; }

/* equalizer: three bars that rise and fall while playing */
.bm-eq {
  align-items: flex-end; justify-content: center;
  gap: 3px; height: 18px; width: 20px;
}
.bm-eq i {
  display: block; width: 3px; height: 100%;
  border-radius: 2px; background: var(--pill-ink);
  transform-origin: bottom;
  animation: bm-eq-bounce 1.05s ease-in-out infinite;
}
.bm-eq i:nth-child(1) { animation-delay: -.20s; }
.bm-eq i:nth-child(2) { animation-delay: -.55s; }
.bm-eq i:nth-child(3) { animation-delay: -.85s; }
@keyframes bm-eq-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* ---- the first-visit / hover label ----
   Absolutely positioned, out of flow, pointer-events:none: revealing
   it CANNOT change .bm-music's 48px hit area, so hover never flutters.
   Anchored to the LEFT of the button; grows leftward with content. */
.bm-music-label {
  position: absolute;
  right: calc(100% + 10px);          /* 10px gap to the left of the button */
  top: 50%;
  width: max-content;
  max-width: min(66vw, 260px);       /* wraps to 2 lines on narrow phones */
  pointer-events: none;
  opacity: 0;
  transform: translate(8px, -50%);   /* slides in from the right; transform only */
  padding: 10px 15px;
  border-radius: 15px;
  text-align: left; line-height: 1.32;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--pill-ink);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  background: linear-gradient(160deg, rgba(var(--pill-a),var(--pill-oa)), rgba(var(--pill-b),var(--pill-ob)));
  box-shadow:
    inset 0 1px 0 var(--pill-edge),
    inset 0 0 0 1px var(--pill-hair),
    0 10px 24px -12px rgba(12,7,24,0.5);
  transition: opacity .26s cubic-bezier(.22,.61,.36,1),
              transform .26s cubic-bezier(.22,.61,.36,1);
}
/* reveal on sustained hover (JS-timed .bm-hover), first-play intro, or keyboard focus */
.bm-music.bm-hover .bm-music-label,
.bm-music.bm-show-label .bm-music-label,
.bm-music:focus-within .bm-music-label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* ---- reduced motion: no bouncing bars, no slide ---- */
@media (prefers-reduced-motion: reduce) {
  .bm-eq i { animation: none; }
  .bm-eq i:nth-child(1) { transform: scaleY(0.5); }
  .bm-eq i:nth-child(2) { transform: scaleY(0.85); }
  .bm-eq i:nth-child(3) { transform: scaleY(0.6); }
  .bm-music-label { transform: translate(0, -50%); transition: opacity .2s linear; }
  .bm-music.bm-hover .bm-music-label,
  .bm-music.bm-show-label .bm-music-label,
  .bm-music:focus-within .bm-music-label { transform: translate(0, -50%); }
  .bm-music-btn { transition: none; }
}