/* $SEED — SOUND: the stencil speaker toggle in the header, its "tap for sound" tag and the little meter
   that lights up while something is playing. Brushed-steel + hazard tokens from style.css. */

.snd-wrap{position:relative;display:inline-flex;align-items:center;flex:none}

.snd{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer;padding:0;position:relative;
  transition:transform .1s,box-shadow .1s,background .2s;
}
.snd:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.snd:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.snd svg{width:22px;height:22px;overflow:visible;display:block}
/* the speaker is cut like a stencil: box, cone top, cone bottom — three plates with bridges between them */
.snd svg rect,.snd svg path{fill:var(--ink);stroke:none}
.snd .snd-w1,.snd .snd-w2,.snd .snd-x{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.snd .snd-w1{transform-origin:20px 16px;transition:opacity .18s,transform .28s cubic-bezier(.3,1.5,.5,1)}
.snd .snd-w2{transform-origin:20px 16px;transition:opacity .18s .05s,transform .32s cubic-bezier(.3,1.5,.5,1) .05s}
/* the OFF slash draws itself in like a grease-pencil stroke */
.snd .snd-x{stroke:var(--orange-d);stroke-width:3.2;stroke-dasharray:32;stroke-dashoffset:32;transition:stroke-dashoffset .22s cubic-bezier(.2,.8,.2,1)}
.snd.off{background:repeating-linear-gradient(-45deg,#fff 0 5px,var(--steel-2) 5px 10px)}
.snd.off .snd-w1{opacity:0;transform:scale(.6)}
.snd.off .snd-w2{opacity:0;transform:scale(.5)}
.snd.off .snd-x{stroke-dashoffset:0}
.snd.dead{opacity:.45;cursor:not-allowed;box-shadow:none}
.snd.dead:active{transform:none}

/* meter: three bars on a hazard-yellow plate, only while sound is going through the speaker */
.snd-bars{
  position:absolute;right:-8px;bottom:-8px;height:8px;box-sizing:content-box;display:flex;gap:1px;align-items:flex-end;
  background:var(--yellow);border:2px solid var(--ink);padding:1px 2px;opacity:0;transform:scale(.6);transform-origin:100% 100%;
  transition:opacity .15s,transform .15s cubic-bezier(.3,1.5,.5,1);pointer-events:none;
}
.snd-bars i{width:2px;height:2px;background:var(--ink);display:block}
.snd.live .snd-bars{opacity:1;transform:scale(1)}
.snd.live .snd-bars i{animation:sndBar .32s ease-in-out infinite alternate}
.snd.live .snd-bars i:nth-child(2){animation-duration:.26s;animation-delay:-.1s}
.snd.live .snd-bars i:nth-child(3){animation-duration:.38s;animation-delay:-.2s}
@keyframes sndBar{from{height:2px}to{height:8px}}

/* the one-time nudge: a hazard tag hanging under the button, pointing up at it */
.snd-hint{
  position:absolute;top:calc(100% + 12px);right:0;z-index:5;pointer-events:none;white-space:nowrap;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:var(--stencil);font-weight:900;font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:6px 10px 5px;
  animation:sndHintIn .45s cubic-bezier(.3,1.5,.5,1) both,sndHintBob 1.6s ease-in-out .45s infinite;
}
.snd-hint::before{content:"";position:absolute;right:13px;top:-9px;border:6px solid transparent;border-top:0;border-bottom:9px solid var(--ink)}
.snd-hint::after{content:"";position:absolute;right:15px;top:-5px;border:4px solid transparent;border-top:0;border-bottom:6px solid var(--yellow)}
.snd-hint.out{animation:sndHintOut .25s ease-in both}
@keyframes sndHintIn{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}
@keyframes sndHintBob{50%{transform:translateY(3px)}}
@keyframes sndHintOut{to{opacity:0;transform:translateY(-6px)}}

@media (max-width:720px){
  .snd{width:34px;height:34px}
  .snd svg{width:20px;height:20px}
  .snd-hint{font-size:14px;padding:5px 8px 4px}
}
@media (prefers-reduced-motion:reduce){
  .snd-hint{animation:none}
  .snd.live .snd-bars i{animation:none;height:6px}
}