/* Music player — Figma index(music) 188:9585 / 204:11130 */

/* ─── Soundbar pulse animation ───────────────────────────────────
   When music is playing, each bar bounces with staggered delays
   to create a live equaliser effect. Triggered by JS adding
   .is-playing to #play-btn.
   ──────────────────────────────────────────────────────────────── */
@keyframes bar-bounce {
    0%, 100% { transform: scaleY(1);   }
    50%       { transform: scaleY(0.25); }
}

#play-btn.is-playing .bar {
    transform-origin: center;
    transform-box: fill-box;
}
#play-btn.is-playing .bar-1 { animation: bar-bounce 0.85s ease-in-out infinite 0.00s; }
#play-btn.is-playing .bar-2 { animation: bar-bounce 0.85s ease-in-out infinite 0.17s; }
#play-btn.is-playing .bar-3 { animation: bar-bounce 0.85s ease-in-out infinite 0.34s; }
#play-btn.is-playing .bar-4 { animation: bar-bounce 0.85s ease-in-out infinite 0.51s; }
#play-btn.is-playing .bar-5 { animation: bar-bounce 0.85s ease-in-out infinite 0.68s; }

/* ─── Music stack (the floating panel container) ─────────────────
   Lives inside .bottom-bar__music so it inherits the hover zone.
   JS adds/removes .is-open — CSS handles the visual transition.
   ──────────────────────────────────────────────────────────────── */
#music-stack {
    position: absolute;
    right: 0;
    bottom: calc(100% + 16px);  /* floats above the play button */
    width: 269px;
    z-index: 46;
    pointer-events: none;       /* transparent until .is-open */
}

#music-stack.is-open {
    pointer-events: auto;
}

/* ─── Glow blob ──────────────────────────────────────────────────*/
#music-glow {
    position: absolute;
    right: -200px;
    bottom: -80px;
    width: min(520px, 72vw);
    height: auto;
    aspect-ratio: 1672 / 1470;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    -webkit-mask-image: radial-gradient(ellipse 68% 62% at 58% 62%, #000 0%, transparent 74%);
            mask-image: radial-gradient(ellipse 68% 62% at 58% 62%, #000 0%, transparent 74%);
}

#music-stack.is-open #music-glow {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.music-glow__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 75%;
    display: block;
}

/* ─── Player card ────────────────────────────────────────────────*/
#music-player {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity   0.35s ease,
        visibility 0s linear 0.35s,
        transform  0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

#music-player.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}

/* ─── Thumbnail strip ────────────────────────────────────────────*/
.music-player__thumbs {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.music-player__thumb {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 5.333px;
    overflow: hidden;
    opacity: 0.5;
    cursor: pointer;
    background: #111;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.music-player__thumb.is-active {
    opacity: 1;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--brand);
}

.music-player__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Album art ──────────────────────────────────────────────────*/
.music-player__art {
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.music-player__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.music-player__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(rgba(255,255,255,0.03) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px;
    filter: url(#music-paper-texture);
    opacity: 0.45;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ─── Meta (artist / title) ──────────────────────────────────────*/
.music-player__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.music-player__artist {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 14px rgba(0,0,0,0.65), 0 0 24px rgba(0,0,0,0.4);
}

.music-player__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

/* ─── Controls ───────────────────────────────────────────────────*/
.music-player__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.music-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-cream);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    color: var(--bg-cream);
    cursor: pointer;
    padding: 0;
    transition: background 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.music-player__btn:hover {
    background: rgba(0, 0, 0, 0.28);
    transform: scale(1.04);
}

.music-player__btn--side  { width: 32px; height: 32px; }
.music-player__btn--main  { width: 48px; height: 48px; }

.music-player__btn svg { display: block; }

/* ─── Bottom-bar music zone ──────────────────────────────────────
   position: relative gives #music-stack its anchor point.
   ──────────────────────────────────────────────────────────────── */
.bottom-bar__music {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ─── Soundbar / play button ─────────────────────────────────────*/
#play-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s;
    padding: 0;
    position: relative;
    z-index: 2;
}

#play-btn:hover { background: #2b2ecc; transform: scale(1.04); }
#play-btn svg   { display: block; }

/* ─── Responsive ─────────────────────────────────────────────────*/
@media (max-width: 720px) {
    #music-stack {
        right: 0;
        width: min(269px, calc(100vw - 32px));
    }

    #music-glow {
        right: -140px;
        bottom: -60px;
        width: min(420px, 95vw);
    }

    .music-player__art {
        width: min(200px, 56vw);
        height: min(200px, 56vw);
    }
}