/* ————————————————————————————————————————
   sonARe — the sound toggle + top-right corner nav (shared)
   a living equalizer that asks to be turned on; once you do,
   it becomes a quiet mute switch. on iphone it also names the
   one thing people forget — the physical silent switch.
   NOTE: the pulse class is .snd-cue (not .cue) — the piece already
   owns .cue for its scroll arrow, and .cue sets opacity:0.
———————————————————————————————————————— */

/* the top-right cluster — used on the inbetween page.
   the home reuses its own .menu bar and just drops the toggle in. */
.snd-nav{
  position:fixed; top:14px; right:18px; z-index:30;
  display:flex; align-items:center; gap:clamp(15px,2.5vw,26px);
}
.snd-nav a{
  font-family:"Fragment Mono",ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:.18em; text-transform:lowercase;
  color:rgba(234,237,239,.6); text-decoration:none;
  text-shadow:0 1px 12px rgba(0,0,0,.7); transition:color .2s;
}
.snd-nav a:hover{ color:#eaedef; }

/* the toggle — flows inline wherever it is placed */
.snd{
  display:inline-flex; align-items:center; gap:9px;
  margin:0; padding:7px 13px;
  background:rgba(8,9,11,.42);
  border:1px solid rgba(159,216,212,.34);
  border-radius:999px;
  color:#eaedef;
  font-family:"Fragment Mono",ui-monospace,"SF Mono",Menlo,monospace;
  font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:lowercase;
  line-height:1; cursor:pointer; white-space:nowrap;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:border-color .25s, background .25s, box-shadow .4s;
}
.snd:hover,.snd:focus-visible{
  border-color:rgba(159,216,212,.72); background:rgba(8,9,11,.62); outline:none;
}

/* the living equalizer */
.snd-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.snd-eq i{
  width:2px; height:4px; background:#9fd8d4; border-radius:1px;
  transform-origin:bottom; animation:snd-bounce 1s ease-in-out infinite;
}
.snd-eq i:nth-child(2){ animation-delay:.18s; }
.snd-eq i:nth-child(3){ animation-delay:.36s; }
@keyframes snd-bounce{ 0%,100%{height:3px} 50%{height:12px} }

/* muted — the bars lie flat and dim, the word turns off */
.snd.muted{ border-color:rgba(234,237,239,.22); }
.snd.muted .snd-eq i{ animation:none; height:3px; background:rgba(234,237,239,.42); }
.snd-label .t-off{ display:none; }
.snd.muted .snd-label .t-on{ display:none; }
.snd.muted .snd-label .t-off{ display:inline; }

/* the cue — before you've started, the turquoise breathes in the border
   (border + background, never an outward ring — it must not overflow the
    menu bar it lives in on the home) */
.snd.snd-cue{ animation:snd-ring 2.2s ease-in-out infinite; }
@keyframes snd-ring{
  0%,100%{ border-color:rgba(159,216,212,.3);  background:rgba(8,9,11,.42); }
  50%{     border-color:rgba(159,216,212,.85); background:rgba(159,216,212,.12); }
}

/* the silent-switch line — iphone only */
.snd-hint{
  display:none; position:fixed; top:54px; right:18px; z-index:30;
  max-width:210px; text-align:right; pointer-events:none;
  color:#eaedef; opacity:.55;
  font-family:"Fragment Mono",ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10px; letter-spacing:.08em; text-transform:lowercase; line-height:1.4;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
body.ios .snd-hint{ display:block; }

@media (prefers-reduced-motion:reduce){
  .snd-eq i{ animation:none; height:8px; }
  .snd.snd-cue{ animation:none; border-color:rgba(159,216,212,.6); }
}
@media (max-width:560px){
  .snd-nav{ top:11px; right:12px; gap:14px; }
  .snd{ padding:6px 10px; font-size:10px; }
  .snd-hint{ top:46px; right:12px; font-size:9px; max-width:160px; }
}