.music-coverflow{position:relative;margin:20px 0 65px;--cover-size:clamp(190px,26vw,300px);--music-progress:0}
.music-cover-stage{height:calc(var(--cover-size) + 155px);position:relative;perspective:1200px;overflow:hidden;touch-action:pan-y}
.music-cover-stage::before{content:'';position:absolute;width:60%;height:20%;left:20%;bottom:5%;border-radius:50%;background:#0008;filter:blur(28px)}
.music .music-cover-card{position:absolute;left:50%;top:22px;width:var(--cover-size);height:var(--cover-size);display:block;border-radius:5px;transition:transform 1.1s cubic-bezier(.22,.7,.18,1),opacity .8s,filter .8s;transform:translate3d(calc(-50% + var(--cover-offset)*1%),var(--cover-drop),var(--cover-z)) rotateY(var(--cover-angle));opacity:var(--cover-opacity);z-index:var(--cover-order);filter:brightness(var(--cover-light));will-change:transform}
.music .music-cover-card .music-cover-image{display:block;width:100%;height:100%;object-fit:contain;background:#202123;border-radius:5px;transform:none;filter:none}
.music-cover-caption{text-align:center;min-height:100px;padding:5px 15px 0}
.music .music-cover-credit{margin:0 0 8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#c1b3d3}
.music .music-cover-title{font-size:clamp(23px,3vw,35px);letter-spacing:-.04em;line-height:1.15;display:inline-block}
.music .music-cover-title:hover{text-decoration:underline;text-underline-offset:5px}
.music .music-cover-artist{font-size:14px;line-height:1.4;color:#c8c4ce;margin:8px 0 0}
.music-cover-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin:18px 0 0}
.music-cover-controls button{width:44px;height:44px;display:grid;place-items:center;color:#ededea;background:transparent;border:1px solid #ffffff50;border-radius:50%;font-size:20px}
.music-cover-controls button:hover{background:#ffffff14}
.music-cover-timer{width:100px;height:2px;background:#ffffff25;overflow:hidden}
.music-cover-timer i{display:block;width:100%;height:100%;background:#c1b3d3;transform-origin:left;transform:scaleX(var(--music-progress));transition:transform 70ms linear}
.music-cover-count{font-size:10px;font-variant-numeric:tabular-nums;color:#c8c4ce;min-width:35px}
@media(max-width:600px){.music-coverflow{--cover-size:190px;margin:10px -15px 45px}.music-cover-stage{height:280px}.music-cover-caption{min-height:105px}}
@media(prefers-reduced-motion:reduce){.music .music-cover-card,.music-cover-timer i{transition:none;will-change:auto}}
.motion-paused .music .music-cover-card,.motion-paused .music-cover-timer i{transition:none}

/* Cover and mirrored image share the same animated parent; no box-reflect repaint. */
.music-cover-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,var(--cover-camera-lift,0px),0) rotateX(var(--cover-camera-x,0deg)) rotateY(var(--cover-camera-y,0deg));will-change:transform}
.music-cover-sleeve{position:relative;width:100%;height:100%;transform:translate3d(calc(var(--cover-pointer-x,0)*var(--cover-depth,1)*8px),calc(var(--cover-pointer-y,0)*var(--cover-depth,1)*5px),0) rotateX(calc(var(--cover-pointer-y,0)*-2deg)) rotateY(calc(var(--cover-pointer-x,0)*3deg));will-change:transform}
.music .music-cover-card .music-cover-image{box-shadow:0 24px 35px -10px #0009,0 0 0 1px #ffffff25}
.music-cover-reflection{position:absolute;left:0;top:calc(100% + 8px);width:100%;height:100%;pointer-events:none;opacity:.24;mask-image:linear-gradient(to bottom,#000,transparent 28%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 28%)}
.music .music-cover-card .music-cover-mirror{display:block;width:100%;height:100%;object-fit:contain;border-radius:5px;background:#202123;transform:scaleY(-1);filter:none}
@media(prefers-reduced-motion:reduce){.music-cover-scene,.music-cover-sleeve{transform:none!important;will-change:auto}}
.motion-paused .music-cover-scene,.motion-paused .music-cover-sleeve{transform:none!important;will-change:auto}

/* Covers further back in the 3D scene must still receive clicks. */
.music-cover-scene{pointer-events:none}