/* A record surrounded by paper sleeves; all dimensions follow the composition. */
.vinyl-feature-overlay { background: #02020be8; }
.fav-modal-vinyl {
  --record-angle: 0deg;
  width: min(1040px, 96vw); max-height: 96dvh;
  padding: 0 16px 20px; overflow-x: hidden;
  border: 1px solid #6d91a278; border-radius: 0;
  color: #eee8dd;
  background:
    linear-gradient(#00000012, #00000012),
    url('../../assets/music/chalkboard.webp') center / cover no-repeat,
    #101112;
  box-shadow: 0 25px 110px #000c;
  isolation: isolate;
}
.fav-modal-vinyl::before { display: none; }
.fav-modal-vinyl::after {
  display: block; inset: 11px; width: auto; height: auto; border: 0;
  background:
    linear-gradient(#7cbbca88,#7cbbca88) left top / 23px 1px no-repeat,
    linear-gradient(#7cbbca88,#7cbbca88) left top / 1px 23px no-repeat,
    linear-gradient(#7cbbca88,#7cbbca88) right bottom / 23px 1px no-repeat,
    linear-gradient(#7cbbca88,#7cbbca88) right bottom / 1px 23px no-repeat;
  z-index: -1;
}
.vinyl-orbit-header { position: relative; padding: 19px 58px 4px; text-align: center; }
.vinyl-orbit-header h2 {
  display: inline-block; margin: 0; padding: 0;
  font: 400 clamp(27px,4vw,45px)/1.18 'BlackCasperColor','RoyaleCouture',serif;
  font-palette: --ransom; text-transform: uppercase;
  letter-spacing: .03em; color: #eee8dd; background: none;
  filter: drop-shadow(2px 3px 0 #000); rotate: -2deg;
}
.vinyl-orbit-edition { display: none; }
.fav-modal-vinyl .fav-modal-close {
  position: absolute; top: 10px; right: 0; z-index: 6;
  width: 53px; height: 53px; border: 0; border-radius: 0; padding: 0;
  color: transparent; font-size: 0;
  background: url('../../assets/music/stop-close.svg?v=2') center / contain no-repeat;
  filter: drop-shadow(0 3px 3px #0008); cursor: pointer;
  transition: transform .2s;
}
.fav-modal-vinyl .fav-modal-close:hover { transform: scale(1.06); }
.vinyl-orbit-stage {
  position: relative; width: min(100%, calc((100dvh - 245px) * 1.111));
  min-width: min(100%, 360px); aspect-ratio: 1000 / 900; margin: 0 auto;
  container-type: inline-size; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.vinyl-orbit-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vinyl-wire { fill: none; stroke: #7998a4; stroke-width: 2; stroke-linecap: round; opacity: .72; transition: stroke .3s, stroke-width .3s; }
.vinyl-wire.is-selected { stroke: #7de5e3; stroke-width: 4; opacity: 1; }
.vinyl-orbit-record {
  position: absolute; left: 50%; top: 49.444%;
  width: 53%; aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; isolation: isolate;
  box-shadow: 0 0 0 3px #b5b8aa, 0 0 0 5px #181820, 5px 10px 0 #0007;
}
.vinyl-record-surface {
  position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background:
    repeating-radial-gradient(circle at center, transparent 0 2px, #e9e0ce14 2.3px 2.8px, #0003 3.2px 4.5px),
    linear-gradient(125deg, #202128ee 25%, #44464bdf 43%, #171821ef 54%, #262734ed 75%),
    url('../../icons/paper-texture.webp') center / cover;
  box-shadow: inset 0 0 0 2px #dad4c777, inset 0 0 0 8px #0d101780;
  transform: rotate(var(--record-angle)); transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.vinyl-record-surface::after {
  content: ''; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: url('../../assets/music/vinyl-wear.svg') center / contain;
  opacity: .5;
}
.vinyl-record-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-5deg);
  width: 32%; height: 32%; border: 3px solid #171a27; border-radius: 50%;
  padding: 2%; background: #eae6d9 url('../../icons/paper-texture.webp') center / 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #252036; cursor: pointer; box-shadow: 0 0 0 2px #cfc7b8;
}
.vinyl-label-caption { font: clamp(11px,2.4cqw,23px)/1 'Handwriting',cursive; white-space: nowrap; }
.vinyl-label-letter { font: 400 clamp(24px,5.5cqw,48px)/.95 'BlackCasperColor',serif; font-palette: --ransom; }
.vinyl-label-wave { display: block; width: 61%; height: auto; flex: 0 0 auto; }
.vinyl-label-count { font: 600 clamp(7px,1.2cqw,11px)/1.2 'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace; }
.vinyl-orbit-track {
  position: absolute; left: var(--tx); top: var(--ty); width: 23%; min-height: 8%;
  display: flex; align-items: flex-start; gap: 4px; border: 0; padding: 0;
  color: #ece9e8; background: none; text-align: left;
  font: 400 clamp(8px,1.4cqw,12px)/1.15 'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace; cursor: pointer;
}
.vinyl-orbit-track > span:first-child {
  flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; color: #161625; background: #eee9df;
  font: 600 10px/1 'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
}
.vinyl-orbit-track > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.vinyl-orbit-track.is-selected { color: #9aebeb; }
.vinyl-orbit-track.is-selected > span:first-child { background: #9aebeb; box-shadow: 0 0 0 3px #9aebeb26; }
.vinyl-orbit-sleeve {
  position: absolute; left: var(--x); top: var(--y); width: max(44px,14%); aspect-ratio: 1;
  padding: 0; background: none; border: none; cursor: pointer;
  transform: translate(-50%,-50%) rotate(var(--tilt));
  transition: transform .4s cubic-bezier(.2,1.2,.3,1), filter .3s;
  -webkit-tap-highlight-color: transparent;
}
.vinyl-orbit-sleeve::before {
  content: ''; position: absolute; inset: -7% -5%;
  border: 1px solid #9aacb5aa; border-radius: 36% 20% 27% 16% / 15% 30% 20% 37%;
  transform: rotate(-6deg); pointer-events: none;
}
.vinyl-orbit-sleeve::after {
  content: ''; position: absolute; right: -8%; bottom: 14%; width: 8%; aspect-ratio: 1;
  border-radius: 50%; background: #9aabb2; pointer-events: none;
}
.vinyl-sleeve-paper {
  position: absolute; inset: 0; display: block;
  background: #dcd5c1 url('../../icons/paper-texture.webp') center / 200px;
  padding: 5%; border: 0;
  clip-path: polygon(1% 1%,21% 0,39% 2%,60% 0,81% 1%,99% 0,100% 19%,98% 40%,100% 68%,99% 99%,80% 98%,64% 100%,39% 98%,17% 100%,0 98%,1% 75%,0 54%,2% 32%);
  filter: drop-shadow(3px 4px 0 #000);
}
.vinyl-sleeve-paper .vfan-cover { inset: 4%; width: 92%; height: 92%; filter: contrast(1.05) saturate(.92); }
.vinyl-sleeve-paper::after { content: ''; position: absolute; inset: 0; background: url('../../icons/paper-texture.webp') center / 180px; mix-blend-mode: multiply; opacity: .14; pointer-events: none; }
.vinyl-sleeve-fallback {
  position: absolute; inset: 5%; padding: 10%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background: repeating-linear-gradient(135deg,transparent 0 17%,#ffffff22 18% 23%),hsl(var(--h) 44% 43%);
  color: #fff4dc; font: 600 clamp(7px,1.4cqw,13px)/1.1 'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
}
.vinyl-sleeve-fallback > span { font: 32px/1 serif; }
.vinyl-sleeve-letter {
  position: absolute; left: -15%; top: -14%; width: 26%; aspect-ratio: 1;
  display: grid; place-items: center; border: 1px solid #293047; border-radius: 50%;
  background: #eee9df; color: #222333; font: 400 clamp(11px,1.8cqw,17px)/1 'RoyaleCouture',sans-serif;
}
.vinyl-orbit-sleeve:hover, .vinyl-orbit-sleeve:focus-visible, .vinyl-orbit-sleeve.is-selected {
  transform: translate(-50%,-54%) rotate(calc(var(--tilt) * .5)) scale(1.09); z-index: 4;
}
.vinyl-orbit-sleeve.is-selected { filter: drop-shadow(2px 0 #7de5e3) drop-shadow(-2px 0 #7de5e3) drop-shadow(0 2px #7de5e3); }
.vinyl-orbit-sleeve.is-selected .vinyl-sleeve-letter { background: #9aebeb; }
.vinyl-orbit-info { display: flex; align-items: center; justify-content: center; gap: 15px; max-width: 660px; margin: -4px auto 0; position: relative; z-index: 5; }
.vinyl-orbit-caption { flex: 1; min-width: 0; text-align: center; }
.vinyl-orbit-name { margin: 0; font: 400 clamp(19px,2.8vw,29px)/1.15 'RoyaleCouture',sans-serif; letter-spacing: .035em; color: #eee8dd; }
.vinyl-orbit-meta { margin: 8px 0 5px; font: 400 12px/1.5 'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace; color: #a8a5bb; }
.vinyl-orbit-listen { display: inline-block; padding: 3px 5px; font: 30px/1.25 'BlackCasperColor',serif; font-palette: --ransom; color: #eee8dd; text-decoration: none; rotate: -4deg; }
.vinyl-orbit-prev, .vinyl-orbit-next { flex: 0 0 44px; height: 44px; padding: 7px; border: 0; background: none; color: #86c9dc; cursor: pointer; }
.vinyl-orbit-prev svg, .vinyl-orbit-next svg { display: block; width: 100%; height: 100%; }
.vinyl-orbit-prev svg { transform: scaleX(-1); }
.fav-modal-vinyl button:focus-visible, .vinyl-orbit-listen:focus-visible { outline: 2px solid #91e4e4; outline-offset: 5px; }
.vinyl-orbit-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width:600px) {
  .fav-modal-vinyl { padding: 0 8px 20px; max-height: 94dvh; }
  .vinyl-orbit-header { padding: 24px 36px 18px 8px; }
  .vinyl-orbit-header h2 { padding: 0 0 4px; font-size: clamp(25px,7.7vw,36px); }
  .fav-modal-vinyl .fav-modal-close { width: 44px; height: 44px; right: 3px; top: 12px; font-size: 0; }
  .vinyl-orbit-edition, .vinyl-orbit-track { display: none; }
  .vinyl-orbit-stage { width: 100%; min-width: 0; }
  .vinyl-record-label { width: 45%; height: 45%; gap: 2px; }
  .vinyl-orbit-info { margin-top: 14px; gap: 8px; }
  .vinyl-orbit-meta { font-size: 11px; margin-block: 8px; }
  .vinyl-orbit-listen { min-height: 44px; padding-top: 5px; }
  .vinyl-orbit-prev, .vinyl-orbit-next { flex-basis: 44px; height: 44px; }
}
@media (prefers-reduced-motion:reduce) {
  .vinyl-record-surface, .vinyl-orbit-sleeve, .vinyl-wire, .fav-modal-vinyl .fav-modal-close { transition: none; }
}