:root {
  --black: #16110D;
  --cream: #F4E7C5;
  --red: #E33225;
  --yellow: #FFD84A;
  --plum: #4A1942;
  --brass: #A77728;
  --blue: #3366FF;
  --green: #6F8F53;
  --shadow: rgba(22, 17, 13, .72);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 216, 74, .14), transparent 20%),
    radial-gradient(circle at 82% 6%, rgba(227, 50, 37, .16), transparent 22%),
    linear-gradient(115deg, rgba(74, 25, 66, .72), rgba(22, 17, 13, .94) 50%, rgba(111, 143, 83, .18));
  z-index: -3;
}

.ambient-paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(244, 231, 197, .12) 8px 9px),
    repeating-radial-gradient(circle at 20% 30%, rgba(244, 231, 197, .25) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
  z-index: -2;
}

.barcode-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background: repeating-linear-gradient(90deg, transparent 0 16px, var(--cream) 16px 17px, transparent 17px 23px, var(--cream) 23px 26px);
  transform: skewX(-12deg);
  z-index: -1;
}

.counter-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(2deg);
  display: grid;
  gap: 10px;
  z-index: 20;
}

.nav-ticket {
  width: 112px;
  padding: 9px 10px;
  color: var(--black);
  background: var(--cream);
  font-family: "Chivo Mono", monospace;
  font-size: 10px;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--red);
  clip-path: polygon(6% 0, 100% 0, 94% 50%, 100% 100%, 6% 100%, 0 50%);
  transition: transform .25s ease, background .25s ease;
}

.nav-ticket span { display: block; color: var(--red); }
.nav-ticket.active { background: var(--yellow); transform: translateX(-10px) rotate(-4deg); }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 8vh 8vw;
  isolation: isolate;
  overflow: hidden;
}

.scene h1,
.scene h2,
.backward-sign,
.gold-decal {
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.scene h1 {
  position: absolute;
  left: 7vw;
  bottom: 9vh;
  max-width: 760px;
  margin: 0;
  color: var(--yellow);
  font-size: clamp(54px, 10vw, 150px);
  line-height: .78;
  text-shadow: 5px 0 0 var(--red), -4px 4px 0 var(--blue), 0 18px 38px var(--shadow);
}

.scene h2 {
  margin: 0;
  font-size: clamp(44px, 7vw, 104px);
  line-height: .84;
}

.scene p,
.quiet-text {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.05;
}

.glass-counter {
  position: absolute;
  left: -18vw;
  top: 55%;
  width: 140vw;
  height: 28vh;
  transform: rotate(-13deg);
  background: linear-gradient(180deg, rgba(244, 231, 197, .22), rgba(51, 102, 255, .07));
  border-top: 2px solid rgba(244, 231, 197, .6);
  border-bottom: 10px solid rgba(22, 17, 13, .5);
  box-shadow: inset 0 0 35px rgba(255,255,255,.08), 0 28px 60px rgba(0,0,0,.35);
  z-index: -1;
}

.glass-counter.reverse { transform: rotate(11deg); top: 48%; }

.shop-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 38%, rgba(244,231,197,.14) 39% 41%, transparent 42% 63%, rgba(51,102,255,.12) 64% 66%, transparent 67%);
}

.hanging-bell {
  position: absolute;
  top: 0;
  left: 51%;
  width: 2px;
  height: 120px;
  background: var(--brass);
  transform-origin: top;
  animation: bellTremble 1.4s ease both;
}

.hanging-bell span {
  position: absolute;
  left: -24px;
  bottom: -38px;
  width: 50px;
  height: 38px;
  border-radius: 50% 50% 12px 12px;
  background: radial-gradient(circle at 50% 80%, var(--yellow) 0 6px, var(--brass) 7px 100%);
  box-shadow: 0 6px 0 var(--black);
}

.backward-sign {
  position: absolute;
  top: 16vh;
  left: 10vw;
  color: transparent;
  -webkit-text-stroke: 2px var(--cream);
  font-size: clamp(72px, 14vw, 210px);
  transform: scaleX(-1) rotate(-4deg);
  opacity: .76;
}

.backward-sign::after {
  content: attr(data-ghost);
  position: absolute;
  inset: 5px auto auto 7px;
  color: rgba(227, 50, 37, .42);
  -webkit-text-stroke: 0;
}

.scene-kicker,
.shelf-label,
.lot-id,
.shelf-rail,
.price-gun-label {
  font-family: "Chivo Mono", monospace;
  text-transform: uppercase;
}

.scene-kicker {
  position: absolute;
  top: 10vh;
  right: 13vw;
  color: var(--green);
  letter-spacing: .18em;
}

.window-copy {
  position: absolute;
  right: 9vw;
  bottom: 27vh;
  width: min(390px, 42vw);
  color: var(--cream);
}

.price-gun-label {
  display: inline-block;
  background: var(--red);
  color: var(--cream);
  padding: 11px 18px;
  border: 2px solid var(--cream);
  box-shadow: 5px 5px 0 var(--black);
}

.snap-label {
  position: absolute;
  left: 11vw;
  top: 48vh;
  transform: rotate(-7deg) scale(0);
  animation: snapOn .55s .8s cubic-bezier(.2,1.8,.4,1) forwards;
}

.markdown-sticker {
  font-family: "Archivo Black", sans-serif;
  text-align: center;
  color: var(--black);
  background: var(--red);
  border: 2px solid var(--black);
  border-radius: 50%;
  box-shadow: 6px 7px 0 rgba(22, 17, 13, .62);
}

.markdown-sticker.yellow { background: var(--yellow); }
.markdown-sticker.blue { background: var(--blue); color: var(--cream); }

.floating-sticker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 128px;
  height: 110px;
  animation: floatSticker 4s ease-in-out infinite;
}

.sticker-one { top: 20vh; right: 19vw; transform: rotate(12deg); }
.sticker-two { top: 58vh; right: 36vw; animation-delay: -.8s; }
.sticker-three { top: 11vh; left: 38vw; animation-delay: -1.4s; }

.shelf-rail {
  position: absolute;
  left: 0;
  right: 0;
  padding: 11px 0;
  background: var(--green);
  color: var(--black);
  text-align: center;
  letter-spacing: .36em;
  font-size: 12px;
}
.shelf-rail.top { top: 5vh; transform: rotate(-2deg); }
.shelf-rail.bottom { bottom: 3vh; transform: rotate(1deg); }

.scale-wrap {
  position: absolute;
  left: 8vw;
  top: 22vh;
  width: min(720px, 70vw);
  height: 390px;
}

.scale-beam {
  position: absolute;
  left: 8%;
  top: 34%;
  width: 84%;
  height: 16px;
  background: linear-gradient(90deg, var(--brass), var(--yellow), var(--brass));
  transform-origin: center;
  transition: transform .65s cubic-bezier(.2,.9,.25,1.1);
}

.scale-wrap.tilted .scale-beam { transform: rotate(9deg); }
.scale-needle { position: absolute; left: calc(50% - 5px); top: -22px; width: 10px; height: 120px; background: var(--brass); border-radius: 8px; }
.scale-pan { position: absolute; top: 45px; width: 210px; height: 78px; border: 5px solid var(--brass); border-top: 0; border-radius: 0 0 110px 110px; display: grid; place-items: center; }
.left-pan { left: -42px; }
.right-pan { right: -42px; }
.scale-base { position: absolute; left: 32%; bottom: 0; padding: 16px 25px; background: var(--brass); color: var(--black); font-family: "Chivo Mono", monospace; font-weight: 700; }

.price-tag {
  display: inline-block;
  padding: 15px 20px 15px 28px;
  background: var(--cream);
  color: var(--black);
  font-family: "Chivo Mono", monospace;
  text-transform: uppercase;
  clip-path: polygon(12% 0, 100% 0, 94% 50%, 100% 100%, 12% 100%, 0 50%);
  box-shadow: 4px 5px 0 var(--red);
}

.brass-tag { background: var(--brass); }

.tilted-copy {
  position: absolute;
  right: 11vw;
  top: 27vh;
  width: min(420px, 40vw);
  padding: 28px;
  background: var(--cream);
  color: var(--black);
  transform: rotate(5deg);
  box-shadow: 12px 16px 0 rgba(227, 50, 37, .75);
}

.lot-id { color: var(--red); font-size: 13px; }
.tilted-copy h2 { color: var(--black); font-size: clamp(34px, 4vw, 64px); }
.tilted-copy p { font-size: 24px; }

.object-handle {
  position: absolute;
  right: 18vw;
  bottom: 18vh;
  border: 0;
  cursor: pointer;
  font-family: "Chivo Mono", monospace;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--black);
  padding: 16px 24px;
  box-shadow: 6px 6px 0 var(--red);
}

.markdown-aisle { background: linear-gradient(150deg, var(--plum), var(--black) 55%, rgba(111,143,83,.38)); }
.aisle-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 25%, rgba(255,216,74,.32), transparent 42%); animation: shelfFlicker 5s infinite; }
.red-string { position: absolute; left: 10vw; top: 22vh; width: 78vw; height: 42vh; border-top: 4px solid var(--red); border-left: 3px solid var(--red); transform: skewY(-10deg); transition: transform .2s ease; }
.clipping { position: absolute; padding: 18px 24px; background: var(--cream); color: var(--black); font-family: "Newsreader", serif; font-size: 30px; box-shadow: 8px 9px 0 var(--black); }
.clipping-a { top: 19vh; left: 12vw; transform: rotate(-8deg); }
.clipping-b { top: 52vh; left: 30vw; transform: rotate(5deg); }
.clipping-c { top: 28vh; right: 13vw; transform: rotate(-3deg); }
.peel-zone { position: absolute; left: 13vw; bottom: 13vh; width: 360px; height: 190px; }
.peel-sticker { width: 190px; height: 150px; cursor: pointer; transition: transform .5s ease, border-radius .5s ease; }
.peel-sticker.peeled { transform: rotate(-24deg) translate(-42px, -28px); border-radius: 50% 12px 50% 50%; }
.quiet-text { position: absolute; left: 62px; top: 42px; width: 280px; color: var(--cream); z-index: -1; }
.barcode-whisper { position: absolute; right: 9vw; bottom: 12vh; width: 310px; height: 105px; display: flex; gap: 8px; align-items: end; }
.barcode-whisper span { display: block; width: 38px; background: var(--blue); transition: height .35s ease; }
.barcode-whisper span:nth-child(1){ height: 44px; } .barcode-whisper span:nth-child(2){ height: 78px; } .barcode-whisper span:nth-child(3){ height: 58px; } .barcode-whisper span:nth-child(4){ height: 96px; }
.aisle-title { position: absolute; right: 11vw; top: 45vh; color: var(--yellow); text-shadow: 4px 0 0 var(--red); }
.shelf-label { position: absolute; right: 13vw; top: 62vh; color: var(--cream); font-size: 16px; letter-spacing: .2em; }

.receipt-consequences { background: linear-gradient(180deg, var(--black), var(--plum)); }
.receipt-roll {
  position: absolute;
  left: 50%;
  top: -8vh;
  width: min(480px, 84vw);
  padding: 28px 34px 60px;
  background: var(--cream);
  color: var(--black);
  transform: translateX(-50%);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  max-height: 24vh;
  overflow: hidden;
  transition: max-height 1.2s cubic-bezier(.2,.8,.2,1);
}
.receipt-roll.unspooled { max-height: 86vh; }
.receipt-roll::before, .receipt-roll::after { content:""; position:absolute; left:0; right:0; height:18px; background: repeating-linear-gradient(90deg, transparent 0 14px, var(--black) 14px 20px); opacity:.22; }
.receipt-roll::before { top:0; } .receipt-roll::after { bottom:0; }
.receipt-head { font-family:"Chivo Mono", monospace; text-align:center; border-bottom:2px dashed var(--black); padding-bottom:18px; margin-bottom:18px; }
.receipt-line { display:flex; justify-content:space-between; border-bottom:1px dashed rgba(22,17,13,.5); padding:15px 0; font-family:"Chivo Mono", monospace; text-transform:uppercase; }
.receipt-line.total { color: var(--red); font-weight: 700; font-size: 18px; }
.receipt-roll p { font-size: 31px; }
.stamp-pad { position:absolute; right:12vw; bottom:18vh; width:330px; height:210px; }
.stamp-button { border:0; padding:18px 28px; background:var(--red); color:var(--cream); font-family:"Archivo Black", sans-serif; text-transform:uppercase; cursor:pointer; box-shadow:7px 7px 0 var(--black); }
.red-stamp { margin-top:34px; color:var(--red); border:8px solid var(--red); display:inline-block; padding:18px; font-family:"Archivo Black", sans-serif; transform:rotate(-9deg) scale(0); transition: transform .35s cubic-bezier(.15,1.8,.3,1); }
.red-stamp.stamped { transform: rotate(-9deg) scale(1); }
.receipt-curl { position:absolute; left:16vw; bottom:12vh; width:260px; height:120px; border-radius:50%; border-top:20px solid var(--cream); transform:rotate(-18deg); opacity:.7; }

.behind-glass { background: radial-gradient(circle at center, rgba(244,231,197,.12), transparent 34%), linear-gradient(160deg, var(--black), var(--plum)); }
.display-case { position:absolute; inset:16vh 14vw; display:grid; place-items:center; text-align:center; border:2px solid rgba(244,231,197,.45); background:linear-gradient(120deg, rgba(244,231,197,.08), rgba(51,102,255,.08)); box-shadow: inset 0 0 60px rgba(244,231,197,.12), 0 30px 70px rgba(0,0,0,.55); }
.case-reflection { position:absolute; inset:0; background:linear-gradient(115deg, transparent 20%, rgba(244,231,197,.22) 22%, transparent 27%, transparent 56%, rgba(51,102,255,.16) 58%, transparent 63%); }
.gold-decal { color:var(--brass); font-size:clamp(44px, 8vw, 122px); text-shadow:2px 2px 0 var(--yellow), 0 0 30px rgba(255,216,74,.22); }
.display-case h2 { max-width:820px; color:var(--cream); text-shadow:4px 0 0 var(--red); }
.display-case p { width:min(680px, 70vw); }
.final-ticket { position:absolute; left:8vw; bottom:14vh; transform:rotate(8deg); background:var(--yellow); }
.moth { position:absolute; width:18px; height:12px; border-radius:50% 50% 0 0; background:var(--cream); box-shadow:12px 0 0 rgba(244,231,197,.75); animation: mothOrbit 6s linear infinite; }
.moth-a { top:28%; left:32%; } .moth-b { top:62%; right:28%; animation-delay:-2s; } .moth-c { top:42%; right:42%; animation-delay:-4s; }

@keyframes bellTremble { 0%{transform:rotate(0)} 15%{transform:rotate(8deg)} 32%{transform:rotate(-7deg)} 52%{transform:rotate(4deg)} 70%{transform:rotate(-2deg)} 100%{transform:rotate(0)} }
@keyframes snapOn { to { transform: rotate(-7deg) scale(1); } }
@keyframes floatSticker { 0%,100%{ margin-top:0; } 50%{ margin-top:-18px; } }
@keyframes shelfFlicker { 0%, 92%, 100%{ opacity:1; } 94%{ opacity:.45; } 96%{ opacity:.8; } }
@keyframes mothOrbit { from{ transform: rotate(0deg) translateX(28px) rotate(0deg); } to{ transform: rotate(360deg) translateX(28px) rotate(-360deg); } }

@media (max-width: 760px) {
  .counter-nav { display: none; }
  .scene { padding: 7vh 6vw; }
  .window-copy, .tilted-copy, .aisle-title, .shelf-label, .stamp-pad { position: relative; inset: auto; width: auto; margin-top: 28px; }
  .scale-wrap { left: 2vw; width: 96vw; transform: scale(.74); transform-origin: left top; }
  .clipping, .peel-zone, .barcode-whisper { transform: scale(.8); transform-origin: left top; }
  .display-case { inset: 12vh 6vw; }
}