:root {
  --bar-void: #08070D;
  --plum-neon: #8B3DFF;
  --absinthe-cyan: #37F5D4;
  --amber-logic: #FFB84D;
  --maraschino-error: #FF3B6B;
  --ice-milk: #F2EEE6;
  --olive-shadow: #2E3A24;
  --glass-opacity: .22;
  --liquid-level: 58%;
  --bubble-density: 1;
  --scene-temperature: 0deg;
  --title-font: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --serif-font: "Fraunces", Georgia, serif;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --accent-font: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bar-void);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ice-milk);
  font-family: var(--serif-font);
  background:
    radial-gradient(circle at 8% 12%, rgba(139, 61, 255, .24), transparent 32vw),
    radial-gradient(circle at 85% 34%, rgba(55, 245, 212, .12), transparent 30vw),
    linear-gradient(135deg, #08070D 0%, #101017 44%, #09080d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background-image:
    radial-gradient(circle, rgba(242, 238, 230, .18) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 18%, rgba(55,245,212,.04) 19%, transparent 20%);
  background-size: 94px 94px, 7px 100%;
  mix-blend-mode: screen;
  opacity: .25;
}

.scene-temperature {
  position: fixed;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 184, 77, .18), transparent 28%), radial-gradient(circle at 60% 20%, rgba(139, 61, 255, .22), transparent 35%);
  filter: hue-rotate(var(--scene-temperature)) blur(10px);
  transition: filter .8s ease, opacity .8s ease;
}

.bottle-shelves {
  position: fixed;
  inset: 4vh 0 auto 0;
  height: 28vh;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  filter: blur(1.8px);
}

.bottle-shelves span {
  display: block;
  height: 2px;
  margin: 5.4vh 0;
  background: linear-gradient(90deg, transparent, rgba(242,238,230,.15), rgba(139,61,255,.36), rgba(55,245,212,.18), transparent);
  box-shadow: 0 0 28px rgba(139,61,255,.8);
}

.bar-rail {
  position: fixed;
  left: 28px;
  top: 8vh;
  width: 9px;
  height: 84vh;
  z-index: 50;
  background: linear-gradient(#6b451c, #FFB84D 25%, #F2EEE6 50%, #8d5e25 70%, #2b1b0e);
  border-radius: 99px;
  box-shadow: 0 0 22px rgba(255,184,77,.45), inset 2px 0 4px rgba(255,255,255,.55);
}

.bar-rail i {
  position: absolute;
  left: -7px;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(242,238,230,.5);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2EEE6, #37F5D4 20%, rgba(8,7,13,.85) 62%);
  box-shadow: 0 0 16px rgba(55,245,212,.55);
  opacity: .45;
  transition: transform .4s ease, opacity .4s ease;
}

.bar-rail i:nth-child(1) { top: 0; }
.bar-rail i:nth-child(2) { top: 24%; }
.bar-rail i:nth-child(3) { top: 49%; }
.bar-rail i:nth-child(4) { top: 73%; }
.bar-rail i:nth-child(5) { bottom: 0; }
.bar-rail i.active { opacity: 1; transform: scale(1.28); }

.predictive-pour {
  position: fixed;
  top: 0;
  right: 8vw;
  width: 13vw;
  min-width: 105px;
  height: 100vh;
  z-index: 8;
  pointer-events: none;
  opacity: .78;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(55,245,212,.5));
}

.pour-main, .pour-branch {
  fill: none;
  stroke: url(#pourGradient);
  stroke-width: 9;
  stroke-linecap: round;
  filter: url(#liquidGlow);
  stroke-dasharray: 980;
  stroke-dashoffset: var(--pour-offset, 120);
  transition: stroke-width .5s ease;
}

.pour-branch { stroke-width: 5; opacity: var(--branch-opacity, .3); }

.scenario-bar { position: relative; z-index: 2; }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(52px, 7vw, 100px) clamp(28px, 7vw, 118px) clamp(45px, 6vw, 90px) clamp(64px, 10vw, 150px);
  isolation: isolate;
}

.room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.04) 48%, transparent 70%);
  transform: translateX(var(--slide, 0));
  opacity: .65;
}

h1, h2, h3 {
  font-family: var(--title-font);
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0;
  text-transform: uppercase;
  line-height: .86;
}

h1 { font-size: clamp(5.5rem, 16vw, 16rem); text-shadow: 3px 0 #37F5D4, -4px 0 #FF3B6B, 0 0 40px #8B3DFF; }
h2 { font-size: clamp(4rem, 10vw, 11rem); }
h3 { font-size: clamp(2.1rem, 4vw, 5rem); }
p { font-size: clamp(1rem, 1.7vw, 1.45rem); line-height: 1.55; }
.mono { font-family: var(--mono-font); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,238,230,.68); }
.accent { font-family: var(--accent-font); color: var(--amber-logic); letter-spacing: .28em; text-transform: uppercase; }

.threshold { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 4vw; }

.glass-door {
  position: relative;
  min-height: 76vh;
  border: 1px solid rgba(242,238,230,.17);
  border-radius: 42px;
  background: linear-gradient(115deg, rgba(242,238,230,.05), rgba(139,61,255,.12) 36%, rgba(8,7,13,.78) 62%), radial-gradient(circle at 28% 20%, rgba(55,245,212,.18), transparent 25%);
  box-shadow: inset 0 0 70px rgba(255,255,255,.06), 0 38px 90px rgba(0,0,0,.65);
  transform: perspective(900px) rotateY(-10deg) rotateZ(-2deg);
  backdrop-filter: blur(9px);
}

.closed-sign { position: absolute; left: 9%; bottom: 14%; transform: rotate(-4deg); }
.closed-sign span { font-family: var(--mono-font); color: var(--absinthe-cyan); letter-spacing: .18em; text-transform: uppercase; }
.door-refraction { position: absolute; right: 7%; top: 9%; font-family: var(--accent-font); font-size: 4rem; color: rgba(255,59,107,.25); writing-mode: vertical-rl; filter: blur(.5px); }
.droplet { position: absolute; left: 61%; top: 3%; width: 23px; height: 60px; border-radius: 50% 50% 55% 55%; background: radial-gradient(circle at 35% 20%, #F2EEE6, #37F5D4 22%, #8B3DFF 70%); box-shadow: 0 0 30px #37F5D4; animation: crawlDrop 5.5s ease-in-out infinite; }

.threshold-copy { max-width: 620px; padding: 2rem; border-radius: 50% 24px 48px 24px; background: rgba(8,7,13,.34); }

.condensation-wipe { opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
.condensation-wipe.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.countertop { min-height: 115vh; }
.counter-slab {
  position: absolute;
  left: -10vw;
  right: -12vw;
  top: 22vh;
  height: 42vh;
  transform: rotate(-10deg) skewX(-7deg);
  border-radius: 70px;
  background: linear-gradient(100deg, rgba(46,58,36,.86), rgba(8,7,13,.9) 38%, rgba(255,184,77,.24)), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 24px);
  box-shadow: inset 0 0 65px rgba(255,184,77,.12), 0 55px 110px rgba(0,0,0,.75);
}
.etched-title { position: absolute; left: 17vw; top: 7vh; transform: skewX(7deg) rotate(10deg); max-width: 920px; }
.variables { position: absolute; right: 12vw; bottom: 4vh; display: flex; gap: 1rem; transform: skewX(7deg) rotate(10deg); flex-wrap: wrap; max-width: 600px; }
.variable { cursor: pointer; border: 1px solid rgba(242,238,230,.22); border-radius: 999px; padding: .9rem 1.2rem; color: var(--ice-milk); background: rgba(8,7,13,.58); font-family: var(--mono-font); text-transform: uppercase; box-shadow: inset 0 0 18px rgba(255,255,255,.06), 0 0 0 rgba(255,255,255,0); transition: box-shadow .35s ease, transform .35s ease, background .35s ease; }
.variable:hover { transform: translateY(7px) rotate(-2deg); background: color-mix(in srgb, var(--mix-color, #37F5D4) 22%, rgba(8,7,13,.8)); box-shadow: 0 0 28px var(--mix-color, #37F5D4); }

.glass { border: 1px solid rgba(242,238,230,.24); backdrop-filter: blur(13px); background: linear-gradient(100deg, rgba(242,238,230,.09), rgba(255,255,255,.02)); box-shadow: inset 0 0 40px rgba(255,255,255,.06), 0 0 70px rgba(139,61,255,.18); }
.cluster-glass { position: absolute; right: 8vw; top: 22vh; width: min(34vw, 430px); height: 62vh; border-radius: 38% 38% 18% 18%; overflow: hidden; transform: rotate(5deg); }
.liquid-level { position: absolute; left: 0; right: 0; bottom: 0; height: var(--liquid-level); background: linear-gradient(180deg, rgba(55,245,212,.35), rgba(139,61,255,.45) 50%, rgba(255,184,77,.4)); filter: url(#liquidGlow); animation: meniscus 7s ease-in-out infinite; }
.liquid-level::before { content: ""; position: absolute; left: -10%; right: -10%; top: -22px; height: 44px; border-radius: 50%; background: rgba(242,238,230,.18); box-shadow: 0 0 18px #37F5D4; animation: wobble 4s ease-in-out infinite; }
.tasting-note { position: absolute; left: 13vw; bottom: 10vh; max-width: 470px; padding: 1.4rem 1.7rem; border-radius: 28px; background: rgba(242,238,230,.06); border: 1px solid rgba(242,238,230,.16); }

.agent-pearl { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #F2EEE6, #37F5D4 35%, #8B3DFF); box-shadow: 0 0 18px #37F5D4; animation: pearlDrift 9s ease-in-out infinite; }
.p1 { left: 22%; top: 44%; animation-delay: -1s; } .p2 { left: 68%; top: 62%; animation-delay: -2s; } .p3 { left: 41%; top: 74%; animation-delay: -4s; } .p4 { left: 77%; top: 34%; animation-delay: -5s; } .p5 { left: 18%; top: 70%; animation-delay: -6s; }
.ice-cube { position: absolute; left: 35%; top: 46%; width: 92px; height: 92px; transform: rotate(18deg); border: 1px solid rgba(242,238,230,.33); background: rgba(242,238,230,.08); box-shadow: inset 0 0 24px rgba(55,245,212,.2); }
.ice-cube i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--amber-logic); box-shadow: 0 0 12px var(--amber-logic); }
.ice-cube i:nth-child(1) { left: 16px; top: 22px; } .ice-cube i:nth-child(2) { left: 58px; top: 38px; } .ice-cube i:nth-child(3) { left: 36px; top: 66px; }

.branching { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 4vw; background: radial-gradient(circle at 70% 20%, rgba(255,59,107,.14), transparent 34%), transparent; }
.branch-copy { max-width: 600px; }
.liquid-columns { display: flex; gap: clamp(12px, 2vw, 30px); align-items: center; justify-content: center; perspective: 900px; }
.column { position: relative; width: min(18vw, 220px); height: 72vh; padding: 2rem 1rem; overflow: hidden; border-radius: 999px 999px 42px 42px; border: 1px solid rgba(242,238,230,.2); background: rgba(255,255,255,.045); backdrop-filter: blur(12px); transform: rotate(var(--tilt)); box-shadow: inset 0 0 32px rgba(255,255,255,.07), 0 35px 60px rgba(0,0,0,.44); }
.future-a { --tilt: -4deg; } .future-b { --tilt: 2deg; margin-top: 8vh; } .future-c { --tilt: 6deg; }
.column-liquid { position: absolute; left: -15%; right: -15%; bottom: -4%; height: 72%; border-radius: 48% 52% 0 0; animation: columnWobble 6.5s ease-in-out infinite; opacity: .88; }
.future-a .column-liquid { background: linear-gradient(#37F5D4, #8B3DFF); } .future-b .column-liquid { background: linear-gradient(#FFB84D, #2E3A24); animation-delay: -2s; } .future-c .column-liquid { background: linear-gradient(#FF3B6B, #8B3DFF); animation-delay: -4s; }
.column h3, .column p { position: relative; z-index: 2; writing-mode: vertical-rl; text-orientation: mixed; margin: auto; text-shadow: 0 0 18px #08070D; }

.aquarium { min-height: 112vh; padding: 0; }
.agent-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tank-glass { position: absolute; inset: 7vh 8vw; border: 1px solid rgba(242,238,230,.18); border-radius: 54px; background: linear-gradient(120deg, rgba(55,245,212,.07), rgba(139,61,255,.08), rgba(8,7,13,.34)); box-shadow: inset 0 0 70px rgba(55,245,212,.09); pointer-events: none; }
.aquarium-label { position: absolute; left: 11vw; bottom: 12vh; width: min(640px, 70vw); padding: 2rem; border-radius: 34px; background: rgba(8,7,13,.48); border: 1px solid rgba(55,245,212,.18); backdrop-filter: blur(10px); }

.lastcall { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4vw; background: radial-gradient(ellipse at 40% 80%, rgba(255,184,77,.15), transparent 45%); }
.tabletop-reflection { position: relative; min-height: 70vh; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(242,238,230,.08), rgba(139,61,255,.08) 32%, transparent 62%); transform: perspective(800px) rotateX(62deg) rotateZ(-8deg); box-shadow: 0 50px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(255,255,255,.05); }
.glow-ring { position: absolute; border: 3px solid; border-radius: 50%; filter: blur(.2px) drop-shadow(0 0 16px currentColor); opacity: .78; animation: ringSettle 8s ease-in-out infinite; }
.ring-one { color: #37F5D4; width: 38%; height: 28%; left: 18%; top: 34%; } .ring-two { color: #8B3DFF; width: 30%; height: 22%; left: 52%; top: 28%; animation-delay: -2s; } .ring-three { color: #FF3B6B; width: 24%; height: 18%; left: 40%; top: 58%; animation-delay: -4s; }
.wet-title { position: absolute; left: 21%; top: 42%; font-family: var(--title-font); font-size: clamp(5rem, 14vw, 14rem); color: rgba(242,238,230,.16); text-shadow: 0 0 18px #8B3DFF, 0 10px 12px rgba(55,245,212,.16); transform: scaleY(-1); }
.napkin { position: relative; padding: 2rem; min-height: 420px; color: #08070D; background: #F2EEE6; border-radius: 14px 42px 22px 36px; transform: rotate(3deg); box-shadow: 0 34px 80px rgba(0,0,0,.55); }
.napkin h2 { color: #08070D; font-size: clamp(3rem, 7vw, 7rem); }
.napkin .mono { color: #2E3A24; }
.napkin-map { width: 100%; height: 150px; fill: none; stroke: #8B3DFF; stroke-width: 3; opacity: .82; }
.napkin-map circle { fill: #FFB84D; stroke: #FF3B6B; }

.cursor-ripple { position: fixed; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; z-index: 60; opacity: 0; transform: translate(-50%, -50%) scale(.4); background: radial-gradient(circle, rgba(55,245,212,.18), rgba(139,61,255,.1) 34%, transparent 70%); mix-blend-mode: screen; transition: opacity .35s ease; }
.cursor-ripple.active { opacity: 1; }

@keyframes crawlDrop { 0% { transform: translateY(0) scaleY(.75); } 42% { transform: translateY(48vh) scaleY(1.5); } 60% { transform: translateY(55vh) scaleY(.55); } 100% { transform: translateY(0) scaleY(.75); } }
@keyframes meniscus { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2.5%) rotate(1deg); } }
@keyframes wobble { 0%,100% { transform: translateX(-2%); } 50% { transform: translateX(3%); } }
@keyframes pearlDrift { 0%,100% { transform: translate(0,0); } 33% { transform: translate(40px,-55px); } 66% { transform: translate(-35px,30px); } }
@keyframes columnWobble { 0%,100% { transform: translateX(0) skewX(-5deg); border-radius: 48% 52% 0 0; } 50% { transform: translateX(7%) skewX(8deg); border-radius: 58% 42% 0 0; } }
@keyframes ringSettle { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.05) rotate(2deg); } }

@media (max-width: 880px) {
  .room { padding-left: 58px; }
  .threshold, .branching, .lastcall { grid-template-columns: 1fr; }
  .glass-door { min-height: 60vh; }
  .cluster-glass { position: relative; right: auto; top: 42vh; width: 78vw; margin-left: auto; }
  .countertop { min-height: 140vh; }
  .liquid-columns { transform: scale(.88); transform-origin: left center; }
  .column { width: 26vw; }
  .predictive-pour { right: -1vw; opacity: .45; }
}