/**
 * Artful Stops — The Cabinet.
 *
 * A pinned curiosity cabinet after Chapter III: twelve labelled specimen
 * drawers (one per keeper) that open on scroll, plus a thirteenth marked
 * RESERVED. All motion is driven from artful-stops.js as inline transforms;
 * this file is the furniture — wood, brass, paper, and the dark room around
 * it — plus the reduced-motion final state.
 *
 * The wrapper is a `.scene` (for the spine dot and chapter label) but opts
 * out of the kit's flex centring: a 320vh pin track needs a plain block
 * box, and `overflow: visible` — an overflow-hidden ancestor would break
 * the sticky stage inside it.
 */

.cab-wrap {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

.cab-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2vh;
  /* The dark room the cabinet stands in. */
  background:
    radial-gradient(120% 85% at 50% -10%, #2a1e13 0%, rgba(42,30,19,0) 55%),
    radial-gradient(140% 110% at 50% 45%, #1d140d 0%, #120c08 58%, #0b0705 100%);
}

/* Warm vitrine light falling from above the cabinet. */
.cab-light {
  position: absolute;
  inset: 0 0 auto;
  height: 46vh;
  pointer-events: none;
  background:
    radial-gradient(58% 100% at 50% 0%, rgba(255,206,138,.16), rgba(255,206,138,.05) 45%, transparent 72%);
}

.cab-head {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 6vw;
}

.cab-head .kicker {
  margin-bottom: 10px;
}

.cab-line {
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 300;
  line-height: 1.45;
  color: #d9cfbe;
  max-width: 46ch;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}

.cab-hint {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the cabinet itself ──────────────────────────────────────────────── */

.cabinet {
  position: relative;
  z-index: 2;
  width: min(920px, 88vw);
  border-radius: 5px;
  /* Walnut case: a warm vertical falloff over two grains — one broad and
     wavy, one tight — so the rails read as wood, not as flat brown. */
  background:
    repeating-linear-gradient(94deg,
      rgba(0,0,0,.10) 0 2px, transparent 2px 7px,
      rgba(255,196,120,.03) 7px 9px, transparent 9px 15px),
    repeating-linear-gradient(88deg,
      rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #462c19 0%, #38220f 45%, #2a190c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,205,140,.22),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 18px 50px rgba(0,0,0,.65),
    0 4px 14px rgba(0,0,0,.5);
}

/* Shadow pooling on the floor under the case. */
.cabinet::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -34px;
  height: 44px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.6), transparent 72%);
  filter: blur(5px);
  pointer-events: none;
}

.cab-crown {
  height: 16px;
  border-radius: 5px 5px 0 0;
  background:
    linear-gradient(180deg, #5a3a20 0%, #452b16 55%, #33200f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.35),
    inset 0 -2px 3px rgba(0,0,0,.55),
    0 3px 8px rgba(0,0,0,.5);
  position: relative;
  z-index: 4;
}

/* The light strip tucked under the crown, washing the top row. */
.cab-crown::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 100%;
  height: 26px;
  background: linear-gradient(180deg, rgba(255,196,120,.22), transparent);
  pointer-events: none;
}

.cab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 16px 6px;
}

.cab-base {
  height: 14px;
  margin-top: 8px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #2c1a0d, #1d1007);
  box-shadow:
    inset 0 1px 0 rgba(255,205,140,.12),
    inset 0 -2px 4px rgba(0,0,0,.6);
}

/* ── a drawer ────────────────────────────────────────────────────────── */

.cab-cell {
  position: relative;
  height: clamp(86px, 15.5vh, 148px);
  perspective: 620px;
}

/* The dark opening the drawer sits in. */
.cab-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(255,190,110,.13), transparent 62%),
    linear-gradient(180deg, #0e0905 0%, #1a110a 100%);
  box-shadow:
    inset 0 5px 12px rgba(0,0,0,.85),
    inset 0 -2px 6px rgba(0,0,0,.6),
    inset 2px 0 6px rgba(0,0,0,.5),
    inset -2px 0 6px rgba(0,0,0,.5);
  border-radius: 2px;
}

.cab-photo {
  position: absolute;
  inset: 12% 11% 27%;
  width: 78%;
  height: 61%;
  object-fit: cover;
  opacity: 0;
  transform: rotate(calc(var(--t, 0) * 1deg)) scale(1.12);
  box-shadow:
    0 0 0 2px rgba(238,228,208,.9),
    0 7px 16px rgba(0,0,0,.7);
  will-change: transform, opacity;
}

.cab-tag {
  position: absolute;
  left: 4%;
  bottom: 6.5%;
  max-width: 93%;
  padding: 2px 6px 3px;
  background: linear-gradient(180deg, #f4ecda, #e7dcc4);
  color: #4d3b26;
  font-size: 8px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(var(--r, 0deg)) translateY(6px);
  opacity: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
  will-change: transform, opacity;
}

/* The drawer front. Resting state is closed; artful-stops.js tips it down
   into the cabinet's shadow (origin at the bottom rail) as the drawer opens. */
.cab-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 100%;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.55);
  background:
    repeating-linear-gradient(93deg,
      rgba(0,0,0,.09) 0 2px, transparent 2px 6px,
      rgba(255,200,130,.04) 6px 8px, transparent 8px 13px),
    linear-gradient(180deg, #503321 0%, #402713 58%, #301c0d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,208,145,.2),
    inset 0 -4px 8px rgba(0,0,0,.4),
    0 3px 7px rgba(0,0,0,.45);
  will-change: transform, opacity;
}

/* Recessed panel bevel, so the face reads as a made thing. */
.cab-front::before {
  content: "";
  position: absolute;
  inset: 9% 7%;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.5),
    inset 0 -1px 0 rgba(255,200,130,.1),
    0 1px 0 rgba(255,200,130,.08);
}

.cab-label {
  position: absolute;
  top: 14%;
  left: 50%;
  max-width: 86%;
  transform: translateX(-50%) rotate(var(--r, 0deg));
  padding: 3px 7px;
  background: linear-gradient(180deg, #f4ecda, #e6dbc2);
  color: #43331f;
  font-size: 9px;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

.cab-pull {
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: 34px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: linear-gradient(180deg, #f0d287 0%, #b78c3e 45%, #6e4f1c 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,244,200,.85),
    inset 0 -1px 2px rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.6);
}

.cab-pull::before,
.cab-pull::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4dd9a, #7a5a22 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,.6);
}

.cab-pull::before { left: 3px; }
.cab-pull::after { right: 3px; }

/* ── the reserved drawer ─────────────────────────────────────────────── */

.cab-reserve {
  height: clamp(52px, 9vh, 84px);
  margin: 4px 16px 0;
  perspective: 700px;
}

.cab-velvet {
  position: absolute;
  inset: 14% 6% 30%;
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 50% 20%, #4a2430 0%, #33161f 55%, #240e14 100%);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.8),
    inset 0 -1px 3px rgba(150,70,90,.25);
}

.cab-pending {
  left: 50%;
  bottom: auto;
  top: 40%;
  max-width: 90%;
  transform: translateX(-50%) rotate(var(--r, 0deg)) translateY(6px);
  font-style: normal;
}

/* Engraved brass tag rather than a paper label. */
.cab-engraved {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 14px 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8f6c2e, #6b4d1b);
  color: #2c1d08;
  font-size: 9px;
  letter-spacing: .42em;
  text-transform: uppercase;
  text-indent: .42em;
  text-shadow: 0 1px 0 rgba(255,232,170,.35);
  box-shadow:
    inset 0 1px 1px rgba(255,240,190,.5),
    inset 0 -1px 2px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.55);
}

/* The reserved drawer's pull sits right of the tag. */
.cab-reserve .cab-pull {
  left: auto;
  right: 7%;
  bottom: 50%;
  transform: translateY(50%);
}

/* ── the counter ─────────────────────────────────────────────────────── */

.cab-counter {
  position: relative;
  z-index: 3;
  align-self: flex-end;
  margin-right: max(6vw, calc((100vw - 920px) / 2));
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

.cab-counter span {
  color: var(--sodium);
  font-weight: 700;
}

/* ── reduced motion: cabinet already open, nothing animates ──────────── */

.cab-reduced .cab-front {
  opacity: 0;
  pointer-events: none;
}

.cab-reduced .cab-photo {
  opacity: 1;
  transform: rotate(calc(var(--t, 0) * 1deg)) scale(1);
}

.cab-reduced .cab-tag {
  opacity: 1;
  transform: rotate(var(--r, 0deg));
}

.cab-reduced .cab-pending {
  transform: translateX(-50%) rotate(var(--r, 0deg));
}

.cab-reduced .cab-hint {
  display: none;
}

/* ── small screens: a tall two-column specimen cabinet ───────────────── */

@media (max-width: 640px) {
  .cab-wrap {
    height: 340vh;
  }

  .cab-pin {
    gap: 1.6vh;
  }

  .cab-line {
    font-size: .95rem;
    max-width: 34ch;
  }

  .cabinet {
    width: min(430px, 92vw);
  }

  .cab-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 12px 4px;
  }

  .cab-cell {
    height: clamp(64px, 9.6vh, 96px);
  }

  .cab-reserve {
    height: clamp(40px, 6.4vh, 60px);
    margin: 3px 12px 0;
  }

  .cab-label {
    font-size: 7.5px;
    padding: 2px 5px;
  }

  .cab-tag {
    font-size: 6.5px;
    max-width: 96%;
    padding: 2px 4px;
  }

  .cab-pull {
    width: 24px;
    height: 7px;
  }

  .cab-counter {
    font-size: 9px;
  }
}