/* Realism pass on the v3 record crate and turntable. Same layout and motion; the deck
   becomes a walnut plinth with a black top plate (the shape of a 1970s belt-drive deck),
   the arm gets its real parts, the record gets real groove structure, and each sleeve is
   printed card with its own wear. */

:root { --tex-walnut: url("../assets/tex/walnut.webp"); --tex-paper: url("../assets/tex/paper.webp"); --wear: url("../assets/tex/sleeve-wear.webp"); --tex-cloth: url("../assets/tex/cloth.webp"); }

.music-stage { position: relative; overflow-x: clip; display: grid; grid-template-columns: minmax(300px, 470px) 1fr; gap: 54px; align-items: start; }

/* ---------- deck ---------- */
.plinth { position: relative; width: 100%; aspect-ratio: 1.2; border-radius: 5px; container-type: inline-size;
  background: linear-gradient(135deg, rgba(255,236,205,.14), rgba(0,0,0,0) 40%, rgba(0,0,0,.25)), var(--tex-walnut) center / cover, #4a3020;
  box-shadow: inset 0 1px 0 rgba(255,232,196,.35), inset 1px 0 0 rgba(255,232,196,.15), inset 0 -2px 2px rgba(0,0,0,.35), 0 2px 0 #24160d, 0 3px 0 #3a2617, 0 32px 40px -24px rgba(30,15,5,.75), 0 8px 12px -6px rgba(30,15,5,.4); }
/* hinges for a dust cover that is not there */
.plinth::before, .plinth::after { content: ""; position: absolute; top: -3px; width: 34px; height: 8px; border-radius: 2px; background: linear-gradient(180deg, #e8e6e0, #8f8d88 60%, #5d5b57); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.plinth::before { left: 16%; } .plinth::after { right: 16%; }
.topplate { position: absolute; inset: 4.6% 3.8%; border-radius: 2px;
  background: radial-gradient(circle at 22% 70%, rgba(255,255,255,.09) 0 .5px, transparent 1px) 0 0 / 61px 47px, radial-gradient(circle at 70% 30%, rgba(255,255,255,.07) 0 .5px, transparent 1px) 0 0 / 83px 71px,
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 35%, rgba(0,0,0,.2)), var(--tex-cloth) 0 0 / 180px, #1f1d1b; background-blend-mode: normal, normal, normal, multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 1px rgba(255,255,255,.05), 0 0 0 1px rgba(255,232,196,.12); }
.platter { position: absolute; left: 6%; top: 8.5%; width: 69%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 10deg, #8d8b86, #eeece6 9%, #a09e98 20%, #d8d6d0 33%, #84827d 48%, #e4e2dc 61%, #9b9993 74%, #f3f1eb 87%, #8d8b86);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 10px 16px -6px rgba(0,0,0,.75), 0 2px 3px rgba(0,0,0,.5); }
.platter::before { content: ""; position: absolute; inset: 1.6%; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 96%, rgba(0,0,0,.45) 98%, transparent); }
.mat { position: absolute; inset: 3.2%; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), radial-gradient(circle closest-side, #3b3836, #2a2826 80%, #232120);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 2px 6px rgba(0,0,0,.5); }
.spindle { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #a9a7a0 45%, #55534f 80%); box-shadow: 1px 2px 2px rgba(0,0,0,.6); z-index: 3; }

.armbase, .arm { position: absolute; right: 5.5%; top: 6.5%; width: 23%; }
.armbase { z-index: 4; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.45)); }
.arm { transform-origin: 50% 13.33%; z-index: 5; filter: drop-shadow(var(--lift, 3px 6px 4px) rgba(0,0,0,.45)); }

/* switches sit bottom-right, where the platter curves away; sized to the deck so they never reach it */
.controls { position: absolute; right: 7%; bottom: 8.6%; display: flex; gap: 2.4cqi; align-items: center; z-index: 2; }
.rocker { width: 3.6cqi; height: 5.4cqi; border-radius: .4cqi; background: linear-gradient(180deg, #3a3734, #151413 48%, #2b2926 52%, #4a4743); box-shadow: 0 0 0 1px #0b0a09, 0 1px 0 rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.1); }
.rocker.on { background: linear-gradient(180deg, #4a4743, #2b2926 48%, #151413 52%, #3a3734); }
.pwr { width: 1.3cqi; height: 1.3cqi; border-radius: 50%; background: #4a201b; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.pwr.on { background: #ff7a55; box-shadow: 0 0 1.3cqi .2cqi rgba(255,110,70,.8); }
.rpm { font: 2cqi var(--mono); letter-spacing: .12em; color: rgba(236,226,206,.55); text-shadow: 0 -1px 0 rgba(0,0,0,.8); white-space: nowrap; }
.rpm b { font-weight: 400; color: rgba(236,226,206,.9); }
.badge { position: absolute; left: 7.5%; bottom: 8.8%; font: 1.8cqi var(--mono); letter-spacing: .26em; color: rgba(236,226,206,.42); text-shadow: 0 -1px 0 rgba(0,0,0,.8); z-index: 2; }

.now { margin-top: 22px; display: grid; gap: 2px; }
.np-label { color: var(--accent); } .np-title { font-family: var(--display); font-weight: 400; font-size: 24px; } .np-sub { color: var(--muted); font-style: italic; font-size: 17px; }
.np-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.np-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper-3); cursor: pointer; box-shadow: 0 3px 0 var(--ink); font-size: 13px; }
.np-btn:disabled { opacity: .4; cursor: default; } .np-btn:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.np-bar { flex: 1; height: 2px; background: var(--rule); position: relative; } .np-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }

/* ---------- the record ---------- */
.rec { position: relative; width: 100%; height: 100%; }
/* run-out, three track gaps, the lead-in and a bevelled rim, over fine grooves */
.vinyl { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 0 33%, #0a0a0a 33.4% 36.2%, transparent 36.4% 52.2%, rgba(52,52,52,.85) 52.4% 53%, transparent 53.2% 66.6%, rgba(52,52,52,.85) 66.8% 67.3%, transparent 67.5% 81.4%, rgba(52,52,52,.85) 81.6% 82%, transparent 82.2% 95.6%, #161616 95.8% 98.4%, #3a3a3a 99.1%, #0c0c0c 100%),
    repeating-radial-gradient(circle closest-side, #121212 0 .55px, #1d1d1d .8px 1.5px);
  box-shadow: 0 6px 12px -4px rgba(0,0,0,.6); }
/* the light on the grooves stays put while the record turns, with a faint rainbow from the groove pitch */
.sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -28deg, transparent 0 3%, rgba(255,255,255,.13) 8%, rgba(255,255,255,.03) 13%, transparent 19% 51%, rgba(255,255,255,.1) 57%, rgba(255,255,255,.02) 62%, transparent 68%),
    conic-gradient(from -28deg, transparent 0 6%, rgba(160,120,255,.06) 8%, rgba(110,230,190,.05) 10%, transparent 12% 55%, rgba(255,190,120,.05) 57%, rgba(150,130,255,.05) 59%, transparent 61%);
  -webkit-mask: radial-gradient(circle closest-side, transparent 36%, #000 38% 95%, transparent 96%); mask: radial-gradient(circle closest-side, transparent 36%, #000 38% 95%, transparent 96%); }
.vlabel { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-49.3%, -50.6%); border-radius: 50%; overflow: hidden; }
.vlabel svg { display: block; width: 100%; height: 100%; }

/* ---------- sleeves ---------- */
.crate { display: grid; gap: 30px; }
.bin-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 46px; padding: 10px 48px 0 0; }
.sleeve { position: relative; width: 100%; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer; transform: rotate(var(--rot, 0deg)) translate(var(--dx, 0), var(--dy, 0)); }
.sleeve:focus-visible { outline: none; } .sleeve:focus-visible .jacket { box-shadow: 0 0 0 2px var(--paper-3), 0 0 0 4px var(--accent); }
.peek { position: absolute; inset: 2.5%; transform: translateX(var(--peek, 18%)); transition: transform .4s cubic-bezier(.22,.8,.24,1); }
.sleeve:hover .peek, .sleeve:focus-visible .peek { transform: translateX(calc(var(--peek, 18%) + 12%)); }
.sleeve.empty .peek { visibility: hidden; }
.jacket { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; border-radius: 1.5px 2.5px 2.5px 1.5px; color: var(--jink); text-align: left; background: var(--sc);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18), 0 1px 1px rgba(0,0,0,.18), 0 16px 24px -16px rgba(40,25,10,.7); transition: transform .35s cubic-bezier(.22,.8,.24,1); }
.sleeve:hover .jacket { transform: translateY(-3px); }
/* card: paper grain over the print, the folded spine on the left, the open edge on the right */
.jacket::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.18) 1.2%, rgba(0,0,0,.06) 2.4%, transparent 4%, transparent 97.5%, rgba(0,0,0,.1) 99%, rgba(255,255,255,.12)), var(--tex-paper) var(--px, 0) var(--py, 0) / 240px; }
/* wear: ring, rubbed edges, corners and scuffs, from one texture turned differently on each sleeve */
.wear { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: var(--wear) center / 100% 100%; opacity: var(--w, .4); transform: rotate(var(--wr, 0deg)) scaleX(var(--wf, 1)); mix-blend-mode: screen; }
.jacket .art { position: absolute; inset: 0; }
.cat { position: absolute; z-index: 3; top: 7%; right: 7%; font: 4.71cqi var(--mono); letter-spacing: .14em; opacity: .75; }

/* I: duotone photograph */
.art-photo .art { background: center / cover no-repeat; }
.art-photo .t { position: absolute; z-index: 3; left: 8%; top: 7%; font: 400 8.82cqi/1.05 var(--display); color: #f1e7d0; text-shadow: 0 0.59cqi 0 rgba(0,0,0,.25); }
.art-photo .t small { display: block; margin-top: 2.35cqi; font: italic 6.76cqi var(--serif); opacity: .9; }
.art-photo .cat { color: #f1e7d0; }
/* II: the classical label look: card, a printed double frame, centred caps */
.art-frame .art { inset: 7%; border: 0.88cqi solid var(--jink); outline: .5px solid var(--jink); outline-offset: -2.9cqi; display: grid; place-content: center; text-align: center; gap: 3.53cqi; padding: 5.88cqi; opacity: .92; }
.art-frame .art b { font: 500 7.65cqi/1.25 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.art-frame .art i { font: italic 7.06cqi/1.2 var(--serif); }
.art-frame .art svg { width: 12.94cqi; height: 12.94cqi; margin: 1.18cqi auto 0; fill: none; stroke: currentColor; stroke-width: 2; }
.art-frame .cat { top: auto; bottom: 10%; right: 50%; transform: translateX(50%); font-size: 4.12cqi; }
/* III: a test pressing in a plain jacket, with a typed info slip and a rubber stamp */
.art-test .slip { position: absolute; z-index: 3; left: 12%; right: 16%; top: 16%; padding: 5.29cqi 5.88cqi 5.88cqi; transform: rotate(-1.2deg); background: var(--tex-paper) 0 0 / 94.12cqi, #fbf8f1; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 0.59cqi 0.59cqi rgba(0,0,0,.12); font: 5cqi/1.6 var(--mono); color: #2a2622; }
.art-test .slip b { display: block; font: 400 7.06cqi/1.2 var(--display); margin-bottom: 2.35cqi; }
.art-test .slip span { display: block; border-top: .5px solid rgba(0,0,0,.3); }
.art-test .stamp { position: absolute; z-index: 4; left: 22%; bottom: 13%; padding: 2.35cqi 4.71cqi 1.76cqi; transform: rotate(-7deg); border: 0.88cqi solid #8a2e3b; color: #8a2e3b; font: 6.18cqi/1 var(--mono); letter-spacing: .18em; opacity: .82;
  -webkit-mask: url("../assets/tex/foil-mask.webp") 0 0 / 70px; mask: url("../assets/tex/foil-mask.webp") 0 0 / 70px; }
/* IV: a moody photograph and very small type, the minimalist label look */
.art-quiet .art { background: center 60% / cover no-repeat; }
.art-quiet .t { position: absolute; z-index: 3; left: 8%; bottom: 8%; font: 5.29cqi/1.6 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #f1e7d0; }
.art-quiet .cat { color: #f1e7d0; opacity: .6; }
/* V: two inks, two hands, slightly off register */
.art-twoink .art::before, .art-twoink .art::after { content: ""; position: absolute; width: 54%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; }
.art-twoink .art::before { left: 12%; top: 14%; background: #b8433f; opacity: .88; }
.art-twoink .art::after { left: 33%; top: 23%; background: #d6a640; opacity: .85; }
.art-twoink .t { position: absolute; z-index: 3; left: 8%; bottom: 8%; font: 400 8.24cqi/1.05 var(--display); }
.art-twoink .t small { display: block; margin-top: 1.76cqi; font: 4.71cqi var(--mono); letter-spacing: .1em; opacity: .75; }
/* VI: four printed lines for four voices, with the notes they hold */
.art-voices .art { padding: 0 8%; display: grid; align-content: center; gap: 5.29cqi; }
.art-voices .art i { position: relative; display: block; height: 0.59cqi; background: color-mix(in srgb, var(--jink) 70%, transparent); }
.art-voices .art i::after { content: ""; position: absolute; top: -3px; left: var(--n); width: 4.71cqi; height: 3.53cqi; border-radius: 50%; background: var(--jink); transform: rotate(-20deg); }
.art-voices .t { position: absolute; z-index: 3; left: 8%; top: 7%; font: 400 8.82cqi/1.05 var(--display); }
.art-voices .t small { display: block; margin-top: 1.76cqi; font: italic 6.76cqi var(--serif); opacity: .85; }

/* things that happen to records */
.ding { position: absolute; z-index: 8; width: 9.41cqi; height: 9.41cqi; pointer-events: none; background: linear-gradient(45deg, transparent 46%, rgba(255,255,255,.55) 48%, rgba(0,0,0,.18) 54%, transparent 58%); }
.price { position: absolute; z-index: 8; top: 5%; left: 6%; padding: 1.76cqi 2.94cqi 1.18cqi; transform: rotate(-3deg); background: #fbf8f1; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0.59cqi 0.59cqi 0.59cqi rgba(0,0,0,.15); font: 4.71cqi var(--mono); color: #222; clip-path: polygon(0 0, 100% 0, 100% 70%, 84% 100%, 0 100%); }
.shrink { position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: linear-gradient(118deg, transparent 22%, rgba(255,255,255,.18) 27%, rgba(255,255,255,.04) 31%, transparent 36% 64%, rgba(255,255,255,.1) 68%, transparent 72%),
    linear-gradient(90deg, transparent 88%, rgba(255,255,255,.22) 88.4%, rgba(255,255,255,.08) 89%, transparent 89.6%); }
.hype { position: absolute; z-index: 10; right: 8%; top: 9%; width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(9deg);
  background: var(--tex-paper) 0 0 / 120px, #f3e9d2; box-shadow: 0 .6cqi .6cqi rgba(0,0,0,.25); font: 3.6cqi/1.35 var(--mono); letter-spacing: .08em; color: var(--accent); }
.hype::before { content: ""; position: absolute; inset: 1.76cqi; border-radius: 50%; border: .75px solid currentColor; }

.flyer { position: absolute; z-index: 3; pointer-events: none; will-change: transform, clip-path, filter; }

@media (max-width: 860px) {
  .music-stage { grid-template-columns: 1fr; gap: 30px; }
  .bin-row { display: flex; overflow-x: auto; gap: 34px; padding: 6px 40px 12px 2px; scrollbar-width: none; } .sleeve { flex: 0 0 150px; }
}
.art-photo .cat, .art-voices .cat { top: auto; bottom: 7%; }
.art-photo .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,15,15,.45), rgba(30,15,15,0) 38%); }