/* On repeat: a record wall. Three rows of four, every sleeve on its own with room around it.
   Each record is three stacked renders from one overhead camera (scripts/render/vinyl_scene.py):
   vinyl + label under the sleeve. Hover or focus slides the record up out of the sleeve and the label
   spins up to 33 1/3. Sleeve art fills 74.76% of the render canvas. */

.records { position: relative; padding: clamp(40px, 6vh, 80px) var(--gutter) clamp(88px, 13vh, 160px); overflow: hidden; }
.records .rx-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line-d); padding-top: 22px; }
.records .rx-sub { font-size: 14px; opacity: .82; }

.rx-wall {
  --w: min(14.2vw, 226px);              /* visible sleeve width */
  --c: calc(var(--w) / .7476);          /* full render canvas */
  --lift: .34;                          /* how far the record slides out, in sleeve widths */
  list-style: none; display: grid; grid-template-columns: repeat(4, var(--w)); justify-content: center;
  column-gap: clamp(28px, 4.6vw, 80px); row-gap: clamp(44px, 6vh, 64px);
  padding-top: calc(var(--w) * var(--lift) + 30px); margin: 0;
}
.rx { position: relative; width: var(--w); z-index: 1; }
.rx:hover, .rx.on { z-index: 5; }

.rx-hit { display: grid; gap: 14px; width: 100%; text-align: left; cursor: pointer; }
.rx-hit:focus-visible { outline: none; }
.rx-hit:focus-visible .rx-cap b { text-decoration: underline; text-underline-offset: 4px; }
.rx-art { position: relative; display: block; width: var(--w); height: var(--w); }
.rx-art > * { pointer-events: none; }
.rx-art img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.rx-sleeve { width: var(--c); height: var(--c); left: calc((var(--w) - var(--c)) / 2); top: calc((var(--w) - var(--c)) / 2); transition: transform .8s var(--ease); z-index: 2; }
.rx-disc { position: absolute; width: var(--c); height: var(--c); left: calc((var(--w) - var(--c)) / 2); top: calc((var(--w) - var(--c)) / 2); z-index: 1;
  transform: translate3d(0, calc(var(--w) * -.06), 0); transition: transform .9s var(--ease); }
.rx-vinyl { inset: 0; width: 100%; height: 100%; }
.rx-label { width: 24.29%; height: 24.29%; left: 37.855%; top: 37.855%; will-change: transform; }

/* The pull */
.rx.on .rx-disc { transform: translate3d(0, calc(var(--w) * var(--lift) * -1), 0); }
.rx.on .rx-sleeve { transform: translate3d(0, 4px, 0); }

.rx-cap { display: grid; gap: 2px; min-height: 3.2em; }
.rx-cap .label { opacity: .55; }
.rx-cap b { font-weight: 700; font-size: 15px; line-height: 1.2; }
.rx-cap > span:last-child { font-size: 13px; opacity: .62; }
.rx.mine .rx-cap .label { opacity: 1; }

/* Dealt onto the wall when the section arrives */
.rx-js .rx { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.rx-js .rx-wall.in .rx { opacity: 1; transform: none; }

/* "Pick one" and the sticker on Cooper's own record */
.rx-tag { display: inline-block; margin-left: 8px; padding: 4px 10px 3px; border: 1px solid var(--bone); border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone); transform: rotate(-3deg); }
.rx-sticker { position: absolute; z-index: 3; right: -6px; top: -8px; padding: 6px 10px 5px; border-radius: 999px; background: var(--bone); color: var(--ink); font-weight: 700; font-size: clamp(9px, .8vw, 12px); letter-spacing: .06em; text-transform: uppercase; transform: rotate(8deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }

@media (max-width: 1100px) { .rx-wall { --w: min(19vw, 220px); column-gap: 3vw; } }
@media (max-width: 700px) {
  .rx-wall { --w: calc((100vw - var(--gutter) * 2 - 22px) / 2); --lift: .2; grid-template-columns: repeat(2, var(--w)); column-gap: 22px; row-gap: 48px; }
  .rx-cap b { font-size: 14px; }
  .rx-tag { margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-js .rx { opacity: 1; transform: none; transition: none; }
  .rx-disc, .rx-sleeve { transition: none; }
}

/* ---------- the belt (replaces the wall) ---------- */
.rx-belt { --w: clamp(170px, 15vw, 250px); margin: clamp(30px, 5vh, 56px) calc(var(--gutter) * -1) 0; overflow: hidden; padding-top: calc(var(--w) * .34 + 20px); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rx-belt:active { cursor: grabbing; }
.rx-track { list-style: none; display: flex; gap: clamp(26px, 3vw, 52px); width: max-content; padding: 0 var(--gutter); will-change: transform; }
.rx-belt .rx { --lift: .34; flex: none; width: var(--w); opacity: 1; transform: none; }
.rx-belt .rx-art img, .rx-belt .rx-hit { -webkit-user-drag: none; }
@media (max-width: 700px) { .rx-belt { --w: 150px; } .rx-belt .rx { --lift: .22; } }
/* Belt spacing: the render canvas is bigger than the sleeve, so make room for it on every side. */
.rx-belt { --c: calc(var(--w) / .7476); }
.rx-belt .rx-track { gap: clamp(36px, 4vw, 64px); }
.rx-belt .rx-hit { gap: 18px; }