/* ============================================================
   BERGHAUS WEISSBRIACH — SOUND CONTROL (CSS)
   Persistent fixed toggle for the hero song "Das Licht bleibt an"
   (audio-player.js owns the <audio> element itself; this file only
   styles the one visible control). Tokens only. No drop shadows anywhere.
   Square 2px radius. The visible focus ring comes free from
   tokens.css's global :focus-visible rule — this is a real <button>.
   ============================================================ */

.sound-toggle {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--r);
  border: 1px solid var(--line-on-dark);
  background: color-mix(in srgb, var(--forest-night) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--on-dark);
  cursor: pointer;

  /* Revealed by audio-player.js once "armed" (first-scroll play attempt
     resolved, either way) by removing [hidden] and adding .is-visible
     on the next frame, so the opacity/transform transition actually runs. */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--e-out), transform 320ms var(--e-out),
              border-color var(--t-hover) var(--e-out);
}
.sound-toggle.is-visible { opacity: 1; transform: none; }
.sound-toggle:hover,
.sound-toggle:focus-visible { border-color: var(--moss); }

/* Attention cue for a revealed-but-not-yet-playing control (see
   audio-player.js's onFirstGesture / setMutedVisual): a soft, finite
   pulse so a first-time phone visitor reads a 44x44 icon as something
   to press, not just a status light in the corner. Border-colour +
   outline only — the design contract forbids box-shadow (and
   filter: drop-shadow as a workaround) everywhere, including here.
   animation-iteration-count runs this a fixed number of times and
   then lets it settle on the resting border — an unbounded pulse
   reads as a cookie-banner nag, not a considered detail. */
@keyframes sound-toggle-await {
  0%, 100% {
    border-color: var(--line-on-dark);
    outline-color: transparent;
  }
  50% {
    border-color: var(--moss);
    outline-color: var(--forest);
  }
}
.sound-toggle.is-awaiting-tap {
  outline: 1px solid transparent;
  outline-offset: 3px;
  border-radius: var(--r);
  animation: sound-toggle-await 1.8s var(--e-out) 3;
}

.sound-toggle-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Two path pairs share one icon: the speaker outline is always drawn;
   the sound-wave arcs and the mute cross cross-fade depending on state
   so no DOM swap or second <svg> is ever needed. */
.sound-toggle-wave,
.sound-toggle-mute { transition: opacity 200ms var(--e-out); }
.sound-toggle-mute { opacity: 0; }
.sound-toggle.is-muted .sound-toggle-wave { opacity: 0; }
.sound-toggle.is-muted .sound-toggle-mute { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sound-toggle,
  .sound-toggle-wave,
  .sound-toggle-mute { transition: none; }
  .sound-toggle.is-awaiting-tap {
    /* The cue itself is motion; disable it. The button stays fully
       visible regardless — that comes from its normal opacity/border/
       icon, none of which this animation was providing. */
    animation: none;
  }
}