:root {
  --deep-teal: #003B46;
  --aero-blue: #7DDAFF;
  --mint: #9BFFD2;
  --chrome: #DDECF2;
  --lcd: #071013;
  --coin: #FFE86B;
  --cranberry: #C52B53;
  --frost: #E8F8FF;
  --display: "Syne", "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --body: "Lexend", "Inter", system-ui, sans-serif;
  --note: "Newsreader", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
  background: var(--lcd);
  color: var(--frost);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 500vh;
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(125, 218, 255, .32), transparent 31vw),
    radial-gradient(circle at 88% 14%, rgba(155, 255, 210, .18), transparent 28vw),
    linear-gradient(135deg, #071013 0%, #003B46 48%, #071013 100%);
}

.ambient-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.scanline {
  position: absolute;
  inset: 0;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(232, 248, 255, .3) 14px, transparent 15px);
  mix-blend-mode: screen;
}

.wall-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(20px);
  opacity: .75;
}

.wall-glow-a {
  width: 45vw;
  height: 18vw;
  left: -13vw;
  top: 16vh;
  background: rgba(125, 218, 255, .22);
}

.wall-glow-b {
  width: 36vw;
  height: 36vw;
  right: -17vw;
  bottom: 9vh;
  background: rgba(155, 255, 210, .18);
}

.ceiling-tube {
  position: absolute;
  left: -8vw;
  right: -8vw;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(232, 248, 255, .28);
  background: linear-gradient(180deg, rgba(232, 248, 255, .18), rgba(125, 218, 255, .08), rgba(0, 59, 70, .16));
  box-shadow: inset 0 0 24px rgba(232, 248, 255, .2), 0 0 30px rgba(125, 218, 255, .12);
  transform: rotate(-8deg);
}

.ceiling-tube-a { top: 7vh; }
.ceiling-tube-b { bottom: 18vh; transform: rotate(7deg); opacity: .62; }

.ceiling-tube span {
  position: absolute;
  top: 12px;
  left: var(--rail-flow, 10%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, #E8F8FF, #FFE86B 38%, #9BFFD2 68%, #7DDAFF);
  box-shadow: 0 0 24px rgba(255, 232, 107, .5);
  animation: tubeDrift 7s ease-in-out infinite;
}

.liquidity-counter {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 1200px;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(12vw) scale(.98);
  transition: opacity .7s ease, transform .9s cubic-bezier(.22, .9, .26, 1);
}

.scene.active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.frosted-sign {
  position: absolute;
  left: 7vw;
  top: 12vh;
  width: min(62vw, 850px);
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(232, 248, 255, .6);
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(232, 248, 255, .28), rgba(125, 218, 255, .12) 46%, rgba(0, 59, 70, .34)),
    radial-gradient(circle at 35% -10%, rgba(255, 232, 107, .22), transparent 34%);
  box-shadow: inset 0 1px 18px rgba(232, 248, 255, .45), 0 24px 80px rgba(0, 0, 0, .34);
  backdrop-filter: blur(14px);
  transform: translate(var(--pointer-x, 0), var(--pointer-y, 0));
}

.sign-liquid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 18%;
  height: 24%;
  background: linear-gradient(90deg, rgba(125, 218, 255, .25), rgba(155, 255, 210, .5), rgba(125, 218, 255, .23));
  border-top: 2px solid rgba(232, 248, 255, .9);
  filter: blur(.2px);
  animation: meniscus 6s ease-in-out infinite;
}

.sign-rulers {
  position: absolute;
  right: 24px;
  top: 22px;
  bottom: 22px;
  width: 54px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  opacity: .72;
}

.sign-rulers span {
  display: block;
  height: 1px;
  background: rgba(232, 248, 255, .76);
  box-shadow: -18px 0 0 rgba(232, 248, 255, .3), -34px 0 0 rgba(232, 248, 255, .18);
}

.overbar, .chapter-label span, .menu-board p, .ledger-tank p, .closing-menu small {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--mint);
  font-size: 12px;
}

h1, h2 {
  position: relative;
  margin: 0;
  font-family: var(--display);
  letter-spacing: .08em;
  line-height: .9;
  text-transform: lowercase;
  text-shadow: 0 0 16px rgba(125, 218, 255, .75), 0 2px 0 rgba(255, 255, 255, .35);
}

h1::after, h2::after {
  content: attr(data-gloss);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 43%;
  color: rgba(232, 248, 255, .38);
  overflow: hidden;
  pointer-events: none;
}

h1 {
  margin-top: 22px;
  font-size: clamp(64px, 13vw, 176px);
  color: var(--frost);
}

h2 {
  font-size: clamp(48px, 8vw, 108px);
  color: var(--frost);
}

.sign-note, .chapter-label p, .menu-board small, .receipt-ribbon p, .closing-menu strong {
  max-width: 520px;
  color: rgba(232, 248, 255, .86);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
}

.reserve-tank, .ledger-tank {
  position: absolute;
  border: 1px solid rgba(232, 248, 255, .72);
  background: linear-gradient(110deg, rgba(232, 248, 255, .22), rgba(125, 218, 255, .08) 42%, rgba(0, 59, 70, .34));
  box-shadow: inset 0 0 24px rgba(232, 248, 255, .34), 0 30px 90px rgba(0, 0, 0, .35);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.primary-tank {
  right: 8vw;
  top: 8vh;
  width: min(24vw, 300px);
  height: 76vh;
  border-radius: 38px;
}

.tank-rulers {
  position: absolute;
  inset: 9% 16px 9% auto;
  width: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tank-rulers span {
  height: 1px;
  background: rgba(232, 248, 255, .78);
  box-shadow: -18px 0 0 rgba(232, 248, 255, .35);
}

.liquid-level {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tank-fill, 58%);
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 232, 107, .5), transparent 8%),
    linear-gradient(180deg, rgba(155, 255, 210, .78), rgba(125, 218, 255, .42) 54%, rgba(0, 59, 70, .72));
  border-top: 3px solid var(--frost);
  transition: height .6s ease;
}

.bubbles i, .audit-beads i, .binary-bubbles span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #E8F8FF, #9BFFD2 34%, rgba(125, 218, 255, .24) 70%);
  box-shadow: 0 0 18px rgba(155, 255, 210, .65);
  animation: bubbleRise 8s linear infinite;
}

.bubbles i:nth-child(1) { left: 12%; bottom: -10%; animation-delay: 0s; }
.bubbles i:nth-child(2) { left: 42%; bottom: -12%; animation-delay: -2s; transform: scale(.7); }
.bubbles i:nth-child(3) { left: 68%; bottom: -8%; animation-delay: -4s; transform: scale(1.25); }
.bubbles i:nth-child(4) { left: 28%; bottom: -15%; animation-delay: -6s; transform: scale(.55); }
.bubbles i:nth-child(5) { left: 78%; bottom: -14%; animation-delay: -1s; }
.bubbles i:nth-child(6) { left: 53%; bottom: -18%; animation-delay: -3.6s; transform: scale(.45); }
.bubbles i:nth-child(7) { left: 18%; bottom: -20%; animation-delay: -5.1s; transform: scale(.85); }
.bubbles i:nth-child(8) { left: 60%; bottom: -22%; animation-delay: -7.2s; transform: scale(.62); }

.tank-label {
  position: absolute;
  left: 22px;
  bottom: 24px;
  font-family: var(--display);
  color: var(--lcd);
  letter-spacing: .14em;
  font-weight: 800;
}

.chrome-tap {
  position: absolute;
  right: 27vw;
  top: 18vh;
  width: 170px;
  height: 270px;
}

.tap-symbol {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--lcd);
  font-size: 58px;
  background: radial-gradient(circle at 30% 25%, #ffffff, #DDECF2 35%, #7DDAFF 62%, #003B46);
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .22), 0 0 28px rgba(125, 218, 255, .5);
}

.tap-neck, .tap-spout {
  position: absolute;
  background: linear-gradient(90deg, #E8F8FF, #7DDAFF 28%, #DDECF2 54%, #003B46 100%);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .8);
}

.tap-neck { left: 42px; top: 82px; width: 28px; height: 126px; border-radius: 18px; }
.tap-spout { left: 55px; top: 178px; width: 112px; height: 34px; border-radius: 0 24px 24px 0; }

.opening-coasters {
  position: absolute;
  left: 9vw;
  bottom: 14vh;
  display: flex;
  gap: 18px;
  transform: rotate(-5deg);
}

.opening-coasters span {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--note);
  font-size: 16px;
  color: var(--deep-teal);
  background: repeating-radial-gradient(circle, rgba(0, 59, 70, .12) 0 1px, transparent 2px 7px), radial-gradient(circle at 34% 22%, #E8F8FF, #DDECF2 34%, #7DDAFF 70%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .7), 0 16px 38px rgba(0, 0, 0, .18);
}

.drop-stream span {
  position: absolute;
  top: 212px;
  left: 138px;
  width: 16px;
  height: 26px;
  border-radius: 50%;
  background: var(--coin);
  animation: drops 1.8s linear infinite;
}
.drop-stream span:nth-child(2) { animation-delay: -.6s; }
.drop-stream span:nth-child(3) { animation-delay: -1.2s; }

.chapter-label {
  position: absolute;
  left: 8vw;
  top: 16vh;
  width: min(46vw, 620px);
  padding: 30px;
  border-radius: 32px;
  background: rgba(232, 248, 255, .12);
  border: 1px solid rgba(221, 236, 242, .38);
  backdrop-filter: blur(12px);
}

.right-label { left: auto; right: 7vw; top: 14vh; }
.chute-label { top: 10vh; }
.final-label { left: 10vw; top: 12vh; }

.pour-rail {
  position: absolute;
  left: 18vw;
  top: 50vh;
  width: 58vw;
  height: 90px;
  transform: rotate(-10deg);
  border-radius: 999px;
  border: 1px solid rgba(232, 248, 255, .7);
  background: linear-gradient(180deg, rgba(232, 248, 255, .26), rgba(125, 218, 255, .08), rgba(0, 59, 70, .32));
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .4), 0 20px 60px rgba(0, 0, 0, .34);
}

.rail-glint, .tube-highlight, .counter-reflection {
  position: absolute;
  inset: 12px 5%;
  border-top: 2px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
}

.token {
  position: absolute;
  top: 14px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 900;
  color: var(--lcd);
  background: radial-gradient(circle at 30% 24%, #ffffff, #FFE86B 37%, #9BFFD2 68%, #7DDAFF 100%);
  box-shadow: inset 0 -8px 18px rgba(0, 59, 70, .25), 0 0 26px rgba(255, 232, 107, .5);
  animation: tokenRoll 5.4s ease-in-out infinite;
}
.token-a { left: 8%; }
.token-b { left: 44%; animation-delay: -1.4s; }
.token-c { left: 76%; animation-delay: -2.7s; }

.menu-board, .closing-menu {
  position: absolute;
  right: 9vw;
  bottom: 20vh;
  width: min(34vw, 460px);
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(7, 16, 19, .86), rgba(0, 59, 70, .74));
  border: 1px solid rgba(155, 255, 210, .45);
  box-shadow: 0 0 28px rgba(125, 218, 255, .22), inset 0 0 18px rgba(155, 255, 210, .1);
}

.menu-board strong, .closing-menu strong {
  display: block;
  margin: 10px 0;
  font-family: var(--display);
  letter-spacing: .12em;
  color: var(--coin);
}

.coaster-seal {
  position: absolute;
  left: 10vw;
  bottom: 13vh;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--lcd);
  background: repeating-radial-gradient(circle, rgba(0, 59, 70, .18) 0 2px, transparent 3px 7px), radial-gradient(circle at 35% 25%, #E8F8FF, #9BFFD2 42%, #7DDAFF 76%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .8), 0 0 38px rgba(155, 255, 210, .4);
  animation: sealSpin 13s linear infinite;
}
.coaster-seal span { font-family: var(--display); font-size: 34px; font-weight: 900; }
.coaster-seal em { position: absolute; bottom: 34px; font-family: var(--note); color: var(--deep-teal); }

.currency-tap-strip {
  position: absolute;
  left: 54vw;
  top: 18vh;
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(232, 248, 255, .44);
  background: rgba(232, 248, 255, .12);
  backdrop-filter: blur(12px);
  transform: rotate(8deg);
}

.currency-tap-strip i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 30px;
  color: var(--lcd);
  background: radial-gradient(circle at 30% 25%, #ffffff, #DDECF2 28%, #7DDAFF 68%, #003B46);
  box-shadow: inset 0 -8px 14px rgba(0, 59, 70, .24);
}

.inspection-lens {
  position: absolute;
  left: 15vw;
  top: 26vh;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(232, 248, 255, .36), rgba(125, 218, 255, .18) 35%, rgba(0, 59, 70, .28) 64%, transparent 68%);
  border: 1px solid rgba(232, 248, 255, .54);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, .45), 0 0 58px rgba(125, 218, 255, .32);
}
.lens-ring { position: absolute; inset: 20%; border: 2px solid rgba(155, 255, 210, .7); border-radius: 50%; animation: pulseRing 2.8s ease-out infinite; }
.ring-two { animation-delay: -1.4s; }
.lens-core { position: absolute; inset: 38%; border-radius: 50%; display: grid; place-items: center; color: var(--lcd); font-size: 54px; background: var(--mint); }

.receipt-ribbon {
  position: absolute;
  left: 40vw;
  bottom: 13vh;
  width: 36vw;
  padding: 28px 34px;
  transform: rotate(6deg);
  border-radius: 12px 44px 20px 42px;
  color: var(--deep-teal);
  background: linear-gradient(90deg, rgba(232, 248, 255, .95), rgba(221, 236, 242, .76));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
  animation: ribbonFloat 5s ease-in-out infinite;
}
.receipt-ribbon span { font-family: var(--note); color: var(--cranberry); font-style: italic; }
.receipt-ribbon p { color: var(--deep-teal); font-family: var(--note); }

.audit-menu {
  position: absolute;
  left: 7vw;
  bottom: 12vh;
  width: 250px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(155, 255, 210, .42);
  background: linear-gradient(145deg, rgba(7, 16, 19, .84), rgba(0, 59, 70, .64));
  box-shadow: inset 0 0 18px rgba(155, 255, 210, .1), 0 18px 48px rgba(0, 0, 0, .24);
}

.audit-menu b, .audit-menu span {
  display: block;
  font-family: var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.audit-menu b { color: var(--coin); margin-bottom: 12px; }
.audit-menu span { color: var(--mint); font-size: 12px; padding: 8px 0; border-top: 1px solid rgba(232, 248, 255, .16); }

.audit-beads i { width: 13px; height: 13px; animation-duration: 5.4s; }
.audit-beads i:nth-child(1) { left: 29vw; top: 63vh; }
.audit-beads i:nth-child(2) { left: 35vw; top: 58vh; animation-delay: -.8s; }
.audit-beads i:nth-child(3) { left: 42vw; top: 52vh; animation-delay: -1.6s; }
.audit-beads i:nth-child(4) { left: 49vw; top: 47vh; animation-delay: -2.4s; }
.audit-beads i:nth-child(5) { left: 56vw; top: 42vh; animation-delay: -3.2s; }
.audit-beads i:nth-child(6) { left: 63vw; top: 37vh; animation-delay: -4s; }

.pneumatic-tube {
  position: absolute;
  left: 14vw;
  top: 48vh;
  width: 74vw;
  height: 112px;
  transform: rotate(-16deg);
  border-radius: 999px;
  border: 1px solid rgba(232, 248, 255, .7);
  background: linear-gradient(180deg, rgba(232, 248, 255, .32), rgba(125, 218, 255, .08) 48%, rgba(0, 59, 70, .32));
  box-shadow: inset 0 0 30px rgba(255, 255, 255, .42), 0 30px 80px rgba(0, 0, 0, .33);
}

.tube-token {
  position: absolute;
  left: var(--tube-position, 12%);
  top: 16px;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--lcd);
  font-size: 48px;
  background: radial-gradient(circle at 30% 22%, white, var(--coin) 35%, var(--mint) 62%, var(--aero-blue));
  transition: left .45s ease;
}

.pressure-gauge {
  position: absolute;
  right: 14vw;
  top: 15vh;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  padding: 18px;
  background: linear-gradient(145deg, #E8F8FF, #7DDAFF 46%, #003B46);
  box-shadow: 0 0 50px rgba(125, 218, 255, .32);
}
.gauge-face { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--lcd); border: 1px solid rgba(232, 248, 255, .5); }
.gauge-face strong { position: absolute; bottom: 38px; left: 0; right: 0; text-align: center; color: var(--mint); letter-spacing: .16em; font-family: var(--display); }
.needle { position: absolute; left: 50%; top: 50%; width: 6px; height: 78px; margin-left: -3px; transform-origin: center 72px; transform: rotate(var(--needle-angle, -52deg)); border-radius: 6px; background: var(--cranberry); transition: transform .5s ease; }
.tick { position: absolute; left: 50%; top: 14px; width: 2px; height: 24px; background: var(--chrome); transform-origin: center 86px; }
.tick-a { transform: rotate(-48deg); }
.tick-b { transform: rotate(0deg); }
.tick-c { transform: rotate(48deg); }

.wayfinding {
  position: absolute;
  left: 8vw;
  bottom: 18vh;
  color: var(--coin);
  font-family: var(--display);
  letter-spacing: .18em;
  font-size: 18px;
  text-shadow: 0 0 16px rgba(255, 232, 107, .46);
}

.settlement-stamps {
  position: absolute;
  left: 18vw;
  bottom: 12vh;
  display: flex;
  gap: 18px;
  transform: rotate(-7deg);
}

.settlement-stamps span {
  padding: 14px 18px;
  border: 2px solid rgba(197, 43, 83, .76);
  border-radius: 14px;
  color: var(--cranberry);
  font-family: var(--note);
  font-size: 20px;
  font-weight: 700;
  background: rgba(232, 248, 255, .78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.secondary-tank {
  right: 10vw;
  top: 16vh;
  width: min(42vw, 560px);
  height: 54vh;
  border-radius: 44px;
}
.ledger-line { position: absolute; left: 8%; right: 8%; top: var(--ledger-top, 48%); height: 5px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 22px var(--mint); transition: top .5s ease; }
.binary-bubbles span { display: grid; place-items: center; color: var(--lcd); font-size: 11px; font-weight: 900; }
.binary-bubbles span:nth-child(1) { left: 16%; bottom: -10%; }
.binary-bubbles span:nth-child(2) { left: 34%; bottom: -12%; animation-delay: -1.2s; }
.binary-bubbles span:nth-child(3) { left: 52%; bottom: -11%; animation-delay: -2.5s; }
.binary-bubbles span:nth-child(4) { left: 68%; bottom: -12%; animation-delay: -3.3s; }
.binary-bubbles span:nth-child(5) { left: 82%; bottom: -10%; animation-delay: -4.2s; }
.ledger-tank p { position: absolute; left: 28px; bottom: 26px; color: var(--lcd); font-weight: 900; }
.closing-menu { left: 12vw; right: auto; bottom: 15vh; }

.countertop {
  position: absolute;
  left: -6vw;
  right: -6vw;
  bottom: -6vh;
  height: 30vh;
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  background: linear-gradient(180deg, rgba(232, 248, 255, .48), rgba(125, 218, 255, .18) 34%, rgba(0, 59, 70, .76));
  border-top: 1px solid rgba(232, 248, 255, .9);
  box-shadow: inset 0 20px 42px rgba(255, 255, 255, .25), 0 -24px 90px rgba(125, 218, 255, .16);
  pointer-events: none;
}
.counter-edge { position: absolute; left: 0; right: 0; top: 38px; height: 12px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .76), transparent); filter: blur(4px); }

.scroll-meter {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
  z-index: 5;
}
.scroll-meter span { width: 10px; height: 38px; border-radius: 999px; background: rgba(232, 248, 255, .24); border: 1px solid rgba(232, 248, 255, .34); }
.scroll-meter span.active { background: var(--mint); box-shadow: 0 0 18px var(--mint); }

@keyframes bubbleRise {
  0% { transform: translateY(0) translateX(0) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-82vh) translateX(18px) scale(1.1); opacity: 0; }
}
@keyframes meniscus { 0%, 100% { transform: translateY(0) rotate(.2deg); } 50% { transform: translateY(-10px) rotate(-.6deg); } }
@keyframes drops { 0% { transform: translateY(-16px) scale(.7); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(108px) scale(1.1); opacity: 0; } }
@keyframes tokenRoll { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(34deg); } }
@keyframes sealSpin { to { transform: rotate(calc(360deg + var(--seal-tilt, 0deg))); } }
@keyframes pulseRing { 0% { transform: scale(.42); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes ribbonFloat { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-14px); } }
@keyframes tubeDrift { 0%, 100% { left: 9%; transform: scale(.86); } 50% { left: 82%; transform: scale(1.1); } }

@media (max-width: 760px) {
  .frosted-sign { left: 5vw; width: 90vw; top: 9vh; }
  .primary-tank { right: -8vw; top: 45vh; width: 42vw; height: 48vh; opacity: .85; }
  .chapter-label, .right-label, .chute-label, .final-label { left: 5vw; right: auto; top: 8vh; width: 88vw; }
  .pour-rail, .pneumatic-tube { left: 4vw; width: 94vw; top: 55vh; }
  .menu-board, .closing-menu, .receipt-ribbon { left: 6vw; right: auto; width: 88vw; bottom: 13vh; }
  .inspection-lens { left: 8vw; top: 37vh; width: 260px; height: 260px; }
  .pressure-gauge { right: 8vw; top: 38vh; width: 170px; height: 170px; }
  .secondary-tank { right: 4vw; top: 42vh; width: 88vw; height: 36vh; }
  .chrome-tap { right: 7vw; top: 42vh; transform: scale(.8); }
  .opening-coasters, .currency-tap-strip, .audit-menu, .settlement-stamps { display: none; }
}