/* A3 Crate Digging. Owned by Agent 4.
   Default (no JS, reduced motion, calm): a calm static list of records.
   .crate--deck (added by js/crate.js when motion is OK, or on request): a 3D crate you flip through. */

.crate [hidden] { display: none !important; }

/* ---------- Sleeve colours: one hue per record, OKLCH when supported ---------- */
.record {
  --rec-hue: 150;
  --chroma: 1;
  --cov-bg: var(--surface-2);
  --cov-0: var(--bg);
  --cov-1: var(--accent);
  --cov-2: var(--accent-2);
  --cov-3: var(--accent-3);
  --cov-ink: var(--bg);
  --cov-grad: linear-gradient(150deg, var(--surface-2), var(--bg));
}
:root[data-calm="on"] .record { --chroma: .35; }
@supports (color: oklch(0 0 0)) {
  .record {
    --cov-0: oklch(0.24 calc(0.06 * var(--chroma)) var(--rec-hue));
    --cov-1: oklch(0.80 calc(0.16 * var(--chroma)) var(--rec-hue));
    --cov-2: oklch(0.62 calc(0.15 * var(--chroma)) calc(var(--rec-hue) + 45));
    --cov-3: oklch(0.90 calc(0.08 * var(--chroma)) calc(var(--rec-hue) - 60));
    --cov-ink: oklch(0.18 0.03 var(--rec-hue));
    --cov-grad: linear-gradient(150deg, oklch(0.40 calc(0.12 * var(--chroma)) var(--rec-hue)), oklch(0.20 calc(0.07 * var(--chroma)) calc(var(--rec-hue) + 70)));
  }
  @supports (background: linear-gradient(in oklch, red, blue)) {
    .record {
      --cov-grad: linear-gradient(in oklch 150deg, oklch(0.40 calc(0.12 * var(--chroma)) var(--rec-hue)), oklch(0.20 calc(0.07 * var(--chroma)) calc(var(--rec-hue) + 70)));
    }
  }
}
:root[data-contrast="high"] .record {
  --cov-grad: linear-gradient(#000, #000);
  --cov-0: #000; --cov-1: var(--accent); --cov-2: var(--accent-2); --cov-3: #fff; --cov-ink: #000;
}

.record__cover { background: var(--cov-grad); overflow: hidden; }
.record__cover svg { display: block; width: 100%; height: 100%; }
.record__cover .c0 { fill: var(--cov-0); }
.record__cover .c1 { fill: var(--cov-1); }
.record__cover .c2 { fill: var(--cov-2); }
.record__cover .c3 { fill: var(--cov-3); }
.record__cover .s0 { stroke: var(--cov-ink); }
.record__cover .s1 { stroke: var(--cov-1); }
.record__cover .s2 { stroke: var(--cov-2); }
.record__cover .s3 { stroke: var(--cov-3); }

/* ---------- Toolbar ---------- */
.crate__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}
.crate__hint { margin: 0; color: var(--text-muted); max-width: var(--measure); }

.crate__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.75rem; min-width: 2.75rem; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.crate__btn:hover { border-color: var(--accent-2); }
.crate__btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.crate__btn:disabled { opacity: .45; cursor: not-allowed; }
.crate__btn[aria-pressed="true"] { border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); }
.crate__icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- List view (the default) ---------- */
.crate__region { position: relative; border-radius: var(--radius); }
.crate__region:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 6px; }

.crate__records {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.crate__box, .record__vinyl { display: none; }

.record {
  position: relative; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.record__inner { display: flex; flex-direction: column; height: 100%; }
.record__face--front { position: relative; }
.record__cover { aspect-ratio: 5 / 2; }
.record__label { padding: var(--space-4) var(--space-4) 0; }
.record__title {
  margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; color: var(--text);
}
:root[data-font="readable"] .record__title { font-family: var(--font-readable); }
.record__genre {
  margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2);
}
.record__genre::before { content: "\25CF"; margin-right: .5em; color: var(--accent); font-size: .7em; vertical-align: .15em; }

/* In the list, the notes panel is plain text, not glass. */
.crate:not(.crate--deck) .record__face--back.glass {
  background: none; border: 0; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.crate:not(.crate--deck) .record__face--back.glass::before,
.crate:not(.crate--deck) .record__face--back.glass::after { display: none; }
.record__face--back { padding: var(--space-3) var(--space-4) var(--space-5); }
.record__notes-label {
  margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.record__notes p { margin: 0 0 var(--space-2); color: var(--text); line-height: 1.55; max-width: var(--measure); }
.record__notes p:last-child { margin-bottom: 0; }

/* ---------- Crate view ---------- */
.crate--deck .crate__region { padding-block: var(--space-2); }

.crate--deck .crate__deck {
  --sleeve: min(20rem, calc(100vw - 80px));
  --lift: calc(var(--sleeve) * -0.42);
  --rest-x: 0px;
  --cur-x: 0px;
  --rest-turn: 0deg;
  position: relative;
  display: grid;
  padding-top: calc(var(--sleeve) * 0.5);
  padding-bottom: var(--space-3);
  perspective: 1500px;
  perspective-origin: 50% 10%;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.crate--deck .crate__deck.is-dragging { cursor: grabbing; }

.crate--deck .crate__records { display: grid; grid-template-columns: 1fr; gap: 0; justify-items: center; align-items: end; }

.crate--deck .record {
  grid-area: 1 / 1;
  width: var(--sleeve);
  overflow: visible;
  background: none; border: 0; border-radius: 0;
  transform-origin: 50% 100%;
  transform:
    translate3d(calc(var(--rest-x) + var(--d) * 0.7rem), calc(var(--d) * -0.75rem - var(--space-3)), calc(var(--d) * -40px))
    rotateY(var(--rest-turn)) rotateX(-9deg);
  opacity: 1;
}
.crate--deck .record.is-current {
  transform: translate3d(var(--cur-x), var(--lift), 60px) rotateY(0deg) rotateX(0deg);
  cursor: pointer;
}
.crate--deck .record.is-filed {
  transform: translate3d(var(--rest-x), 8%, 40px) rotateY(var(--rest-turn)) rotateX(55deg);
  opacity: 0;
}
.crate--deck .record.is-far { opacity: 0; visibility: hidden; }
.crate--deck .record:not(.is-current) .record__face--front { filter: brightness(.72) saturate(.85); }

.crate--deck .record__inner {
  display: grid; position: relative; z-index: 1;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(0deg);
}
.crate--deck .record.is-flipped .record__inner { transform: perspective(1400px) rotateY(180deg); }

.crate--deck .record__face {
  grid-area: 1 / 1;
  min-height: var(--sleeve);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.crate--deck .record__face--front {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--cov-grad);
  outline: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  outline-offset: -1px;
}
.crate--deck .record__cover { position: absolute; inset: 0; aspect-ratio: auto; }
.crate--deck .record__label {
  position: relative; margin: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--bg); border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgb(0 0 0 / .35);
}
.crate--deck .record__title { font-size: 1.05rem; }
.crate--deck .record__genre { margin-top: var(--space-1); font-size: .72rem; }

/* Dust and gloss: a soft specular hotspot that follows the pointer (set by crate.js). */
.crate--deck .record__face--front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), color-mix(in srgb, var(--text) 26%, transparent), transparent 42%),
    linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--text) 10%, transparent) 50%, transparent 62%),
    radial-gradient(circle at 20% 70%, color-mix(in srgb, var(--text) 8%, transparent) 0 1px, transparent 1.5px) 0 0 / 9px 11px;
  mix-blend-mode: soft-light;
}
:root[data-calm="on"] .crate--deck .record__face--front::after,
:root[data-contrast="high"] .crate--deck .record__face--front::after { display: none; }
:root[data-contrast="high"] .crate--deck .record__face { outline: 2px solid #fff; box-shadow: none; }

.crate--deck .record__face--back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border-radius: 4px;
}
.crate--deck .record__face--back.glass--strong {
  background: linear-gradient(var(--glass-fill-strong), var(--glass-fill-strong)), color-mix(in srgb, var(--surface) 55%, transparent);
}
.crate--deck .record__face--back.glass { border-radius: 4px; }
.crate--deck .record__notes { font-size: .92rem; }
.crate--deck .record__notes p { line-height: 1.5; }

/* The vinyl peeking out of the current sleeve. */
.crate--deck .record__vinyl {
  display: block; position: absolute; z-index: 0;
  top: 3%; left: 3%; width: 94%; aspect-ratio: 1; border-radius: 50%;
  --groove-color: var(--vinyl-groove);
  --groove-gap: 3;
  --sheen-angle: 35;
  --sheen-color: color-mix(in srgb, var(--text) 30%, transparent);
  background:
    radial-gradient(circle, var(--cov-ink) 0 2%, var(--cov-1) 2.5% 16%, var(--vinyl) 16.5% 100%);
  background:
    radial-gradient(circle, var(--cov-ink) 0 2%, var(--cov-1) 2.5% 16%, transparent 16.5%),
    repeating-radial-gradient(circle, var(--vinyl) 0 3px, var(--vinyl-groove) 3.5px 4px),
    var(--vinyl);
  box-shadow: 0 6px 18px rgb(0 0 0 / .5);
  opacity: 0;
  transform: translateX(0) rotate(0deg);
}
@supports (background: paint(grooves)) {
  .crate--deck .record__vinyl {
    background:
      radial-gradient(circle, var(--cov-ink) 0 2%, var(--cov-1) 2.5% 16%, transparent 16.5%),
      paint(grooves),
      var(--vinyl);
  }
}
.crate--deck .record.is-current .record__vinyl { opacity: 1; transform: translateX(24%) rotate(0deg); }
.crate--deck .record.is-current.is-flipped .record__vinyl { opacity: 0; transform: translateX(0); }

/* The crate itself: back wall behind the records, front wall in front of the resting ones. */
.crate--deck .crate__box {
  display: block; position: absolute; left: 50%; pointer-events: none;
  width: calc(var(--sleeve) * 1.32);
  translate: calc(-50% + var(--rest-x)) 0;
  --wood: color-mix(in srgb, var(--accent) 34%, var(--surface-2));
  --wood-dark: color-mix(in srgb, var(--accent) 22%, var(--bg-deep));
}
.crate--deck .crate__box--back {
  z-index: 0; bottom: calc(var(--sleeve) * 0.5);
  height: calc(var(--sleeve) * 0.16);
  width: calc(var(--sleeve) * 1.18);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(var(--wood-dark), var(--bg-deep));
}
.crate--deck .crate__box--front {
  z-index: 50; bottom: 0;
  height: calc(var(--sleeve) * 0.52);
  border-radius: 6px;
  background:
    linear-gradient(to bottom, transparent 0 31%, var(--wood-dark) 31% 34%, transparent 34% 64%, var(--wood-dark) 64% 67%, transparent 67%),
    linear-gradient(100deg, var(--wood), var(--wood-dark));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--text) 18%, transparent), 0 18px 40px rgb(0 0 0 / .55);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%;
}
.crate--deck .crate__box--front::before { /* hand hole */
  content: ""; position: absolute; top: 12%; left: 50%; translate: -50% 0;
  width: 26%; height: 11%; border-radius: 999px; background: var(--bg-deep);
  box-shadow: inset 0 3px 6px rgb(0 0 0 / .6);
}
.crate__stamp {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  border: 1px solid currentColor; padding: .15em .6em; border-radius: 3px; transform: rotate(-3deg);
}
:root[data-contrast="high"] .crate--deck .crate__box--front { background: #000; outline: 2px solid #fff; box-shadow: none; }

/* Controls under the crate. */
.crate--deck .crate__controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-5);
}
.crate__count { margin: 0; min-width: 4.5ch; text-align: center; font-family: var(--font-mono); color: var(--text-muted); }

/* Wide screens: the crate sits to the right, the pulled record turns to face you on the left. */
@media (min-width: 52rem) {
  .crate--deck .crate__deck {
    --sleeve: 19rem;
    --rest-x: calc(var(--sleeve) * 0.42);
    --cur-x: calc(var(--sleeve) * -0.62);
    --rest-turn: -24deg;
    --lift: calc(var(--sleeve) * -0.12);
    padding-top: calc(var(--sleeve) * 0.2);
    perspective-origin: 60% 0%;
  }
  .crate--deck .crate__box--front { width: calc(var(--sleeve) * 1.5); }
  .crate--deck .crate__box--back { width: calc(var(--sleeve) * 1.3); bottom: calc(var(--sleeve) * 0.5); }
}
@media (min-width: 72rem) {
  .crate--deck .crate__deck { --sleeve: 21rem; }
}
/* Very small screens: one record at a time. */
@media (max-width: 30rem) {
  .crate--deck .crate__controls { gap: var(--space-2); }
  .crate--deck .crate__count { order: -1; flex-basis: 100%; }
}
@media (max-width: 26rem) {
  .crate--deck .record.is-behind { opacity: 0; visibility: hidden; }
  .crate--deck .crate__btn { padding-inline: var(--space-3); }
}

/* ---------- Motion (only when motion is OK) ---------- */
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .record {
  transition: transform var(--dur-slow) var(--spring-soft), opacity var(--dur) var(--ease-out), visibility var(--dur);
}
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .record.is-current {
  transition: transform var(--dur-slow) var(--spring), opacity var(--dur) var(--ease-out);
}
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .record__inner {
  transition: transform var(--dur-slow) var(--spring-soft);
}
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .record__vinyl {
  transition: transform var(--dur-slow) var(--spring), opacity var(--dur) var(--ease-out);
}
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .crate__deck:hover .record.is-current:not(.is-flipped) .record__vinyl,
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .crate__region:focus-visible .record.is-current:not(.is-flipped) .record__vinyl {
  transform: translateX(34%) rotate(40deg);
}
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .crate__deck:hover .record.is-current:not(.is-flipped) .record__face--front,
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .crate__region:focus-visible .record.is-current:not(.is-flipped) .record__face--front {
  animation: crate-wobble 700ms var(--ease-out) 1;
}
:root[data-motion="full"]:not([data-calm="on"]) .crate--deck .crate__deck.is-dragging .record { transition: none; }
@keyframes crate-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.6deg); }
  55% { transform: rotate(1.1deg); }
  80% { transform: rotate(-.4deg); }
}

:root[data-motion="full"]:not([data-calm="on"]) .crate__btn {
  transition: transform var(--dur) var(--spring), border-color var(--dur-fast) var(--ease-out);
}
:root[data-motion="full"]:not([data-calm="on"]) .crate__btn:active:not(:disabled) { transform: scale(.93); transition-duration: 80ms; }

/* List cards get a gentle lift, only when motion is OK. */
:root[data-motion="full"]:not([data-calm="on"]) .crate:not(.crate--deck) .record { transition: transform var(--dur) var(--spring), border-color var(--dur-fast); }
:root[data-motion="full"]:not([data-calm="on"]) .crate:not(.crate--deck) .record:hover { transform: translateY(-3px); border-color: var(--accent-2); }

/* Scroll-driven: the crate slides and tilts into place as it enters the viewport. */
@supports (animation-timeline: view()) {
  :root[data-motion="full"]:not([data-calm="on"]) .crate--deck .crate__deck {
    animation: crate-arrive linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@keyframes crate-arrive {
  from { transform: perspective(1200px) translateY(3rem) rotateX(16deg); opacity: .35; }
  to { transform: none; opacity: 1; }
}

/* View Transitions: sleeves morph between crate and grid with a spring. */
::view-transition-group(*.crate-record) { animation-duration: 560ms; animation-timing-function: var(--spring-soft); }
::view-transition-old(*.crate-record),
::view-transition-new(*.crate-record) { animation-duration: 320ms; }

@media (forced-colors: active) {
  .crate--deck .record__label, .crate--deck .record__face--back { border: 1px solid CanvasText; }
}
@media print {
  .crate__toolbar, .crate__controls, .crate__box, .record__vinyl, .record__cover { display: none !important; }
  /* Whatever view is on screen, print the flat list with every liner note. */
  .crate__records { display: block !important; transform: none !important; perspective: none !important; height: auto !important; }
  .record, .record__inner, .record__face {
    position: static !important; transform: none !important; translate: none !important; rotate: none !important;
    opacity: 1 !important; visibility: visible !important; backface-visibility: visible !important;
    width: auto !important; height: auto !important; margin: 0 0 .75rem !important; break-inside: avoid;
  }
}

/* Keep the fanned records from causing sideways scroll on small screens. */
.crate--deck .crate__region { overflow-x: clip; overflow-clip-margin: var(--space-2); }
@media (max-width: 22rem) {
  .crate--deck .crate__flip .crate__icon { display: none; }
}