/* Site sounds (site-sounds P3): the mute in the header, and the ring where a drip lands. Builds on site.css's tokens. */

/* the mute, beside the A/B/C looks and in their style: an ink border, and a hard shadow that presses in */
.snd-tog{all:unset;box-sizing:border-box;flex:none;width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--line);
  background:var(--lime);color:#0b0b0c;cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .08s ease,box-shadow .08s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.snd-tog svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd-tog .spk{fill:currentColor}
.snd-tog .cross{display:none}
.snd-tog[aria-pressed="false"]{background:var(--paper);color:var(--ink)}
.snd-tog[aria-pressed="false"] .wave{display:none}
.snd-tog[aria-pressed="false"] .cross{display:inline}
.snd-tog:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.snd-tog:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}

/* the ring: where the drip landed, in the colour of its note, outlined in ink so it reads on paper as well as on noir */
.om-rings{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden;contain:strict}
.om-rings i{position:absolute;left:0;top:0;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:3px solid var(--c);
  box-shadow:0 0 0 1px rgba(11,11,12,.3),inset 0 0 0 1px rgba(11,11,12,.3),0 0 18px var(--c);
  transform:scale(.08);animation:om-ring .95s cubic-bezier(.15,.7,.3,1) forwards;will-change:transform,opacity}
@keyframes om-ring{60%{opacity:.85}to{transform:scale(1.5);opacity:0}}

/* phones: the header makes room for the mute. The looks narrow, the menu tightens, the wordmark steps down a size;
   with think-tank music on the header too (alive.js's Act V "♪ Sound"), that shrinks to its note and the sun stands alone */
@media (max-width:419px){
  .nav.has-snd{gap:8px}
  .nav.has-snd .brand{gap:8px}
  .nav.has-snd .brand span{font-size:13px;letter-spacing:0}
  .nav.has-snd .tools{gap:6px}
  .nav.has-snd .variants button{width:28px}
  .nav.has-snd .menu{padding:0 9px}
  .nav.has-snd .snd-tog{width:40px}
  .nav.has-snd .snd{font-size:0;padding:0 10px}
  .nav.has-snd .snd::before{content:"♪";font-size:16px}
  .nav.has-snd:has(.snd:not([hidden])) .brand span{display:none}
}
@media (max-width:349px){
  .nav.has-snd .brand span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .om-rings i{transform:none;width:30px;height:30px;margin:-15px 0 0 -15px;animation:om-dot .6s ease-out forwards}
  .snd-tog{transition:none}
}
@keyframes om-dot{from{opacity:.9}to{opacity:0}}