/* While a jingle plays: the KOMMUNISTIK / LIBERATION FRONT mark of the logo in place of artist and title, with the
   jingle meter at its right (jingle-meter-20261104-2.mjs). Small and muted like the song text, over it, so the two
   cross: the time left fades out as the mark fades in, the mark fades out as the next song comes. Two seconds before
   the jingle ends the red line and the words go first (is-jingle-ending), the meter stays to the end. The words stay
   for screen readers. */
.identity{position:relative}
.identity .artist,.identity .title{transition:color 600ms ease,filter 900ms ease}
.identity.is-jingle .artist,.identity.is-jingle .title{filter:opacity(0);transition:color 600ms ease,filter 700ms ease}
.jingle-mark{position:absolute;top:.55rem;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:1em;font-family:Montserrat,sans-serif;font-size:clamp(.5rem,1.7vw,.6rem);color:#9da6b4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 900ms ease,visibility 0s linear 900ms}
.identity.is-jingle .jingle-mark{opacity:1;visibility:visible;transition:opacity 1s ease}
.jingle-words{display:inline-flex;align-items:center;gap:1em;transition:opacity 300ms ease}
.identity.is-jingle-ending .jingle-words{opacity:0;transition:opacity 1.2s ease}
.jingle-divider{flex:none;width:1px;height:2.6em;background:#c81025;opacity:.8}
.jingle-name{display:flex;flex-direction:column;gap:.25em;font-weight:300;letter-spacing:.22em;line-height:1.25;text-align:left}
.jingle-line{display:block;white-space:nowrap}
.jingle-reversed-k{display:inline-block;letter-spacing:0;margin-right:.22em;transform:scaleX(-1)}
.jingle-meter{display:block;flex:none;width:1.75em;height:2.6em;opacity:.8}
@media(prefers-reduced-motion:reduce){.identity .artist,.identity .title,.jingle-mark,.jingle-words{transition:none!important}}
