/* ============================================================
   hud.css
   The music toggle. The only persistent chrome on the page, so it
   is deliberately the quietest element in the design: a 42px disc
   that reads as part of the background until you hover it.

   Four states, driven by data-state from js/audio.js:
     idle      before the gate opens, invisible and unfocusable
     playing   speaker icon, breathing ring
     muted     crossed speaker, ring off
     blocked   the browser refused playback, crossed speaker.
               Clicking retries, so it behaves like a play button.
   ============================================================ */

.audio-toggle{
  position:fixed;
  right:clamp(1rem, 4vw, 1.75rem);
  bottom:calc(clamp(1rem, 4vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index:var(--z-hud);

  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  color:var(--text-dim);

  opacity:0;
  transform:translateY(12px) scale(.9);
  pointer-events:none;
  transition:
    opacity var(--dur-mid) var(--ease),
    transform var(--dur-mid) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

/* Backdrop blur is a nicety. If the visitor has asked for reduced
   transparency, the disc becomes a solid fill instead of losing its
   edge against the particle field. */
@media (prefers-reduced-transparency: reduce){
  .audio-toggle{
    background:var(--surface-solid);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* Revealed by main.js once the gate is dismissed. */
.is-entered .audio-toggle{
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition-delay:.35s;
}

.audio-toggle:hover{
  color:var(--text);
  border-color:var(--line-strong);
  background:rgba(255,255,255,.09);
}

.audio-toggle:active{ transform:scale(.94) }
.is-entered .audio-toggle:active{ transform:scale(.94) }

.audio-toggle i{ font-size:17px; line-height:1 }

/* Only one glyph is ever visible. Swapping with display keeps the
   grid cell from reserving space for the hidden one. */
.audio-toggle__on,
.audio-toggle__off{ display:none }

.audio-toggle[data-state="playing"] .audio-toggle__on{ display:block }
.audio-toggle[data-state="muted"]   .audio-toggle__off{ display:block }
.audio-toggle[data-state="blocked"] .audio-toggle__off{ display:block }
.audio-toggle[data-state="idle"]    .audio-toggle__on{ display:block }

.audio-toggle[data-state="playing"]{ color:var(--text) }

/* Breathing ring, playing state only. Drawn on a pseudo-element so
   the pulse animates transform and opacity and never touches the
   button's own layout. */
.audio-toggle::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.34);
  opacity:0;
  pointer-events:none;
}

@media (prefers-reduced-motion: no-preference){
  .audio-toggle[data-state="playing"]::after{
    animation:audio-pulse 2.6s var(--ease) infinite;
  }
}

@keyframes audio-pulse{
  0%  { opacity:.5; transform:scale(1) }
  70% { opacity:0;  transform:scale(1.38) }
  100%{ opacity:0;  transform:scale(1.38) }
}