:root {
  --counter-black: #14110F;
  --receipt-bone: #F2E6CF;
  --brass-weight: #B7893E;
  --appraisal-red: #D43C2F;
  --ledger-green: #2F6F55;
  --carbon-blue: #355C8C;
  --bruised-plum: #3A2538;
  --sticker-yellow: #F4C84A;
  --room-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--counter-black);
  color: var(--receipt-bone);
  font-family: 'Newsreader', serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .14;
  background-image: radial-gradient(var(--receipt-bone) .7px, transparent .7px), linear-gradient(120deg, transparent 0 47%, rgba(242, 230, 207, .08) 48% 50%, transparent 51%);
  background-size: 9px 9px, 100% 100%;
  mix-blend-mode: screen;
}

.appraisal-counter {
  position: relative;
  min-height: 500vh;
  background:
    radial-gradient(circle at 23% 9%, rgba(244, 200, 74, .24), transparent 24vw),
    radial-gradient(circle at 78% 70%, rgba(58, 37, 56, .8), transparent 36vw),
    linear-gradient(155deg, #0b0908 0%, var(--counter-black) 43%, #21151f 100%);
}

.lamp-falloff, .diagonal-counter {
  position: fixed;
  pointer-events: none;
}

.lamp-falloff {
  z-index: 0;
  left: -10vw;
  top: -18vh;
  width: 70vw;
  height: 70vh;
  background: radial-gradient(ellipse at center, rgba(242, 230, 207, .3), rgba(183, 137, 62, .12) 36%, transparent 70%);
  filter: blur(6px);
}

.diagonal-counter {
  z-index: 1;
  left: -18vw;
  top: 38vh;
  width: 140vw;
  height: 26vh;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, rgba(183, 137, 62, .12), rgba(242, 230, 207, .08), rgba(20, 17, 15, .9));
  border-top: 5px solid rgba(183, 137, 62, .7);
  border-bottom: 1px solid rgba(242, 230, 207, .18);
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
}

.perforation-field {
  position: fixed;
  z-index: 1;
  width: 34vw;
  height: 42vh;
  opacity: .2;
  background-image: radial-gradient(var(--receipt-bone) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  transform: rotate(-12deg);
}
.field-a { left: 5vw; bottom: 5vh; }
.field-b { right: -7vw; top: 20vh; }

.room {
  min-height: 100vh;
  position: relative;
  z-index: 3;
  padding: 8vw;
  display: grid;
  overflow: hidden;
}

.room-ledger {
  position: fixed;
  z-index: 8;
  top: 3vh;
  right: 2vw;
  display: flex;
  gap: 6px;
  transform: rotate(2deg);
}

.ledger-link {
  font-family: 'Chivo', sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--counter-black);
  background: rgba(242, 230, 207, .74);
  border: 1px dashed rgba(20, 17, 15, .5);
  padding: 8px 9px;
}
.ledger-link.active { background: var(--sticker-yellow); transform: translateY(5px) rotate(-3deg); }

.moving-gab-slip {
  position: fixed;
  z-index: 6;
  width: min(460px, 68vw);
  min-height: 132px;
  left: calc(12vw + var(--slip-x, 0px));
  top: calc(58vh + var(--slip-y, 0px));
  transform: rotate(calc(-8deg + var(--slip-rotate, 0deg))) scale(var(--slip-scale, 1));
  transition: transform .5s ease, filter .5s ease;
}

.gab-slip, .pinned-receipt {
  color: var(--counter-black);
  background:
    linear-gradient(90deg, rgba(20,17,15,.1) 1px, transparent 1px) 0 0/28px 100%,
    linear-gradient(var(--receipt-bone), #ead7b7);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 0 35px rgba(183,137,62,.16);
  border: 1px solid rgba(20,17,15,.28);
}

.gab-slip::before, .gab-slip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image: radial-gradient(var(--counter-black) 2px, transparent 2px);
  background-size: 12px 16px;
  opacity: .45;
}
.gab-slip::before { left: -6px; }
.gab-slip::after { right: -6px; }

.slip-status {
  display: inline-block;
  margin: 16px 18px 3px;
  font-family: 'Chivo', sans-serif;
  color: var(--appraisal-red);
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .16em;
}
.slip-copy { display: block; padding: 0 22px 20px; font-size: clamp(22px, 3vw, 36px); line-height: .92; }
.carbon-ghost { position: absolute; right: 18px; bottom: 8px; color: var(--carbon-blue); opacity: .35; font-family: 'Chivo', sans-serif; font-size: 12px; }
.brass-tape { position: absolute; inset: auto 16% -10px 18%; height: 22px; background: rgba(183, 137, 62, .78); transform: rotate(-2deg) scaleX(0); transform-origin: left; transition: transform .7s ease; }

.mouth-room { grid-template-columns: 1fr 1.1fr; align-items: center; }
.room-number, .room-name, .slip-status { font-family: 'Chivo', sans-serif; }
.room-number { position: absolute; left: 8vw; top: 7vh; color: var(--brass-weight); letter-spacing: .2em; text-transform: uppercase; }
.brass-grille { align-self: start; margin-top: 16vh; width: 210px; height: 82px; border-radius: 50px; background: linear-gradient(#d0a755, var(--brass-weight)); padding: 18px; box-shadow: inset 0 5px 14px rgba(255,255,255,.25), 0 25px 45px rgba(0,0,0,.45); }
.brass-grille span { display: inline-block; width: 14px; height: 45px; margin: 0 8px; background: var(--counter-black); border-radius: 20px; opacity: .8; }
.stamped-title { transform: rotate(-4deg); justify-self: end; max-width: 720px; }
.domain-stamp { display: inline-block; margin: 0 0 18px; padding: 10px 16px; color: var(--appraisal-red); border: 5px double var(--appraisal-red); animation: stampLand .75s cubic-bezier(.2,1.6,.5,1) both; }
h1, h2 { font-family: 'Archivo Black', sans-serif; margin: 0; text-transform: uppercase; line-height: .82; }
h1 { font-size: clamp(54px, 10vw, 158px); text-shadow: 3px 3px 0 rgba(212,60,47,.45); }
h2 { font-size: clamp(54px, 9vw, 145px); }
.narrative-copy { max-width: 440px; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.05; }
.intro-copy { grid-column: 2; justify-self: center; margin-top: -3vh; }
.curiosity-ticket { grid-column: 2; justify-self: start; align-self: start; margin-left: 8vw; cursor: pointer; border: 0; background: var(--sticker-yellow); color: var(--counter-black); font-family: 'Chivo', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 16px 22px; transform: rotate(3deg); box-shadow: 7px 8px 0 var(--appraisal-red); }
.emitted-labels { position: absolute; left: 10vw; top: 33vh; display: flex; gap: 12px; opacity: 0; transform: translateY(18px); transition: .6s ease; }
.emitted-labels.released { opacity: 1; transform: translateY(0); }
.emitted-labels span { font-family: 'Chivo', sans-serif; background: var(--bruised-plum); color: var(--receipt-bone); border: 1px solid var(--brass-weight); padding: 7px 12px; border-radius: 20px; }
.receipt-blank { position: absolute; left: 7vw; bottom: 10vh; width: 280px; height: 90px; background: var(--receipt-bone); opacity: .3; transform: rotate(-17deg); }

.weighing-room { grid-template-columns: 1.1fr .9fr; align-items: center; }
.room-name { position: absolute; left: 6vw; top: 9vh; letter-spacing: .18em; text-transform: uppercase; color: var(--sticker-yellow); }
.scale-assembly { position: relative; height: 450px; }
.scale-arm { position: absolute; left: 8%; top: 42%; width: 70%; height: 12px; background: var(--brass-weight); transform: rotate(var(--arm-tilt, -7deg)); transition: transform .4s ease; box-shadow: 0 0 24px rgba(183,137,62,.5); }
.needle { position: absolute; left: 50%; top: -72px; width: 5px; height: 145px; background: var(--appraisal-red); transform-origin: bottom; transform: rotate(calc(var(--arm-tilt, -7deg) * -1)); }
.scale-pan { position: absolute; top: 55%; width: 180px; height: 52px; border-radius: 0 0 90px 90px; background: linear-gradient(#dfbd6f, var(--brass-weight)); color: var(--counter-black); font-family: 'Chivo', sans-serif; font-weight: 800; text-transform: uppercase; display: grid; place-items: center; }
.left-pan { left: 3%; transform: rotate(-5deg); }
.right-pan { left: 60%; transform: rotate(6deg); }
.brass-weight { position: absolute; left: 37%; top: 20%; border-radius: 50%; width: 145px; height: 145px; background: var(--brass-weight); color: var(--counter-black); display: grid; place-items: center; font-family: 'Archivo Black', sans-serif; box-shadow: inset -10px -12px 0 rgba(20,17,15,.18); }
.pinned-receipt { padding: 38px; position: relative; transform: rotate(3deg); }
.pinned-receipt p { font-size: clamp(24px, 2.6vw, 42px); line-height: 1.02; margin: 18px 0 0; }
.wax-loop { position: absolute; right: 24px; top: 22px; width: 110px; height: 74px; border: 7px solid var(--appraisal-red); border-radius: 50%; transform: rotate(-15deg); opacity: .75; }
.margin-hand { position: absolute; right: 7vw; bottom: 8vh; color: var(--sticker-yellow); font-size: 90px; transform: rotate(12deg); }

.ticker-room { align-items: center; }
.ticker-band { position: absolute; left: -5vw; top: 15vh; width: 115vw; display: flex; gap: 42px; white-space: nowrap; padding: 18px 0; background: var(--carbon-blue); color: var(--receipt-bone); font-family: 'Chivo', sans-serif; font-weight: 800; letter-spacing: .15em; transform: rotate(-6deg) translateX(var(--ticker-shift, 0)); box-shadow: 0 12px 0 rgba(20,17,15,.4); }
.hanging-tags { position: absolute; right: 8vw; top: 24vh; width: 45vw; height: 45vh; }
.price-tag { position: absolute; width: 150px; min-height: 150px; padding: 36px 15px 15px; background: var(--sticker-yellow); color: var(--counter-black); font-family: 'Chivo', sans-serif; text-transform: uppercase; text-align: center; clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); box-shadow: 8px 12px 0 rgba(212,60,47,.55); transform-origin: top center; }
.price-tag::before { content: ""; position: absolute; top: 14px; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--counter-black); transform: translateX(-50%); }
.price-tag strong { display: block; font-family: 'Archivo Black', sans-serif; font-size: 42px; }
.tag-one { left: 0; top: 8%; transform: rotate(-14deg); }
.tag-two { left: 32%; top: 38%; transform: rotate(9deg); }
.tag-three { right: 3%; top: 0; transform: rotate(16deg); }
.receipt-price { width: min(660px, 58vw); margin-top: 20vh; transform: rotate(-5deg); }
.cashier-numerals { position: absolute; left: 10vw; bottom: 10vh; color: var(--appraisal-red); font-family: 'Archivo Black', sans-serif; font-size: clamp(80px, 17vw, 240px); opacity: .6; }

.cost-room { grid-template-columns: .9fr 1.1fr; align-items: center; background: radial-gradient(circle at 70% 45%, rgba(58,37,56,.78), transparent 38vw); }
.cost-shadow { position: absolute; inset: 18vh 6vw 12vh 48vw; background: var(--bruised-plum); filter: blur(18px); opacity: .88; transform: rotate(8deg); }
.redaction-stack { position: relative; min-height: 320px; }
.redaction-stack span { display: block; width: 70%; height: 38px; margin: 36px 0; background: var(--counter-black); border: 1px solid rgba(242,230,207,.18); transform: rotate(var(--r, -3deg)); box-shadow: 0 0 0 6px rgba(212,60,47,.24); }
.redaction-stack span:nth-child(2) { --r: 5deg; width: 54%; margin-left: 18%; }
.redaction-stack span:nth-child(3) { --r: -8deg; width: 78%; margin-left: 6%; }
.receipt-cost { transform: rotate(5deg); background: linear-gradient(180deg, #ead7b7, var(--receipt-bone) 55%, rgba(58,37,56,.48)); }
.receipt-cost h2 { color: var(--appraisal-red); }
.correction-marks { position: absolute; right: 9vw; bottom: 8vh; display: flex; gap: 14px; }
.correction-marks span { border: 3px solid var(--appraisal-red); color: var(--appraisal-red); padding: 10px 12px; border-radius: 50%; font-family: 'Chivo', sans-serif; font-weight: 800; transform: rotate(-12deg); }

.worth-room { place-items: center; }
.worth-window { position: relative; width: min(760px, 78vw); min-height: 520px; padding: 60px; color: var(--receipt-bone); border: 12px solid var(--ledger-green); background: linear-gradient(145deg, rgba(53,92,140,.42), rgba(47,111,85,.24)), rgba(20,17,15,.76); box-shadow: inset 0 0 70px rgba(242,230,207,.15), 0 30px 90px rgba(0,0,0,.65); transform: rotate(-2deg); }
.window-glow { position: absolute; inset: 13%; background: radial-gradient(circle, rgba(244,200,74,.22), transparent 70%); }
.worth-window h2, .worth-window p { position: relative; z-index: 1; }
.worth-window p { font-size: clamp(30px, 4vw, 62px); line-height: .95; margin: 24px 0 0; }
.worth-window .filed-note { font-family: 'Chivo', sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: .16em; color: var(--sticker-yellow); }
.paid-stamp { position: absolute; left: 13vw; top: 16vh; color: var(--appraisal-red); border: 8px double var(--appraisal-red); padding: 12px 18px; font-family: 'Archivo Black', sans-serif; font-size: clamp(28px, 5vw, 78px); transform: rotate(-18deg); opacity: .84; }
.claim-ticket { position: absolute; right: 8vw; bottom: 11vh; width: 270px; padding: 22px; background: var(--receipt-bone); color: var(--counter-black); transform: rotate(8deg); font-family: 'Chivo', sans-serif; text-transform: uppercase; box-shadow: 8px 8px 0 var(--brass-weight); }
.claim-ticket span { display: block; color: var(--appraisal-red); margin-bottom: 9px; }

.room.is-visible .price-tag { animation: tagSlap .7s both; }
.room.is-visible .ticker-band { animation: tickerCrawl 5s linear infinite; }
.room.is-visible .wax-loop { animation: inkBleed 1.2s ease both; }
.room.is-visible .paid-stamp { animation: stampLand .7s cubic-bezier(.2,1.6,.5,1) both; }
.appraisal-counter.worth-state .brass-tape { transform: rotate(-2deg) scaleX(1); }
.appraisal-counter.cost-state .moving-gab-slip { filter: drop-shadow(20px 28px 0 rgba(58,37,56,.7)); }

@keyframes stampLand { from { opacity: 0; transform: translateY(-60px) rotate(9deg) scale(1.35); filter: blur(3px); } to { opacity: .9; transform: translateY(0) rotate(-3deg) scale(1); filter: blur(0); } }
@keyframes tagSlap { from { opacity: 0; transform: translateY(-80px) rotate(28deg) scale(1.4); } to { opacity: 1; } }
@keyframes tickerCrawl { from { background-position: 0 0; } to { background-position: 160px 0; } }
@keyframes inkBleed { from { box-shadow: 0 0 0 rgba(212,60,47,.1); } to { box-shadow: 0 0 34px rgba(212,60,47,.55); } }

@media (max-width: 760px) {
  .room { padding: 22vh 6vw 14vh; display: block; }
  .room-ledger { left: 2vw; right: 2vw; overflow-x: auto; }
  .moving-gab-slip { left: 8vw; top: 68vh; width: 82vw; }
  .brass-grille, .intro-copy, .curiosity-ticket { margin: 22px 0; }
  .scale-assembly { transform: scale(.78); transform-origin: left center; }
  .hanging-tags { position: relative; right: auto; top: auto; width: 100%; height: 330px; }
  .receipt-price { width: 100%; }
  .cost-room { background: var(--counter-black); }
}