.album{--album-size: 320px;--vinyl-size: 280px;--border-radius: 3px;--cover-translate: -10px;--cover-rotate: -2deg;--vinyl-translate: 50%;--vinyl-rotate: 360deg;--vinyl-rise-top: -50%;position:relative;width:var(--album-size);height:var(--album-size)}.album .cover{position:relative;width:100%;height:100%;border-radius:var(--border-radius);overflow:hidden;box-shadow:0 8px 16px #0000004d;z-index:2;transition:transform .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),box-shadow .5s ease}.album .cover img{width:100%;height:100%;object-fit:cover;display:block}.album .cover:before{content:"";position:absolute;top:0;left:0;width:100%;height:10%;background:linear-gradient(to bottom,rgba(255,255,255,.4) 1%,transparent 50%);pointer-events:none;z-index:3}.album .cover:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 4%),linear-gradient(225deg,rgba(162,162,162,.1) 0%,rgba(162,162,162,.2) 4%,rgba(255,255,255,.2) 6%,rgba(255,255,255,.6) 7%,rgba(255,255,255,.2) 7%,rgba(218,218,218,.04) 7%,transparent 6%),linear-gradient(45deg,rgba(14,14,14,.7),rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 4%,rgba(14,14,14,.2) 6%,rgba(255,255,255,.3) 7%,rgba(218,218,218,.4) 7%,transparent 8%);pointer-events:none;z-index:3}.album .cover .cover-fallback{width:100%;height:100%;display:grid;place-items:center;padding:16px;text-align:center;color:#fffffff2;font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.2}.album .vinyl{position:absolute;top:10px;right:0;width:var(--vinyl-size);height:var(--vinyl-size);border-radius:50%;background:conic-gradient(from 50deg at 50% 50%,transparent 46%,rgba(255,255,255,.1) 48%,rgba(255,255,255,.15) 51%,transparent 56%),conic-gradient(from 225deg at 50% 50%,transparent 46%,rgba(255,255,255,.1) 48%,rgba(255,255,255,.15) 51%,transparent 56%),repeating-radial-gradient(circle,rgba(120,120,120,.1) 0%,rgba(192,192,192,.01) 1px,transparent 1px,transparent 4px),#000;display:flex;justify-content:center;align-items:center;transform:translate(0) rotate(270deg);transition:transform .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 15px #00000080;z-index:1}.album .vinyl .vinyl-center-label{width:calc(var(--vinyl-size) / 2.8);height:calc(var(--vinyl-size) / 2.8);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:50%;box-shadow:0 0 0 5px #000}.album:hover .cover,.album.is-open .cover{transform:translate(var(--cover-translate)) rotate(var(--cover-rotate))}.album:hover .vinyl,.album.is-open .vinyl{transform:translate(var(--vinyl-translate)) rotate(var(--vinyl-rotate))}.album.album-slide-top .vinyl{top:calc((var(--album-size) - var(--vinyl-size)) / 2);left:calc((var(--album-size) - var(--vinyl-size)) / 2);right:auto;transform:translateY(0) rotate(0);transition:transform .6s ease-in-out}.album.album-slide-top:hover .cover,.album.album-slide-top.is-open .cover{transform:translateY(8px)}.album.album-slide-top:hover .vinyl,.album.album-slide-top.is-open .vinyl{transform:translateY(var(--vinyl-rise-top)) rotate(var(--vinyl-rotate))}.album.album-small{--album-size: 160px;--vinyl-size: 140px;--cover-translate: -5px;--cover-rotate: -1deg}.album.is-playing{animation:album-vinyl-spin var(--audio-spin-duration, 6s) linear infinite}.album.is-playing .cover,.album.is-playing:hover .cover,.album.is-playing.is-open .cover{transform:scale(.34);border-radius:50%;box-shadow:0 0 0 4px #000,0 0 8px #00000080;transition:transform .8s cubic-bezier(.4,0,.2,1),border-radius .8s cubic-bezier(.4,0,.2,1),box-shadow .8s ease}.album.is-playing .cover:before,.album.is-playing .cover:after{opacity:0;transition:opacity .4s ease}.album.is-playing .vinyl,.album.is-playing:hover .vinyl,.album.is-playing.is-open .vinyl{top:0;left:0;right:auto;width:var(--album-size);height:var(--album-size);transform:none;transition:top .8s cubic-bezier(.4,0,.2,1),left .8s cubic-bezier(.4,0,.2,1),width .8s cubic-bezier(.4,0,.2,1),height .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}.album.is-playing .vinyl-center-label{opacity:0}@keyframes album-vinyl-spin{to{transform:rotate(360deg)}}