/* SIDE A motion system: record / sleeve separation, then quiet control feedback. */
:root{--motion-out:cubic-bezier(.22,1,.36,1);--motion-soft:cubic-bezier(.16,1,.3,1);--motion-press:140ms;--motion-hover:220ms;--motion-record:480ms}
.album-card{perspective:1000px}
.vinyl{background-size:cover;background-position:center;transition:transform 480ms var(--motion-soft),opacity 200ms ease}
.vinyl[data-finish=photo]{background-size:108%;background-position:50% 50%}
.vinyl[data-finish=photo] .vinyl-label,.vinyl[data-finish=photo] .vinyl-grooves{display:none}
.vinyl-second{z-index:0;translate:28px -12px;scale:.94;rotate:9deg;opacity:.95}
.card-vinyl{background-size:cover;background-position:center}
.card-vinyl[data-finish=photo]{background-size:108%;background-position:center}
.card-vinyl[data-finish=photo] .card-vinyl-label,.card-vinyl[data-finish=photo]:before{display:none}
.card-vinyl-second{z-index:0;right:-1%;top:7%;width:75%;height:75%}
.card-art{transform-origin:50% 55%;background:color-mix(in srgb,var(--record-color) 12%,#0c0e0c);isolation:isolate}
.card-open .card-cover{position:relative;z-index:2;transform-origin:45% 50%;transition:transform var(--motion-record) var(--motion-soft),filter var(--motion-hover) ease;border-radius:2px}
.card-open:hover .card-cover{transform:none;filter:none}
.card-open:after{z-index:5;bottom:17px;transition:opacity 180ms ease,transform 260ms var(--motion-out);pointer-events:none}
.card-vinyl{position:absolute;z-index:1;width:78%;height:78%;right:2%;top:11%;border-radius:50%;opacity:0;transform:translateX(-32%) rotate(-80deg);background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--record-color) 82%,#e0e4d8),var(--record-color) 45%,color-mix(in srgb,var(--record-color) 65%,#050905) 100%);transition:transform var(--motion-record) var(--motion-soft),opacity 180ms ease;box-shadow:3px 8px 18px #0005}
.card-vinyl:before{content:'';position:absolute;inset:4px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0,transparent 1.2px,#0004 1.6px,transparent 2.5px),conic-gradient(from 15deg,transparent,#fff3 19%,transparent 30%,#0002 50%,#fff2 66%,transparent 80%);mask-image:radial-gradient(circle,transparent 22%,#000 24%)}
.card-vinyl-label{position:absolute;inset:36%;border-radius:50%;overflow:hidden;border:1px solid #ffffff40}
.card-vinyl{background-size:cover;background-position:center}
.card-open .card-vinyl-label img,.card-open:hover .card-vinyl-label img{width:100%;height:100%;object-fit:cover;transform:none;filter:saturate(.7);transition:none}
.card-vinyl-label>span{position:absolute;inset:43%;background:#0c100a;border-radius:50%;border:1px solid #ffffff66}
.card-light{position:absolute;z-index:4;inset:-50%;pointer-events:none;opacity:0;transform:rotate(-25deg);background:linear-gradient(110deg,transparent 38%,#fff0 43%,#ffffff20 50%,#fff0 57%,transparent 62%);transition:opacity var(--motion-hover) ease;mix-blend-mode:screen}
.card-index,.card-discs{z-index:6;transition:transform var(--motion-hover) var(--motion-out),opacity 180ms ease}
.feature-toggle{z-index:7;width:34px;height:34px;transition:transform var(--motion-hover) var(--motion-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.feature-icon{display:grid;place-items:center;transition:transform var(--motion-hover) var(--motion-out)}
.feature-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.card-title{transition:transform var(--motion-hover) var(--motion-out),color 160ms ease}
.color-dot{transition:transform var(--motion-hover) var(--motion-out)}
.round-button,.pill-button,.filter-chip,.view-switch button,.header-feature{transition:transform var(--motion-hover) var(--motion-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.text-link span,.header-feature span,.artist-card>span:last-child{display:inline-block;transition:transform var(--motion-hover) var(--motion-out)}
@media(hover:hover) and (pointer:fine){
  .album-card.is-hovered{z-index:3}
  .album-card.is-hovered .card-cover{transform:translate3d(-9%,0,24px) scale(.79) rotate(-6deg);filter:brightness(1.04)}
  .album-card.is-hovered .card-vinyl{opacity:1;transform:translateX(0) rotate(72deg)}
  .album-card.is-hovered .card-vinyl-second{transform:translateX(4%) rotate(105deg)}
  .album-card.is-hovered .card-light{opacity:1}
  .album-card.is-hovered .card-open:after{opacity:1;transform:translate(-50%,0)}
  .album-card.is-hovered .card-index{transform:translateY(-2px);opacity:.75}
  .album-card.is-hovered .card-discs{transform:translateY(-2px)}
  .album-card.is-hovered .card-title{transform:translateX(3px);color:#c7d7bb}
  .album-card.is-hovered .color-dot{transform:scale(1.5)}
  .feature-toggle:hover{transform:translateY(-2px) scale(1.14);background:#e8eddf;color:#182112;border-color:#e8eddf}
  .feature-toggle:hover .feature-icon{transform:translate(2px,-2px) rotate(5deg)}
  .feature-toggle[aria-pressed=true]:hover .feature-icon{transform:scale(1.08)}
  .round-button:hover,.pill-button:hover,.filter-chip:hover,.header-feature:hover{transform:translateY(-3px)}
  .view-switch button:hover{transform:translateY(-2px)}
  .text-link:hover span,.header-feature:hover span,.artist-card:hover>span:last-child{transform:translate(3px,-3px)}
  .artist-card:hover .artist-photo img{transform:scale(1.13) rotate(3deg)}
}
.feature-toggle:active,.round-button:active,.pill-button:active,.filter-chip:active,.view-switch button:active,.header-feature:active{transform:scale(.94);transition-duration:var(--motion-press)}
.card-open:active .card-cover{transform:scale(.96);transition-duration:var(--motion-press)}
@media(hover:none),(pointer:coarse){
  .card-open:hover .card-cover{transform:none;filter:none}
  .card-open:active .card-cover{transform:scale(.96)}
  .card-vinyl,.card-light{display:none}
  .feature-toggle{min-width:38px;min-height:38px}
}
@media(prefers-reduced-motion:reduce){
  .album-card.is-hovered .card-cover,.card-open:active .card-cover,.feature-toggle:hover,.feature-toggle:active,.round-button:hover,.round-button:active,.pill-button:hover,.pill-button:active,.filter-chip:hover,.filter-chip:active,.view-switch button:hover,.view-switch button:active,.header-feature:hover,.header-feature:active,.feature-toggle:hover .feature-icon,.album-card.is-hovered .card-title,.album-card.is-hovered .color-dot{transform:none}
  .card-vinyl,.card-light{display:none}
  .card-art{transform:none!important}
  .feature-toggle,.round-button,.pill-button,.filter-chip{transition:background-color 120ms ease,color 120ms ease!important}
}