/* ==========================================================================
   crate.css: "Dig through the crate" (3D record crate + info card)
   ========================================================================== */

.crate-sec { overflow: hidden; isolation: isolate; background: var(--teal); color: var(--cream); }
.crate-sec::before { /* halftone dots */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(246, 231, 200, .08) 1.2px, transparent 1.8px) 0 0 / 14px 14px;
}
.crate-sun {
  position: absolute; z-index: -2; left: 30%; top: 64%;
  width: 150vmax; height: 150vmax; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(246, 231, 200, .07) 0 5deg, transparent 5deg 10deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 8%, transparent 90%);
  mask-image: radial-gradient(circle closest-side, #000 8%, transparent 90%);
  animation: spin 220s linear infinite reverse;
}
.crate-sec .eyebrow { color: var(--mustard); }
.crate-sec .eyebrow::before { background: linear-gradient(var(--mustard) 0 33.3%, var(--orange) 33.3% 66.6%, var(--cream) 66.6%); }
.crate-sec h2 { color: var(--cream); text-shadow: 3px 3px 0 var(--orange), 6px 6px 0 var(--teal-deep); }
.crate-sec .sec-head > p:last-child { color: rgba(246, 231, 200, .9); }

.crate-layout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(28px, 5vw, 72px);
}

/* ---------- Stage ---------- */
.crate-stage {
  --S: clamp(210px, 60vw, 340px);      /* sleeve size */
  position: relative; display: none;
  height: calc(var(--S) * 1.72);
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.js .crate-stage { display: block; }
.crate-stage.is-dragging { cursor: grabbing; }
.crate-stage::after { /* floor shadow */
  content: ""; position: absolute; left: 50%; bottom: -16px; translate: -50% 0;
  width: calc(var(--S) * 1.45); height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent);
}
.crate-records { position: absolute; inset: 0; }

/* Each record: --d = distance behind the front one (set by crate.js) */
.rec {
  --d: 0;
  position: absolute; left: 50%; bottom: calc(var(--S) * .2);
  width: var(--S); height: var(--S); margin-left: calc(var(--S) / -2);
  transform-origin: 50% 100%;
  transform: perspective(1200px) translateY(calc((.14 + .13 * var(--d)) * var(--S) * -1)) scale(calc(1 - .06 * var(--d))) rotateX(6deg);
  transition: transform .8s var(--ease-soul), opacity .45s ease;
}
.rec::after { /* shade records further back */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 10px;
  background: #0b0503; opacity: calc(var(--d) * .1);
  pointer-events: none; transition: opacity .6s ease;
}
.rec.is-front { transform: perspective(1200px) translateY(calc(var(--S) * -.06)) scale(1) rotateX(-3deg); }
.rec.is-past { transform: perspective(1200px) translateY(calc(var(--S) * .08)) scale(1) rotateX(-82deg); opacity: 0; pointer-events: none; }
.rec.is-far { opacity: 0; pointer-events: none; }

.rec-sleeve {
  position: absolute; inset: 0; z-index: 2;
  display: block; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 10px; overflow: hidden;
  background: var(--cream); color: var(--sl-ink, var(--espresso));
  text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 18px 28px -14px rgba(0, 0, 0, .6);
  transition: translate .5s var(--ease-groove);
}
.rec-sleeve::after { /* grain, sheen, ring wear */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--noise),
    linear-gradient(118deg, rgba(255, 255, 255, .2), transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0, 0, 0, .08) 38.6% 39.6%, transparent 40.3%);
}
.rec-sleeve:focus-visible { outline: 4px solid var(--mustard); outline-offset: 4px; }
.rec.is-front:not(.is-pulled):hover .rec-sleeve { translate: 0 -8px; }
.rec-spine {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 8px; padding: 4.5% 6% 0;
  font: 700 calc(var(--S) * .036)/1 var(--f-type); letter-spacing: .1em; text-transform: uppercase;
}
.rec-title {
  position: absolute; left: 6%; right: 6%; top: 15%;
  font: 400 calc(var(--S) * .13)/.98 var(--f-display);
  text-shadow: .04em .04em 0 rgba(0, 0, 0, .22);
}
.rec-artist {
  position: absolute; left: 6%; right: 6%; bottom: 17%;
  font: 400 calc(var(--S) * .036)/1.2 var(--f-groove); letter-spacing: .14em; text-transform: uppercase;
}

.rec-vinyl {
  position: absolute; z-index: 1; left: 4%; top: 4%; width: 92%; height: 92%; border-radius: 50%;
  transition: transform .9s var(--ease-groove);
}
.rec-vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 236, 205, .16) 13%, transparent 19% 50%, rgba(255, 236, 205, .12) 58%, transparent 65%);
}
.rec-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, #150a05 0 1.8%, #2b190e 1.8% 3%);
  box-shadow: 0 0 0 2px #0b0503, 0 14px 24px -10px rgba(0, 0, 0, .7);
}
.rec-label {
  position: absolute; inset: 33%; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--lab, var(--orange)); color: var(--espresso);
  font: 400 calc(var(--S) * .03)/1 var(--f-groove); letter-spacing: .08em; text-transform: uppercase;
}
.rec-label span { max-width: 80%; translate: 0 -110%; }
.rec-label::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; translate: -50% -50%;
  border-radius: 50%; background: #0b0503;
}
.rec.is-front:not(.is-pulled):hover .rec-vinyl { transform: translateY(-10%); }
.rec.is-pulled .rec-vinyl { transform: translateY(-50%); }
.rec.is-pulled .rec-disc { animation: spin 1.8s linear infinite; }

/* Wooden crate front panel */
.crate-box {
  position: absolute; z-index: 300; left: 50%; bottom: 0; translate: -50% 0;
  width: min(calc(var(--S) * 1.24), 100%); height: calc(var(--S) * .36);
  display: grid; place-items: end center; padding-bottom: 7%;
  border-radius: 10px 10px 16px 16px;
  background:
    linear-gradient(180deg, transparent 0 49%, rgba(40, 18, 6, .35) 49% 51%, transparent 51%),
    repeating-linear-gradient(90deg, rgba(60, 25, 5, .1) 0 2px, transparent 2px 23px),
    linear-gradient(180deg, #cd8f4f, #a8662f);
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .4), inset 0 -6px 0 rgba(0, 0, 0, .2), 0 26px 40px -20px rgba(0, 0, 0, .7);
}
.crate-box::before { /* hand hole */
  content: ""; position: absolute; top: 16%; left: 50%; translate: -50% 0;
  width: 26%; height: 17%; border-radius: 999px;
  background: #3a1f10; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6);
}
.crate-box span {
  font: 400 calc(var(--S) * .045)/1 var(--f-groove); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(40, 18, 6, .7);
}

/* ---------- Sleeve artwork (one per record) ---------- */
.art-rock { --sl-ink: var(--espresso); --lab: var(--mustard); }
.art-rock .rec-sleeve { background: radial-gradient(circle at 50% 118%, var(--espresso) 0 20%, var(--rust) 20% 32%, var(--orange) 32% 44%, var(--mustard) 44% 56%, transparent 56%), var(--cream); }
.art-blues { --sl-ink: var(--cream); --lab: var(--mustard); }
.art-blues .rec-sleeve { background: radial-gradient(circle at 76% 70%, var(--mustard) 0 11%, transparent 11.5%), repeating-radial-gradient(circle at 76% 70%, #1d5c57 0 12px, var(--teal-deep) 12px 24px); }
.art-jazz { --sl-ink: var(--mustard); --lab: var(--orange); }
.art-jazz .rec-sleeve { background: radial-gradient(circle at 72% 64%, var(--orange) 0 22%, transparent 22.5%), radial-gradient(circle, rgba(233, 169, 58, .5) 1.6px, transparent 2.2px) 0 0 / 11px 11px, var(--espresso); }
.art-funk { --sl-ink: var(--espresso); --lab: var(--cream); }
.art-funk .rec-sleeve { background: radial-gradient(circle at 50% 100%, var(--mustard) 0 20%, transparent 20.5%), repeating-conic-gradient(from 0deg at 50% 100%, var(--orange) 0 9deg, var(--orange-2) 9deg 18deg); }
.art-reggae { --sl-ink: var(--cream); --lab: var(--mustard); }
.art-reggae .rec-sleeve { background: radial-gradient(circle at 50% 66%, var(--cream) 0 13%, transparent 13.5%), linear-gradient(var(--avocado) 0 46%, var(--mustard) 46% 64%, var(--rust) 64% 82%, var(--brown) 82%); }
.art-metal { --sl-ink: var(--cream); --lab: var(--rust); }
.art-metal .rec-sleeve { background: linear-gradient(135deg, transparent 0 60%, var(--orange) 60% 65%, transparent 65% 69%, var(--mustard) 69% 74%, transparent 74%), repeating-linear-gradient(-45deg, #1a0e08 0 12px, #2f1a0f 12px 24px); }
.art-orch { --sl-ink: var(--rust); --lab: var(--teal-2); }
.art-orch .rec-sleeve { background: repeating-radial-gradient(circle at 50% 130%, transparent 0 16px, rgba(36, 19, 10, .5) 16px 18px), var(--cream); }
.art-dance { --sl-ink: var(--cream); --lab: var(--mustard); }
.art-dance .rec-sleeve { background: radial-gradient(circle at 72% 62%, var(--cream) 0 14%, transparent 14.5%), conic-gradient(var(--rust) 25%, #93300f 0 50%, var(--rust) 0 75%, #93300f 0) 0 0 / 34px 34px; }

/* ---------- Info card ---------- */
.crate-panel {
  padding: clamp(22px, 3vw, 36px); border-radius: 26px;
  background: var(--cream) var(--noise); color: var(--espresso);
  box-shadow: 0 6px 0 var(--mustard), 0 12px 0 var(--orange), 0 34px 50px -22px rgba(0, 0, 0, .55);
}
.crate-panel :focus-visible { outline-color: var(--teal); }
.crate-count { display: flex; align-items: center; margin-bottom: .4rem; font: .82rem/1.2 var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
#crate-name { margin: 0 0 .7rem; font: 400 clamp(2.2rem, 4.5vw, 3.1rem)/1.02 var(--f-display); }
#crate-blurb { font-size: 1.05rem; }
.crate-credit { margin: 0; padding-top: .9rem; border-top: 2px dashed rgba(36, 19, 10, .2); font: .84rem/1.5 var(--f-type); }
.crate-controls { display: none; align-items: center; gap: 10px; margin: 1.4rem 0 1.2rem; }
.js .crate-controls { display: flex; }
#crate-pull { flex: 1; min-width: 0; padding-inline: 1em; }
.round-btn {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border: 0; border-radius: 50%; background: var(--espresso); color: var(--cream);
  font-size: 1.3rem; cursor: pointer;
  transition: transform .4s var(--ease-groove), background-color .25s;
}
.round-btn:hover { background: var(--rust); transform: scale(1.08) rotate(-8deg); }
.crate-index { list-style: none; padding: 0; margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 6px; }
.js .crate-index { margin-top: 0; }
.crate-index button {
  padding: .6em .85em; border: 1.5px solid rgba(36, 19, 10, .3); border-radius: 999px;
  background: transparent; color: var(--espresso);
  font: .7rem/1 var(--f-groove); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.crate-index button:hover { border-color: var(--espresso); }
.crate-index button[aria-current="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.crate-hint { display: none; margin: 1rem 0 0; font-size: .86rem; color: var(--ink-soft); }
.js .crate-hint { display: block; }

.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; margin-left: 10px; }
.eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--rust); transform-origin: bottom; transform: scaleY(.3); }
.crate-panel.is-playing .eq i { animation: eq .8s ease-in-out infinite alternate; }
.crate-panel.is-playing .eq i:nth-child(2) { animation-delay: -.25s; }
.crate-panel.is-playing .eq i:nth-child(3) { animation-delay: -.5s; }
.crate-panel.is-playing .eq i:nth-child(4) { animation-delay: -.7s; }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

@media (max-width: 900px) {
  .crate-layout { grid-template-columns: minmax(0, 1fr); }
  .crate-stage { margin-bottom: 12px; }
}