/* ==========================================================================
   RASAD — the live window's music button.

   Loads on top of landing.css, and only while the playlist has a track on.
   The button is its own meter: the bars move only while sound is heard.
   ========================================================================== */

/* the button wraps with the link as one, never alone under the credit */
.live-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.live-music{
  display:inline-flex;align-items:center;gap:9px;padding:6px 11px;
  font:inherit;letter-spacing:.06em;color:var(--fg-2);cursor:pointer;
  background:none;border:1px solid var(--line-2);border-radius:3px;
  transition:color .2s,border-color .2s,background .2s;
}
.live-music[hidden]{display:none}
.live-music:hover{color:var(--fg);border-color:var(--cyan-lo);background:rgba(45,209,207,.06)}
.live-music[aria-pressed="true"]{color:var(--cyan);border-color:var(--cyan-lo)}
.live-music svg{width:9px;height:9px;fill:currentColor}
.live-music-pause,.live-music-meter,
.live-music[aria-pressed="true"] .live-music-play{display:none}
.live-music[aria-pressed="true"] .live-music-meter{display:inline-flex}
/* a touch screen keeps :hover after a tap, so only a real pointer swaps in the pause */
.live-music[aria-pressed="true"]:focus-visible .live-music-meter{display:none}
.live-music[aria-pressed="true"]:focus-visible .live-music-pause{display:block}
@media (hover:hover){
  .live-music[aria-pressed="true"]:hover .live-music-meter{display:none}
  .live-music[aria-pressed="true"]:hover .live-music-pause{display:block}
}
.live-music-meter{align-items:flex-end;gap:2px;height:9px}
.live-music-meter i{width:2px;height:45%;background:currentColor}
.live-music-meter i:nth-child(2){height:85%}
.live-music-meter i:nth-child(3){height:60%}
.live-music-meter i:nth-child(4){height:30%}
.live-music.is-sounding .live-music-meter i{animation:live-meter .8s ease-in-out infinite alternate}
.live-music.is-sounding .live-music-meter i:nth-child(2){animation-duration:.55s}
.live-music.is-sounding .live-music-meter i:nth-child(3){animation-duration:.95s}
.live-music.is-sounding .live-music-meter i:nth-child(4){animation-duration:.7s}
@keyframes live-meter{from{height:15%}to{height:100%}}

@media (prefers-reduced-motion:reduce){
  .live-music.is-sounding .live-music-meter i{animation:none}
}