:root {
  --chalk: #111712;
  --amber: #F2A83B;
  --brass: #B9833A;
  --foam: #FFF1C7;
  --green: #214C37;
  --magenta: #F04E98;
  --cyan: #48D6C8;
  --red: #D84A32;
  --display: "Bebas Neue", sans-serif;
  --body: "Libre Franklin", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--foam);
  background: var(--chalk);
  font-family: var(--body);
  overflow-x: hidden;
}

body.door-open .door { transform: perspective(900px) rotateY(-58deg) skewY(-1deg); }

.chalk-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .23;
  background:
    radial-gradient(circle at 18% 21%, rgba(255,241,199,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 64%, rgba(72,214,200,.12) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0 46%, rgba(255,241,199,.05) 47% 48%, transparent 49% 100%);
  background-size: 43px 47px, 71px 67px, 100% 100%;
  mix-blend-mode: screen;
}

.bar-crawl { position: relative; }

.room {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 5vw, 74px);
  border-bottom: 2px dashed rgba(255,241,199,.12);
  background:
    radial-gradient(circle at 74% 18%, rgba(242,168,59,.13), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(33,76,55,.7), transparent 34%),
    var(--chalk);
}

h1, h2, .neon-sign, .tap-label, .merge-stamp { font-family: var(--display); letter-spacing: .035em; }

h1, h2 { margin: 0; line-height: .88; font-weight: 400; text-transform: uppercase; }

h1 { font-size: clamp(5rem, 15vw, 13.5rem); color: var(--foam); text-shadow: 7px 7px 0 rgba(216,74,50,.6); }

h2 { font-size: clamp(4rem, 10vw, 9rem); color: var(--foam); }

p { font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.55; }

code, .mono { font-family: var(--mono); }

.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.coaster-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 8px;
}

.nav-coaster {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--chalk);
  background: var(--foam);
  border: 4px solid var(--brass);
  border-radius: 50%;
  text-decoration: none;
  transform: rotate(var(--tilt, -7deg));
  box-shadow: 0 7px 0 rgba(0,0,0,.36);
  transition: transform .35s ease, background .35s ease;
}
.nav-coaster:nth-child(even) { --tilt: 8deg; }
.nav-coaster span { font: 600 10px var(--mono); text-transform: uppercase; }
.nav-coaster.active { background: var(--cyan); transform: rotate(0deg) scale(1.08); }

.counter-rail {
  position: absolute;
  left: -12vw;
  bottom: 7vh;
  width: 130vw;
  height: 84px;
  background: linear-gradient(90deg, #6b3c22, var(--brass), #5a301d);
  border-top: 8px solid rgba(255,241,199,.28);
  transform: rotate(-11deg);
  box-shadow: 0 -18px 48px rgba(0,0,0,.45), inset 0 0 0 2px rgba(17,23,18,.5);
  z-index: -1;
}
.counter-rail span {
  position: absolute;
  left: 36%;
  top: 21px;
  font: 600 13px var(--mono);
  color: rgba(17,23,18,.72);
  text-transform: uppercase;
}

.street-window { background: linear-gradient(180deg, #0b100d, var(--chalk) 72%); }
.rain-pane {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(72,214,200,.18) 23px 25px, transparent 26px 42px);
  animation: rainFall 1.4s linear infinite;
  opacity: .36;
}
.window-frame {
  position: absolute;
  right: 7vw;
  top: 10vh;
  width: min(45vw, 640px);
  height: 76vh;
  border: 16px solid var(--green);
  box-shadow: inset 0 0 0 6px var(--brass), 0 24px 80px rgba(0,0,0,.55);
  background: radial-gradient(circle at 50% 42%, rgba(72,214,200,.18), rgba(17,23,18,.92) 55%);
}
.window-frame:before, .window-frame:after { content: ""; position: absolute; background: var(--green); }
.window-frame:before { width: 100%; height: 14px; top: 48%; left: 0; }
.window-frame:after { height: 100%; width: 14px; left: 50%; top: 0; }
.neon-sign {
  position: absolute;
  left: 9%;
  top: 12%;
  z-index: 2;
  display: grid;
  color: var(--cyan);
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: .82;
  text-shadow: 0 0 9px var(--cyan), 0 0 38px var(--cyan), 6px 5px 0 var(--magenta);
  animation: neonFlicker 4.8s infinite;
}
.neon-sign strong { color: var(--magenta); text-shadow: 0 0 12px var(--magenta), 0 0 35px var(--magenta); }
.door {
  position: absolute;
  right: 7%;
  bottom: 0;
  width: 34%;
  height: 56%;
  background: linear-gradient(110deg, #183326, var(--green));
  border: 5px solid var(--brass);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.2,.8,.15,1);
  z-index: 3;
}
.door-tag { position: absolute; left: 14px; top: 24px; color: var(--foam); font-size: .65rem; }
.handle { position: absolute; right: 18px; top: 52%; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); }
.street-copy { width: min(720px, 58vw); position: relative; top: 13vh; }
.paper-note, .receipt, .chalk-board {
  padding: clamp(22px, 3vw, 42px);
  border: 2px solid rgba(255,241,199,.3);
}
.paper-note { background: rgba(255,241,199,.09); box-shadow: 16px 18px 0 rgba(216,74,50,.26); }
.skew-left { transform: rotate(-2deg); }

.tap-wall { display: grid; grid-template-columns: .85fr 1.4fr; gap: 5vw; align-items: center; background-color: #101b14; }
.menu-board, .cellar-copy { background: rgba(33,76,55,.82); box-shadow: inset 0 0 0 5px rgba(17,23,18,.55), 10px 10px 0 var(--brass); }
.tap-rack { display: flex; gap: clamp(18px, 3vw, 42px); justify-content: center; align-items: end; min-height: 640px; }
.tap-handle {
  position: relative;
  width: clamp(145px, 17vw, 220px);
  min-height: 575px;
  display: grid;
  justify-items: center;
}
.tap-label {
  width: 108px;
  padding: 16px 8px;
  background: var(--foam);
  color: var(--chalk);
  border-radius: 54px 54px 12px 12px;
  border: 5px solid var(--brass);
  font-size: 2.15rem;
  line-height: .9;
  text-align: center;
  z-index: 2;
}
.pour-svg { width: 100%; height: 290px; overflow: visible; margin-top: -12px; }
.pour-svg path, .pour-svg circle { fill: none; stroke: var(--amber); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; filter: drop-shadow(0 0 8px currentColor); }
.tap-handle.cyan .pour-svg path, .tap-handle.cyan .pour-svg circle { stroke: var(--cyan); }
.tap-handle.magenta .pour-svg path, .tap-handle.magenta .pour-svg circle { stroke: var(--magenta); }
.room.in-view .pour-svg path, .room.in-view .pour-svg circle { animation: pourDraw 2s ease forwards; }
.glass { width: 102px; height: 124px; border: 5px solid rgba(255,241,199,.72); border-top: 0; border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.glass span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(var(--foam), var(--amber)); animation: fillGlass 2.2s .55s ease forwards paused; }
.room.in-view .glass span { animation-play-state: running; }
.tap-handle code { margin-top: 18px; color: var(--foam); background: rgba(17,23,18,.8); padding: 8px 10px; border: 1px solid var(--brass); }
.ticket-strip {
  position: absolute;
  right: 8vw;
  top: 11vh;
  padding: 18px 28px;
  background: var(--foam);
  color: var(--red);
  font: 600 .8rem var(--mono);
  transform-origin: top center;
}
.brass-engraving {
  position: absolute;
  left: 7vw;
  bottom: 10vh;
  max-width: 390px;
  padding: 10px 14px;
  color: var(--chalk);
  background: var(--brass);
  border: 2px solid var(--foam);
  font-size: .68rem;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.swaying { animation: sway 3.8s ease-in-out infinite; }

.coaster-fork-table { background: radial-gradient(ellipse at center, #56321e 0, #2b1b12 38%, var(--chalk) 75%); }
.table-top {
  position: absolute;
  left: -6vw;
  bottom: -8vh;
  width: 72vw;
  height: 62vh;
  border-radius: 50%;
  background: radial-gradient(circle, #7b4a27, #3d2317 68%);
  border: 12px solid var(--brass);
  transform: rotate(-10deg);
}
.coaster {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--foam);
  color: var(--chalk);
  border-radius: 50%;
  border: 7px solid var(--red);
  box-shadow: 0 12px 0 rgba(0,0,0,.22);
  animation: coasterSpin 11s linear infinite;
}
.coaster span { font: 700 .8rem var(--mono); text-transform: uppercase; }
.coaster b { font-size: 4rem; color: var(--magenta); line-height: .6; }
.coaster.big { width: 210px; height: 210px; left: 18%; top: 16%; }
.coaster.small { width: 128px; height: 128px; right: 18%; top: 13%; animation-duration: 14s; }
.coaster.rotate { right: 36%; top: 54%; animation-direction: reverse; }
.napkin {
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 285px;
  padding: 25px;
  background: var(--foam);
  color: var(--chalk);
  transform: rotate(8deg);
  box-shadow: 12px 14px 0 rgba(72,214,200,.35);
}
.napkin p { margin: 7px 0; font-size: 1rem; }
.napkin ins { color: var(--green); text-decoration: none; }
.napkin del { color: var(--red); }
.fork-copy { position: absolute; width: min(560px, 43vw); right: 8vw; top: 15vh; background: rgba(255,241,199,.96); color: var(--chalk); transform: rotate(2deg); }
.fork-copy h2, .final-receipt h2 { color: var(--chalk); }
.chalk-arrows { position: absolute; inset: auto 4vw 8vh auto; width: 58vw; height: 48vh; overflow: visible; }
.chalk-arrows path { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.room.in-view .chalk-arrows path { animation: chalkDraw 2.1s ease forwards; }

.backbar-ledger { display: grid; place-items: center; background: linear-gradient(180deg, #0f1511, #15281d 45%, #0d120f); }
.bottle-shelf { position: absolute; top: 7vh; left: 5vw; right: 5vw; height: 190px; border-bottom: 15px solid var(--brass); display: flex; align-items: end; gap: 24px; justify-content: center; }
.bottle { width: 72px; height: 150px; border-radius: 26px 26px 8px 8px; background: linear-gradient(90deg, rgba(72,214,200,.22), var(--green)); border: 3px solid rgba(255,241,199,.3); display: grid; place-items: center; font: 700 .75rem var(--mono); color: var(--foam); }
.bottle.tall { height: 185px; background-color: var(--brass); }
.bottle.squat { height: 118px; background-color: var(--red); }
.amber-bottle { background: linear-gradient(90deg, rgba(242,168,59,.36), #5a3818); }
.ledger-book { width: min(950px, 76vw); margin-top: 120px; background: var(--foam); color: var(--chalk); padding: clamp(28px, 5vw, 58px); box-shadow: 20px 24px 0 rgba(185,131,58,.55); transform: rotate(-1deg); }
.ledger-book h2 { color: var(--chalk); }
.ledger-row { display: grid; grid-template-columns: 1fr 1.35fr .8fr; gap: 18px; padding: 15px 0; border-bottom: 2px dotted rgba(17,23,18,.45); align-items: baseline; }
.ledger-row span { font-weight: 800; text-transform: uppercase; }
.ledger-row code { color: var(--green); }
.ledger-row b { color: var(--red); font-family: var(--display); font-size: 1.55rem; font-weight: 400; }
.cap-cloud { position: absolute; right: 7vw; bottom: 9vh; display: flex; gap: 13px; flex-wrap: wrap; width: 270px; }
.cap-cloud i { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--chalk); border: 5px dashed var(--foam); font: 700 .75rem var(--mono); animation: stampPulse 2.8s ease-in-out infinite; }
.cap-cloud i:nth-child(even) { background: var(--amber); animation-delay: .6s; }

.dependency-cellar { background: radial-gradient(circle at 50% 95%, #332211, #111712 62%); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; }
.barrel-stack { position: relative; min-height: 620px; }
.barrel { position: absolute; width: 270px; height: 150px; border-radius: 48% / 24%; background: linear-gradient(90deg, #5a321a, var(--brass), #4b2818); border: 5px solid #2b180f; color: var(--foam); display: grid; place-items: center; box-shadow: inset 0 0 0 12px rgba(17,23,18,.18); }
.barrel span { font-family: var(--display); font-size: 3rem; letter-spacing: .03em; }
.barrel code { color: var(--cyan); margin-top: -42px; }
.barrel:nth-child(1) { left: 9%; top: 8%; transform: rotate(-6deg); }
.barrel:nth-child(2) { left: 36%; top: 28%; transform: rotate(5deg); }
.barrel:nth-child(3) { left: 13%; top: 50%; transform: rotate(2deg); }
.barrel:nth-child(4) { left: 47%; top: 68%; transform: rotate(-4deg); }
.dependency-map { position: absolute; right: 5vw; bottom: 5vh; width: 49vw; height: 45vh; opacity: .85; }
.dependency-map path { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 900; stroke-dashoffset: 900; }
.dependency-map circle { fill: var(--amber); stroke: var(--foam); stroke-width: 3; transform-origin: center; }
.room.in-view .dependency-map path { animation: chalkDraw 2.5s ease forwards; }
.room.in-view .dependency-map circle { animation: stampPulse 1.8s ease-in-out infinite; }

.last-call-merge { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: radial-gradient(circle at 50% 38%, rgba(240,78,152,.22), transparent 28%), var(--chalk); }
.shared-glass svg { width: min(520px, 43vw); overflow: visible; filter: drop-shadow(0 0 30px rgba(72,214,200,.22)); }
.merge-line { fill: none; stroke: var(--cyan); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; }
.line-two { stroke: var(--magenta); }
.pint { fill: rgba(255,241,199,.08); stroke: var(--foam); stroke-width: 9; }
.foam { fill: var(--foam); stroke: var(--amber); stroke-width: 4; }
.room.in-view .merge-line { animation: pourDraw 1.8s ease forwards; }
.final-receipt { background: var(--foam); color: var(--chalk); transform: rotate(2deg); box-shadow: 18px 20px 0 rgba(240,78,152,.38); }
.coaster-button { margin-top: 20px; border: 0; width: 210px; height: 210px; border-radius: 50%; background: var(--cyan); color: var(--chalk); border: 8px solid var(--brass); font: 400 2.2rem/1 var(--display); text-transform: uppercase; cursor: pointer; transform: rotate(-8deg); box-shadow: 0 12px 0 rgba(0,0,0,.33); }
.merge-stamp { position: absolute; right: 15vw; bottom: 11vh; color: var(--red); border: 10px solid var(--red); padding: 10px 28px; font-size: clamp(4rem, 9vw, 9rem); transform: rotate(-11deg) scale(1.8); opacity: 0; mix-blend-mode: multiply; }
.merge-stamp.stamped { animation: stampLand .55s cubic-bezier(.2,1.5,.4,1) forwards; }
.ink-spread { position: absolute; right: 22vw; bottom: 22vh; width: 40px; height: 40px; border-radius: 50%; background: var(--red); opacity: 0; filter: blur(18px); transform: scale(.1); }
.ink-spread.spread { animation: inkSpread .9s ease-out forwards; }

@keyframes rainFall { to { background-position: 0 90px; } }
@keyframes neonFlicker { 0%, 18%, 20%, 52%, 57%, 100% { opacity: 1; } 19%, 54% { opacity: .42; } 56% { opacity: .7; } }
@keyframes pourDraw { to { stroke-dashoffset: 0; } }
@keyframes chalkDraw { to { stroke-dashoffset: 0; } }
@keyframes fillGlass { to { height: 76%; } }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes coasterSpin { to { transform: rotate(360deg); } }
@keyframes stampPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes stampLand { 0% { opacity: 0; transform: rotate(-11deg) scale(1.8); } 100% { opacity: .9; transform: rotate(-11deg) scale(1); } }
@keyframes inkSpread { 0% { opacity: .6; transform: scale(.1); } 100% { opacity: .16; transform: scale(7); } }

@media (max-width: 900px) {
  .coaster-nav { right: 8px; transform: translateY(-50%) scale(.78); }
  .window-frame { right: -8vw; width: 68vw; opacity: .76; }
  .street-copy, .fork-copy { width: calc(100vw - 100px); }
  .tap-wall, .dependency-cellar, .last-call-merge { grid-template-columns: 1fr; }
  .tap-rack { transform: scale(.72); transform-origin: top center; min-height: 490px; }
  .table-top { width: 110vw; }
  .ledger-book { width: calc(100vw - 92px); }
  .ledger-row { grid-template-columns: 1fr; gap: 4px; }
  .dependency-map { width: 80vw; }
  .shared-glass svg { width: 76vw; }
}