/* A single portrait artwork surface, with details blending into the image. */
.glass-card>.cover-button,.online-card.glass-card>button:first-child{position:relative;isolation:isolate;border:0;padding:0;border-radius:clamp(28px,3.3vw,44px);overflow:hidden;display:block;width:100%;aspect-ratio:2/3;background:var(--line);transform:translateZ(0)}
.glass-card>.cover-button>img,.online-card.glass-card>button:first-child>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .55s cubic-bezier(.2,.65,.3,1)}
/* Blur a copy of the artwork, so masked backdrop compositing cannot lose the frost. */
.card-glaze{position:absolute;z-index:1;inset:0;pointer-events:none;background:#ffffff16;mask-image:linear-gradient(transparent 25%,#000 58%);-webkit-mask-image:linear-gradient(transparent 25%,#000 58%);opacity:0;transition:opacity .3s}
.glass-card .card-glaze>img{display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;border-radius:0;filter:blur(20px) saturate(1.35);transform:scale(1.12);transition:none}
.card-glass{position:absolute;z-index:2;inset:auto 0 0;min-height:51%;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:35px 20px 18px;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.13) 32%,rgba(0,0,0,.32));opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .35s cubic-bezier(.2,.75,.25,1),visibility .25s;pointer-events:none}
.glass-card-copy{display:flex;flex-direction:column;gap:10px;min-width:0}.glass-card-copy strong{font-size:clamp(17px,1.5vw,23px);line-height:1.18;font-weight:750;letter-spacing:-.4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.glass-card-copy>span{font-size:13px;line-height:1.4;color:#fffffff0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.glass-card-copy small{align-self:flex-start;padding:5px 9px;border-radius:999px;background:#00000026;color:#ffffffed;font-size:10px;line-height:1.35;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glass-card-action{display:flex;justify-content:center;align-items:center;gap:7px;width:100%;min-height:43px;padding:10px 12px;border-radius:999px;background:#fff;color:#181b1a;font-size:12px;font-weight:700;white-space:nowrap}.glass-card-action .icon{width:14px;height:14px}
.glass-card:hover .card-glass,.glass-card:focus-within .card-glass{opacity:1;visibility:visible;transform:none}.glass-card:hover .card-glaze,.glass-card:focus-within .card-glaze{opacity:1}.glass-card:hover>.cover-button>img,.glass-card:focus-within>.cover-button>img,.online-card.glass-card:hover>button:first-child>img,.online-card.glass-card:focus-within>button:first-child>img{transform:scale(1.045)}
.online-grid:has(.glass-card){grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}.shelf:has(.glass-card){grid-auto-columns:calc((100% - 54px)/4);gap:18px}
.online-banner,.online-event-banner{border-radius:32px}.online-event-card{border-radius:24px}.record-page #main .song-row{border-radius:22px}
@media(max-width:1000px){.online-grid:has(.glass-card){grid-template-columns:repeat(3,minmax(0,1fr))}.shelf:has(.glass-card){grid-auto-columns:calc((100% - 36px)/3)}.card-glass{padding:30px 15px 14px;gap:13px}.glass-card-copy{gap:8px}.glass-card-copy>span{font-size:12px}.glass-card-action{min-height:39px;font-size:11px}}
@media(max-width:600px){.online-grid:has(.glass-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 14px}.shelf:has(.glass-card){grid-auto-columns:68%}.card-glass{padding:28px 13px 12px;gap:13px}.glass-card-copy strong{font-size:17px}.glass-card-copy>span{font-size:11px}.glass-card-copy small{font-size:9px;padding:4px 7px}.glass-card-action{min-height:36px;font-size:10px}.glass-card>.cover-button,.online-card.glass-card>button:first-child{border-radius:29px}}
@media(hover:none){.card-glass{opacity:1;visibility:visible;transform:none}.card-glaze{opacity:1}.glass-card:hover>.cover-button>img,.online-card.glass-card:hover>button:first-child>img{transform:none}}
html[data-reduce-transparency=true] .card-glaze{background:linear-gradient(transparent,#000b)}html[data-reduce-transparency=true] .card-glaze>img{display:none}html[data-reduce-transparency=true] .card-glass{background:linear-gradient(transparent,#0004)}
@media(prefers-reduced-motion:reduce){.card-glass,.card-glaze,.glass-card>.cover-button>img,.online-card.glass-card>button:first-child>img{transition:none}.glass-card:hover>.cover-button>img,.online-card.glass-card:hover>button:first-child>img{transform:none}}
html[data-reduce-motion=true] .card-glass,html[data-reduce-motion=true] .card-glaze,html[data-reduce-motion=true] .glass-card>.cover-button>img,html[data-reduce-motion=true] .online-card.glass-card>button:first-child>img{transition:none}
