/* Only transform and overlay opacity animate; no geometry or shadow interpolation. */
.depth-card{position:relative;isolation:isolate;overflow:visible!important;transform:perspective(900px) translateY(0) rotateX(0) rotateY(0);transition:transform 180ms ease-out!important}
.depth-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:0 18px 34px -12px #0009,0 0 0 1px rgba(var(--accent-rgb),.55),0 0 22px rgba(var(--accent-rgb),.13);opacity:0;transition:opacity 180ms ease-out;z-index:1}
.depth-card>.recording-cover{border-radius:11px 11px 0 0}
.depth-card.depth-active{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.depth-card.depth-active::after,.depth-card:focus-visible::after,.depth-card:focus-within::after,.depth-card.depth-lift::after{opacity:1}
.depth-card.depth-press{transform:perspective(900px) scale(.985)}
.depth-card.depth-lift{transform:perspective(900px) translateY(-2px)}
.depth-card:focus-visible{outline:3px solid var(--accent)!important;outline-offset:5px!important}
@media(prefers-reduced-motion:reduce){.depth-card,.depth-card.depth-active,.depth-card.depth-press,.depth-card.depth-lift{transform:none!important;transition:none!important}.depth-card:hover::after,.depth-card:active::after{opacity:1}.depth-card::after{transition:opacity 120ms linear}}