/* ============================================================
   Ambient music control — Chopin, Nocturne in E minor, Op. 72 No. 1.
   A subtle, persistent pill at bottom-left. Collapsed to a small
   equalizer glyph; expands on hover/focus to name the piece. The
   bars animate only while playing. Tokens match the site palette
   (charcoal / cream / accent) — no emoji, SVG-free CSS bars.
   ============================================================ */
.music-player {
    position: fixed;
    left: clamp(16px, 3vw, 30px);
    bottom: clamp(16px, 3.2vh, 30px);
    z-index: 95;
    --mp-ink: #faf9f0;
    --mp-bg: rgba(15, 15, 14, 0.78);
    --mp-accent: #d65c39;
}
.music-player[hidden] { display: none; }

.music-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: 44px;                 /* WCAG 2.5.5 tap target */
    padding: 0 14px;
    border: 1px solid rgba(250, 249, 240, 0.16);
    border-radius: 999px;
    background: var(--mp-bg);
    color: var(--mp-ink);
    font-family: "JetBrains Mono", monospace;
    cursor: pointer;
    overflow: hidden;
    max-width: 44px;              /* collapsed: just the bars */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(250, 249, 240, 0.08);
    transition: max-width 0.55s cubic-bezier(.16,1,.3,1),
                transform 0.25s cubic-bezier(.16,1,.3,1),
                border-color 0.3s ease, background 0.3s ease;
}
.music-toggle:hover,
.music-toggle:focus-visible { max-width: 280px; border-color: rgba(214, 92, 57, 0.5); }
.music-toggle:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 3px; }
.music-toggle:active { transform: translateY(1px) scale(0.97); }

/* equalizer — four bars, animated only when the player is playing */
.music-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
.music-eq i {
    display: block;
    width: 2.5px;
    background: var(--mp-accent);
    border-radius: 2px;
    height: 30%;
    transform-origin: bottom;
}
.music-player[data-state="playing"] .music-eq i { animation: mp-bar 1s ease-in-out infinite; }
.music-player[data-state="playing"] .music-eq i:nth-child(1) { animation-delay: -0.9s; }
.music-player[data-state="playing"] .music-eq i:nth-child(2) { animation-delay: -0.55s; }
.music-player[data-state="playing"] .music-eq i:nth-child(3) { animation-delay: -0.25s; }
.music-player[data-state="playing"] .music-eq i:nth-child(4) { animation-delay: -0.7s; }
/* paused: bars rest low + dim, label/accent calm down */
.music-player[data-state="paused"] .music-eq i { height: 26%; opacity: 0.55; }
.music-player[data-state="paused"] .music-toggle { color: rgba(250, 249, 240, 0.7); }

@keyframes mp-bar {
    0%, 100% { height: 22%; }
    50%      { height: 100%; }
}

.music-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    white-space: nowrap;
    padding-left: 12px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.4s ease 0.05s, transform 0.45s cubic-bezier(.16,1,.3,1) 0.05s;
}
.music-toggle:hover .music-label,
.music-toggle:focus-visible .music-label { opacity: 1; transform: none; }
.music-piece {
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--mp-ink);
}
.music-by {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 249, 240, 0.55);
    margin-top: 1px;
}

/* On a light page the dark pill reads fine; nudge contrast just in case */
@media (prefers-reduced-motion: reduce) {
    .music-player[data-state="playing"] .music-eq i { animation: none; height: 60%; }
    .music-toggle { transition: none; }
}