/* =========================================================
   Brand-music toggle (header) — discreet speaker icon
   ========================================================= */
.sound {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-3);
  background: rgba(28, 26, 61, .05);
  transition: color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
}
.sound:hover { color: var(--ink); background: rgba(255, 255, 255, .85); }
.sound:active { transform: scale(.94); }
.sound:focus-visible { outline: 2px solid var(--lav-2); outline-offset: 3px; }

/* OFF: speaker with a small cross · ON: speaker with sound waves */
.sound__on { display: none; }
.sound[aria-pressed="true"] { color: #6f5cf0; background: rgba(140, 116, 255, .14); box-shadow: 0 0 0 4px rgba(183, 165, 255, .14); }
.sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] .sound__on { display: inline; }
.sound[aria-pressed="true"] .sound__on path { animation: soundWave 2.4s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__on path:nth-child(2) { animation-delay: .25s; }
@keyframes soundWave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* tooltip (hover + keyboard focus) */
.sound__tip {
  position: absolute; top: calc(100% + 12px); right: -6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink);
  background: rgba(255, 255, 255, .92); border: 1px solid #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 28px -14px rgba(60, 50, 120, .45);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
@media (hover: hover) {
  .sound:hover .sound__tip { opacity: 1; transform: none; }
}
.sound:focus-visible .sound__tip { opacity: 1; transform: none; }

@media (max-width: 420px) {
  .sound { width: 38px; height: 38px; }
}