:root {
  --plum: #110B1C;
  --gold: #F2D28B;
  --rose: #C4456D;
  --violet: #6E4BFF;
  --mint: #39D6B5;
  --paper: #F8F1DC;
  --ink: #2B203D;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--plum);
  color: var(--paper);
  font-family: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .28;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(248,241,220,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(242,210,139,.07) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.035) 49% 51%, transparent 52%);
  background-size: 19px 23px, 31px 29px, 170px 170px;
  mix-blend-mode: screen;
}

.cursor-glow {
  position: fixed;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 45;
  background: radial-gradient(circle, rgba(57,214,181,.24), rgba(110,75,255,.12) 35%, transparent 68%);
  transform: translate3d(-999px,-999px,0);
}

.catalog { position: relative; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 88%, rgba(196,69,109,.18), transparent 38%),
    radial-gradient(ellipse at 78% 28%, rgba(110,75,255,.24), transparent 34%),
    linear-gradient(145deg, var(--plum), #0a0612 70%);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 7vh -10vw auto;
  height: 55vh;
  background: conic-gradient(from 180deg at 50% 0%, transparent, rgba(110,75,255,.18), transparent 32%, rgba(242,210,139,.08), transparent 58%);
  filter: blur(20px);
  opacity: .8;
  z-index: -1;
}

.lot-rail {
  position: fixed;
  z-index: 60;
  left: 24px;
  top: 7vh;
  bottom: 7vh;
  width: 30px;
  border-left: 1px solid rgba(242,210,139,.42);
}

.lot-rail::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: var(--rail-progress, 0%);
  background: var(--mint);
  box-shadow: 0 0 18px var(--mint);
}

.lot-rail span {
  position: absolute;
  left: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(242,210,139,.12);
}

.lot-rail span::after {
  content: attr(data-lot);
  position: absolute;
  left: 19px;
  top: -6px;
  color: var(--gold);
  font: 700 12px "Fraunces", Georgia, serif;
  letter-spacing: .08em;
}

.lot-rail span:nth-child(1) { top: 0; }
.lot-rail span:nth-child(2) { top: 25%; }
.lot-rail span:nth-child(3) { top: 50%; }
.lot-rail span:nth-child(4) { top: 75%; }
.lot-rail span:nth-child(5) { top: 100%; }

.pinned-label {
  position: absolute;
  left: 13vw;
  top: 16vh;
  z-index: 10;
  padding: 8px 34px;
  border: 1px solid rgba(242,210,139,.82);
  color: var(--gold);
  letter-spacing: .28em;
  text-transform: lowercase;
  font: 600 18px "Fraunces", Georgia, serif;
  background: rgba(17,11,28,.74);
  box-shadow: inset 0 0 18px rgba(242,210,139,.12), 0 12px 38px rgba(0,0,0,.38);
}

.curtain {
  position: absolute;
  top: -4vh;
  bottom: -4vh;
  width: 55vw;
  z-index: 4;
  background:
    radial-gradient(ellipse at 35% 20%, rgba(242,210,139,.12), transparent 24%),
    repeating-linear-gradient(90deg, #3b122b 0 28px, #1b0b22 31px 58px, #5e1c3e 61px 86px);
  box-shadow: inset 0 0 70px rgba(0,0,0,.62);
  transition: transform 1.2s cubic-bezier(.2,.8,.1,1);
}

.curtain-left { left: 0; border-radius: 0 0 44% 0; transform: translateX(calc(var(--curtain-open, 0) * -36vw)); }
.curtain-right { right: 0; border-radius: 0 0 0 44%; transform: translateX(calc(var(--curtain-open, 0) * 36vw)); }

.catalog-sheet, .manual-spread, .final-catalog {
  position: relative;
  width: min(560px, 82vw);
  padding: 38px 42px;
  background:
    radial-gradient(circle at 20% 20%, rgba(196,69,109,.08), transparent 30%),
    linear-gradient(135deg, var(--paper), #dfcfa8);
  color: var(--ink);
  border: 1px solid rgba(242,210,139,.5);
  box-shadow: 0 34px 80px rgba(0,0,0,.48), inset 0 0 0 10px rgba(43,32,61,.04);
}

.catalog-sheet::after, .manual-spread::after, .final-catalog::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(43,32,61,.23);
  pointer-events: none;
}

.opening-sheet { transform: rotate(-5deg) translate(-18vw, 8vh); z-index: 5; }
.slant-left { transform: rotate(4deg) translate(-10vw, 2vh); }
.orbit-caption { transform: rotate(-3deg) translate(-20vw, -18vh); }

.lot-number {
  margin: 0 0 10px;
  font: 800 18px "Fraunces", Georgia, serif;
  color: var(--rose);
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: "Cormorant Garamond", "Baskerville", "Times New Roman", serif;
  font-weight: 700;
  line-height: .86;
  margin: 0 0 22px;
  color: var(--plum);
}

h1 { font-size: clamp(64px, 11vw, 146px); letter-spacing: -.06em; }
h2 { font-size: clamp(54px, 9vw, 118px); letter-spacing: -.05em; }
p { font-size: clamp(17px, 2vw, 23px); line-height: 1.35; }

.hero-drawer {
  position: absolute;
  right: 8vw;
  bottom: 20vh;
  width: 330px;
  height: 155px;
  z-index: 3;
  transform: rotate(8deg);
  filter: drop-shadow(0 28px 45px rgba(0,0,0,.45));
}

.drawer-face {
  height: 100%;
  padding: 26px 30px;
  color: var(--gold);
  border: 2px solid rgba(242,210,139,.7);
  background: linear-gradient(160deg, #3b264e, var(--ink));
}

.drawer-face span { display: block; font: 800 16px "Fraunces", Georgia, serif; color: var(--mint); letter-spacing: .2em; }
.drawer-face strong { display: block; margin-top: 8px; font: 700 34px "Cormorant Garamond", Georgia, serif; }

.falling-files { list-style: none; margin: 0; padding: 0; position: absolute; left: -40px; top: -250px; width: 320px; }
.falling-files li {
  position: absolute;
  color: var(--mint);
  text-shadow: 0 0 16px var(--mint);
  font: 700 16px "Fraunces", Georgia, serif;
  animation: fall 5.5s linear infinite;
}
.falling-files li:nth-child(1) { left: 20px; animation-delay: -.5s; }
.falling-files li:nth-child(2) { left: 150px; animation-delay: -1.9s; }
.falling-files li:nth-child(3) { left: 80px; animation-delay: -3.2s; }
.falling-files li:nth-child(4) { left: 210px; animation-delay: -4.4s; }
.falling-files li:nth-child(5) { left: 35px; animation-delay: -2.7s; }

@keyframes fall { from { transform: translateY(-60px) rotate(-8deg); opacity: 0; } 15%,80% { opacity: 1; } to { transform: translateY(390px) rotate(14deg); opacity: 0; } }

.string-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.string-lines path { fill: none; stroke: rgba(242,210,139,.48); stroke-width: 1.2; stroke-dasharray: 8 10; }

.hanging-tag {
  position: absolute;
  width: 205px;
  padding: 28px 20px 18px;
  background: var(--gold);
  color: var(--ink);
  clip-path: polygon(0 12%, 45% 12%, 50% 0, 55% 12%, 100% 12%, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  animation: swing 4.6s ease-in-out infinite;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  font-weight: 700;
}
.hanging-tag span { display: block; font: 900 42px "Fraunces", Georgia, serif; color: var(--rose); }
.tag-a { left: 17vw; top: 15vh; transform: rotate(-7deg); }
.tag-b { right: 13vw; top: 18vh; animation-delay: -1.4s; transform: rotate(5deg); }
@keyframes swing { 0%,100% { rotate: -3deg; } 50% { rotate: 4deg; } }

.directory-columns {
  margin-top: 22px;
  display: grid;
  gap: 8px;
  color: #145d58;
  font: 700 15px "Fraunces", Georgia, serif;
  text-shadow: 0 0 12px rgba(57,214,181,.25);
}

.software-stack { position: absolute; right: 13vw; bottom: 12vh; width: 250px; height: 230px; transform: rotate(-8deg); }
.software-stack i { position: absolute; width: 165px; height: 195px; background: linear-gradient(145deg, var(--paper), #bba56f); border: 2px solid var(--gold); box-shadow: 18px 18px 0 rgba(0,0,0,.18); }
.software-stack i:nth-child(1) { left: 0; bottom: 0; }
.software-stack i:nth-child(2) { left: 48px; bottom: 24px; background: linear-gradient(145deg, var(--rose), #652842); }
.software-stack i:nth-child(3) { left: 92px; bottom: 52px; background: linear-gradient(145deg, var(--ink), #160d22); }

.manual-spread { width: min(690px, 86vw); transform: rotate(-2deg) translate(4vw, 0); }
.torn-strip { position: absolute; right: -50px; top: 38px; padding: 9px 20px; background: var(--rose); color: var(--paper); font: 800 14px "Fraunces", Georgia, serif; letter-spacing: .12em; transform: rotate(7deg); }
.wax-seal { position: absolute; left: 19vw; top: 22vh; width: 115px; height: 115px; display: grid; place-items: center; border-radius: 48% 52% 45% 55%; background: radial-gradient(circle, #e15c83, var(--rose)); color: var(--gold); z-index: 2; font: 900 36px "Fraunces", Georgia, serif; box-shadow: inset 0 -12px 25px rgba(0,0,0,.25), 0 16px 35px rgba(0,0,0,.35); }
.bid-cloud b { position: absolute; color: var(--mint); font: 800 25px "Cormorant Garamond", Georgia, serif; text-shadow: 0 0 17px var(--mint); opacity: .8; animation: dissolve 4s ease-in-out infinite; }
.bid-cloud b:nth-child(1) { left: -78px; bottom: 18px; }
.bid-cloud b:nth-child(2) { right: 34px; top: -42px; animation-delay: -1s; }
.bid-cloud b:nth-child(3) { right: -110px; bottom: 48px; animation-delay: -2s; }
.bid-cloud b:nth-child(4) { left: 32%; bottom: -48px; animation-delay: -3s; }
@keyframes dissolve { 0% { opacity: 0; transform: translateY(20px) rotate(-4deg); } 35%,65% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) rotate(5deg); } }

.reliquary-disk { position: absolute; right: 16vw; bottom: 12vh; width: 190px; height: 190px; padding: 24px; border: 2px solid var(--gold); background: rgba(43,32,61,.8); color: var(--gold); transform: rotate(11deg); }
.reliquary-disk span { display: block; height: 118px; background: linear-gradient(#2e3148 0 30%, #111 30% 38%, #575b77 38%); border-radius: 8px; }
.reliquary-disk em { display: block; margin-top: 12px; font-style: normal; text-align: center; }
.cursor-shadow { position: absolute; left: 8vw; bottom: 8vh; width: 210px; height: 70px; background: rgba(0,0,0,.35); clip-path: polygon(0 0, 100% 64%, 45% 80%, 32% 100%); filter: blur(3px); }

.orbit-system { position: absolute; right: 8vw; top: 12vh; width: min(650px, 76vw); height: min(650px, 76vw); }
.moon-artifact { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--paper), var(--gold) 42%, #9b6f39); color: var(--ink); box-shadow: 0 0 45px rgba(242,210,139,.45); font: 900 28px "Fraunces", Georgia, serif; }
.orbit { position: absolute; inset: 14%; border: 1px solid rgba(110,75,255,.8); border-radius: 50%; transform: rotateX(63deg) rotateZ(-18deg); box-shadow: 0 0 22px rgba(110,75,255,.35); }
.orbit-two { inset: 24%; transform: rotateX(63deg) rotateZ(23deg); border-color: rgba(57,214,181,.7); }
.paddle { position: absolute; width: 88px; height: 66px; display: grid; place-items: center; background: var(--paper); color: var(--ink); border-radius: 10px 10px 26px 26px; font: 900 18px "Fraunces", Georgia, serif; box-shadow: 0 16px 30px rgba(0,0,0,.32); animation: paddleFloat 7s ease-in-out infinite; }
.paddle::before { content: ""; position: absolute; left: 12px; top: -17px; width: 42px; height: 24px; background: inherit; border-radius: 8px 8px 0 0; }
.p1 { left: 12%; top: 25%; }
.p2 { right: 8%; top: 34%; animation-delay: -2s; }
.p3 { left: 32%; bottom: 7%; animation-delay: -4s; }
.p4 { right: 26%; bottom: 19%; animation-delay: -5s; }
@keyframes paddleFloat { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-28px) rotate(8deg); } }

.moths span { position: absolute; width: 18px; height: 10px; background: var(--mint); clip-path: polygon(50% 40%, 0 0, 20% 100%, 50% 50%, 80% 100%, 100% 0); filter: drop-shadow(0 0 8px var(--mint)); animation: moth 6s linear infinite; }
.moths span:nth-child(1) { left: 62vw; top: 30vh; }
.moths span:nth-child(2) { left: 72vw; top: 46vh; animation-delay: -2s; }
.moths span:nth-child(3) { left: 56vw; top: 58vh; animation-delay: -4s; }
@keyframes moth { 50% { transform: translate(28px,-24px) rotate(32deg); } }

.chamber-final { background: radial-gradient(circle at 72% 24%, rgba(248,241,220,.18), transparent 22%), linear-gradient(155deg, #0a0612, var(--plum) 54%, var(--ink)); }
.moon { position: absolute; right: 8vw; top: 10vh; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--paper), var(--gold) 55%, transparent 57%); opacity: .8; filter: blur(.2px); }
.final-catalog { transform: rotate(3deg) translate(-11vw, 4vh); }
.receipt-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.receipt-list span { padding: 8px 12px; background: rgba(43,32,61,.12); border: 1px dashed rgba(43,32,61,.35); font-weight: 800; }
.auctioneer { position: absolute; right: 20vw; bottom: 8vh; width: 210px; height: 250px; }
.auctioneer span { position: absolute; background: rgba(248,241,220,.2); border: 1px solid rgba(242,210,139,.5); }
.auctioneer span:nth-child(1) { width: 130px; height: 44px; top: 36px; left: 30px; transform: rotate(-10deg); }
.auctioneer span:nth-child(2) { width: 70px; height: 130px; top: 88px; left: 68px; }
.auctioneer span:nth-child(3) { width: 160px; height: 34px; bottom: 0; left: 10px; transform: skewX(-24deg); background: rgba(0,0,0,.28); }

.scene-enter .catalog-sheet, .scene-enter .manual-spread, .scene-enter .final-catalog { animation: paperIn .9s cubic-bezier(.2,.9,.15,1) both; }
@keyframes paperIn { from { opacity: .15; transform: translateY(80px) rotate(-10deg) scale(.94); } }

@media (max-width: 760px) {
  .lot-rail { display: none; }
  .opening-sheet, .slant-left, .orbit-caption, .final-catalog, .manual-spread { transform: rotate(-2deg); }
  .hero-drawer, .software-stack, .reliquary-disk, .auctioneer { opacity: .55; right: -60px; }
  .pinned-label { left: 8vw; top: 10vh; }
  .catalog-sheet, .manual-spread, .final-catalog { padding: 30px 28px; }
  .orbit-system { right: -28vw; opacity: .65; }
}