/* PPUZZL.bid v2 - Midnight Cabinet of Unclaimed Bids */
:root {
  --ink-marble: #07070C;
  --honed-marble: #14141C;
  --vein-pearl: #2A2A38;
  --velvet-burgundy: #3B1620;
  --neon-violet: #8A2BE2;
  --neon-violet-2: #B14BFF;
  --neon-cyan: #00F0D2;
  --ivory: #C8B999;
  --gold: #C9A961;

  --f-display: "Sora", "Inter", sans-serif;
  --f-mono: "Space Grotesk", "Inter", sans-serif;
  --f-serif: "Cormorant Garamond", "Lora", serif;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gap: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ink-marble);
  color: var(--ivory);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

body.cabinet {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='7' fill='none' stroke='%2300F0D2' stroke-width='1'/><circle cx='14' cy='14' r='2' fill='%2300F0D2'/></svg>") 14 14, default;
}

.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* === Bento grid === */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(72px, auto);
  gap: var(--gap);
  padding: var(--gap);
  min-height: 100vh;
  background: var(--ink-marble);
}

.cell {
  position: relative;
  background: var(--honed-marble);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--ease-out),
              transform 260ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}

.cell.in { opacity: 1; transform: translateY(0); }

.cell:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 28px rgba(138, 43, 226, 0.18),
              0 8px 32px rgba(7, 7, 12, 0.7);
}

.cell-01 { grid-column: 1 / 8; grid-row: 1 / 7; }
.cell-02 { grid-column: 8 / 13; grid-row: 1 / 4; }
.cell-03 { grid-column: 8 / 13; grid-row: 4 / 10; }
.cell-04 { grid-column: 1 / 6; grid-row: 7 / 13; }
.cell-05 { grid-column: 6 / 9; grid-row: 7 / 13; }
.cell-06 { grid-column: 1 / 9; grid-row: 13 / 19; }
.cell-07 { grid-column: 9 / 13; grid-row: 10 / 19; }

.marble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cell-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* === Lot tag (common) === */
.lot-tag {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.7;
  margin-bottom: 16px;
}

/* === Filigree === */
.filigree {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.filigree-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1800ms var(--ease-out),
              filter 320ms var(--ease-out);
  filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.35));
}

.cell.drawn .filigree-path {
  stroke-dashoffset: 0;
}

.cell:hover .filigree-path {
  filter: drop-shadow(0 0 8px rgba(0, 240, 210, 0.6));
}

.filigree-corners path,
.filigree-beads circle {
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 1400ms;
}

.cell.drawn .filigree-corners path,
.cell.drawn .filigree-beads circle {
  opacity: 1;
}

/* === Lot 001: Wordmark Vitrine === */
.cell-01-content {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 56px 48px;
}

.wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(48px, 7.4vw, 112px);
  letter-spacing: 0.32em;
  color: var(--ivory);
  line-height: 1;
  margin: 16px 0 12px;
  display: inline-flex;
  text-indent: 0.32em;
}

.wm-letter {
  display: inline-block;
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.6),
               0 0 18px rgba(138, 43, 226, 0.25);
  transition: text-shadow 320ms var(--ease-out), color 320ms var(--ease-out);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out),
              text-shadow 320ms var(--ease-out),
              color 320ms var(--ease-out);
}

.cell-01.in .wm-letter { opacity: 1; transform: translateY(0); }
.cell-01.in .wm-letter:nth-child(1) { transition-delay: 380ms, 380ms, 0ms, 0ms; }
.cell-01.in .wm-letter:nth-child(2) { transition-delay: 430ms, 430ms, 0ms, 0ms; }
.cell-01.in .wm-letter:nth-child(3) { transition-delay: 480ms, 480ms, 0ms, 0ms; }
.cell-01.in .wm-letter:nth-child(4) { transition-delay: 530ms, 530ms, 0ms, 0ms; }
.cell-01.in .wm-letter:nth-child(5) { transition-delay: 580ms, 580ms, 0ms, 0ms; }
.cell-01.in .wm-letter:nth-child(6) { transition-delay: 630ms, 630ms, 0ms, 0ms; }

.wm-letter:hover {
  text-shadow: 0 0 18px rgba(138, 43, 226, 0.95),
               0 0 32px rgba(177, 75, 255, 0.5);
  color: #EADFFF;
}

.wordmark-sub {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.78;
  margin-top: 8px;
}

.wm-amp {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
  font-size: 1.2em;
}

.wordmark-plate {
  margin-top: 28px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.5;
  padding: 8px 18px;
  border: 1px solid rgba(200, 185, 153, 0.18);
  border-radius: 1px;
}

/* === Lot 002: Countdown Drawer === */
.cell-02-content { justify-content: space-between; }

.countdown-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.55;
  margin-bottom: 6px;
}

.countdown {
  font-family: var(--f-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 38px);
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 240, 210, 0.55),
               0 0 24px rgba(0, 240, 210, 0.2);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.cd-group { display: inline-flex; align-items: baseline; }

.cd-num {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  transition: opacity 120ms ease;
}

.cd-num.flicker { opacity: 0.4; }

.cd-unit {
  font-size: 0.5em;
  margin-left: 3px;
  color: var(--ivory);
  opacity: 0.6;
}

.cd-sep {
  color: var(--neon-cyan);
  opacity: 0.6;
  margin: 0 2px;
}

.countdown-foot {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ivory);
  opacity: 0.6;
  margin-top: auto;
}

/* === Lot 003: Specimen Plate === */
.cell-03-content { justify-content: flex-start; }

.specimen-frame {
  position: relative;
  flex: 1;
  margin-top: 12px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}

.specimen-corners {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.specimen-image {
  flex: 1;
  position: relative;
  background: #07070C;
  margin: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.7);
}

.specimen-image svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(0.86) contrast(1.05);
}

.specimen-caption {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ivory);
  opacity: 0.65;
  text-align: center;
  margin: 8px 14px 0;
  letter-spacing: 0.02em;
}

/* === Lot 004: Provenance Scroll === */
.cell-04 {
  background: linear-gradient(135deg, var(--velvet-burgundy) 0%, var(--honed-marble) 70%);
}

.cell-04-content { justify-content: flex-start; }

.provenance {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ivory);
  margin-top: 12px;
}

.prov-word {
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
}

.prov-word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background: var(--velvet-burgundy);
  transition: width 300ms var(--ease-out);
}

.cell-04.scrolled .prov-word.lit::after { width: 100%; }

.provenance-sign {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  opacity: 0.7;
  margin-top: 18px;
  text-align: right;
}

/* === Lot 005: Sealed-Bid Index === */
.cell-05-content { padding: 24px; }

.damask-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
  opacity: 1;
}

.cell-05:hover .damask-overlay rect {
  fill: var(--neon-violet);
  opacity: 0.28;
}

.cell-05:hover .damask-overlay { opacity: 1; }

.index-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  margin-top: 8px;
  gap: 4px;
}

.idx-cell {
  position: relative;
  display: grid;
  grid-template-columns: 32px 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  color: var(--ivory);
  cursor: pointer;
  transition: color 240ms var(--ease-out);
}

.idx-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ivory);
  opacity: 0.45;
  font-weight: 500;
}

.idx-glyph {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  transition: color 240ms var(--ease-out), filter 240ms var(--ease-out);
}

.idx-glyph svg { width: 100%; height: 100%; }

.idx-name {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.7;
  font-style: italic;
  transition: opacity 240ms var(--ease-out), color 240ms var(--ease-out);
}

.idx-rule {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--neon-cyan);
  transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 4px rgba(0, 240, 210, 0.6);
}

.idx-cell:hover .idx-rule { width: 100%; }

.idx-cell:hover .idx-glyph {
  color: var(--neon-cyan);
  filter: drop-shadow(0 0 6px rgba(0, 240, 210, 0.55));
}

.idx-cell:hover .idx-name { opacity: 1; color: var(--neon-cyan); }

/* === Lot 006: Marble Map === */
.cell-06-content {
  justify-content: space-between;
  padding: 24px 32px;
}

.map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.map-routes .route {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 900ms var(--ease-out), opacity 280ms var(--ease-out);
  filter: drop-shadow(0 0 4px rgba(0, 240, 210, 0.5));
}

.map-routes .route.drawn {
  stroke-dashoffset: 0;
  opacity: 1;
}

.pin {
  cursor: pointer;
  pointer-events: all;
  transition: transform 320ms var(--ease-out);
}

.pin text { opacity: 0.55; transition: opacity 240ms var(--ease-out); }

.pin:hover circle:first-child { stroke: var(--neon-cyan); opacity: 1; }
.pin:hover circle:nth-child(2) { stroke: var(--neon-cyan); }
.pin:hover circle:nth-child(3) { fill: var(--neon-cyan); }
.pin:hover text { opacity: 1; fill: var(--neon-cyan); }

.map-caption {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ivory);
  opacity: 0.55;
  margin-top: auto;
  z-index: 3;
  position: relative;
}

/* === Lot 007: Auctioneer's Mark === */
.cell-07-content {
  align-items: center;
  justify-content: space-between;
  padding: 40px 32px;
  text-align: center;
}

.seal-wrap {
  width: clamp(140px, 14vw, 200px);
  height: clamp(140px, 14vw, 200px);
  margin: 12px auto;
  transition: filter 320ms var(--ease-out);
  cursor: pointer;
}

.wax-seal {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(0, 240, 210, 0.35));
  transition: filter 320ms var(--ease-out);
}

.seal-wrap:hover .wax-seal {
  filter: drop-shadow(0 0 12px rgba(0, 240, 210, 0.85));
}

.seal-monogram {
  transform-origin: 100px 110px;
  transition: transform 320ms var(--ease-out);
}

.seal-wrap:hover .seal-monogram {
  transform: rotate(1.5deg);
}

.seal-motto {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ivory);
  opacity: 0.7;
  margin: 6px 0 18px;
}

.seal-fine {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ivory);
  opacity: 0.65;
  margin-bottom: 18px;
}

.place-bid {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--neon-cyan);
  letter-spacing: 0.08em;
  padding: 10px 22px;
  border-top: 1px solid rgba(0, 240, 210, 0.3);
  border-bottom: 1px solid rgba(0, 240, 210, 0.3);
  transition: all 280ms var(--ease-out);
  text-shadow: 0 0 6px rgba(0, 240, 210, 0.4);
  cursor: pointer;
  user-select: none;
  margin-top: auto;
}

.place-bid:hover {
  color: #B0FFEF;
  border-color: var(--neon-cyan);
  text-shadow: 0 0 14px rgba(0, 240, 210, 0.95);
  letter-spacing: 0.14em;
}

.place-bid.activated {
  color: var(--gold);
  border-color: var(--gold);
  text-shadow: 0 0 10px rgba(201, 169, 97, 0.7);
}

/* === Custom cursor (extra layer for inside Lot 005) === */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: opacity 200ms;
  opacity: 0;
}

.custom-cursor.active { opacity: 1; }

.cursor-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 240, 210, 0.4);
}

.cursor-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px;
  height: 4px;
  background: var(--neon-cyan);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 200ms, height 200ms;
}

.custom-cursor.crosshair .cursor-dot {
  width: 12px;
  height: 12px;
  background: transparent;
  border: none;
  box-shadow:
    -6px 0 0 -5px var(--neon-cyan),
     6px 0 0 -5px var(--neon-cyan),
     0 -6px 0 -5px var(--neon-cyan),
     0  6px 0 -5px var(--neon-cyan);
}

/* === Tooltip === */
.tooltip {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--neon-cyan);
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(7, 7, 12, 0.92);
  border: 1px solid rgba(0, 240, 210, 0.3);
  opacity: 0;
  transform: translate(-50%, -150%);
  transition: opacity 200ms var(--ease-out);
  text-shadow: 0 0 4px rgba(0, 240, 210, 0.5);
}

.tooltip.show { opacity: 1; }

/* === Responsive === */
@media (max-width: 1024px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .cell-01 { grid-column: 1 / 7; grid-row: auto / span 6; }
  .cell-02 { grid-column: 1 / 4; grid-row: auto / span 3; }
  .cell-03 { grid-column: 4 / 7; grid-row: auto / span 5; }
  .cell-04 { grid-column: 1 / 7; grid-row: auto / span 5; }
  .cell-05 { grid-column: 1 / 4; grid-row: auto / span 6; }
  .cell-06 { grid-column: 4 / 7; grid-row: auto / span 6; }
  .cell-07 { grid-column: 1 / 7; grid-row: auto / span 6; }
}

@media (max-width: 768px) {
  .bento {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 16px;
  }
  .cell-01, .cell-02, .cell-03, .cell-04, .cell-05, .cell-06, .cell-07 {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 320px;
  }
  .cell-content { padding: 24px; }
  .wordmark { font-size: clamp(38px, 12vw, 64px); }
  .countdown { font-size: clamp(20px, 6vw, 30px); }
  body.cabinet { cursor: auto; }
  .custom-cursor { display: none; }
}