:root {
  /* Space Grotesk** Grotes sparingly for numeric labels */
  --glass-blue: #A9F7FF;
  --night: #071A2D;
  --teal: #1BB7C9;
  --white: #F4FFFF;
  --melon: #B8FF6A;
  --pink: #FF6FAE;
  --chrome: #6D7F8E;
  --amber: #FFB84D;
  --display: "Arial Black", "Trebuchet MS", system-ui, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --space: "Space Grotesk**", "Trebuchet MS", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: var(--jp);
  background:
    radial-gradient(circle at 18% 12%, rgba(169, 247, 255, .34), transparent 26rem),
    radial-gradient(circle at 82% 20%, rgba(255, 111, 174, .2), transparent 28rem),
    linear-gradient(145deg, #06111f 0%, var(--night) 44%, #0a3150 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(244,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(169,247,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(244,255,255,.15), transparent 42%);
  background-size: 74px 100%, 100% 86px, 100% 100%;
  mix-blend-mode: screen;
}

.weather-system, .rain-field, .bubble-field, .condensation {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.weather-system { z-index: 3; overflow: hidden; }

.rain-drop {
  position: absolute;
  top: -18vh;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  border-radius: 999px 999px 70% 70%;
  background: linear-gradient(180deg, rgba(244,255,255,.85), rgba(169,247,255,.16));
  box-shadow: 0 0 14px rgba(169,247,255,.55), inset -2px -6px 10px rgba(27,183,201,.35);
  filter: blur(.1px);
  animation: rainFall var(--d) linear infinite;
  animation-delay: var(--delay);
}

@keyframes rainFall {
  0% { transform: translate3d(0, -20vh, 0) scaleY(.7); opacity: 0; }
  10% { opacity: .9; }
  85% { opacity: .75; }
  100% { transform: translate3d(var(--drift), 124vh, 0) scaleY(1.3); opacity: 0; }
}

.bubble {
  position: absolute;
  bottom: -10vh;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border: 1px solid rgba(244,255,255,.55);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgba(244,255,255,.9) 0 8%, rgba(169,247,255,.18) 24%, rgba(27,183,201,.06) 70%);
  box-shadow: inset -8px -10px 24px rgba(27,183,201,.24), 0 0 18px rgba(169,247,255,.25);
  animation: bubbleRise var(--d) ease-in infinite;
  animation-delay: var(--delay);
}

@keyframes bubbleRise {
  from { transform: translate3d(0, 8vh, 0) scale(.6); opacity: 0; }
  12% { opacity: .75; }
  to { transform: translate3d(var(--drift), -118vh, 0) scale(1.05); opacity: 0; }
}

.condensation {
  z-index: 4;
  opacity: .62;
  background:
    radial-gradient(ellipse at 20% 24%, rgba(244,255,255,.2), transparent 18%),
    radial-gradient(ellipse at 65% 16%, rgba(169,247,255,.18), transparent 24%),
    radial-gradient(ellipse at 78% 80%, rgba(244,255,255,.13), transparent 18%),
    repeating-radial-gradient(circle at 30% 40%, rgba(244,255,255,.12) 0 1px, transparent 1px 12px);
  backdrop-filter: blur(5px) saturate(1.3);
  transition: opacity .9s ease, clip-path 1s cubic-bezier(.2,.8,.2,1);
  clip-path: circle(150% at 50% 50%);
}

body.wiped .condensation { opacity: .14; clip-path: circle(0% at var(--wipe-x, 50%) var(--wipe-y, 50%)); }

.wipe-drop {
  position: fixed;
  width: 118px;
  height: 170px;
  left: -16vw;
  top: 12vh;
  border-radius: 60% 60% 68% 68% / 48% 48% 74% 74%;
  background: radial-gradient(circle at 32% 18%, var(--white) 0 8%, rgba(169,247,255,.72) 18%, rgba(27,183,201,.28) 62%, rgba(7,26,45,.04));
  box-shadow: 0 0 36px rgba(169,247,255,.7), inset -16px -24px 30px rgba(27,183,201,.34);
  opacity: 0;
}

body.wiped .wipe-drop { animation: sharpenDrop 1.2s cubic-bezier(.2,.7,.2,1) both; }

@keyframes sharpenDrop {
  0% { transform: translate(-10vw, 0) rotate(8deg); opacity: 0; }
  15% { opacity: .95; }
  100% { transform: translate(124vw, 38vh) rotate(-12deg); opacity: 0; }
}

.droplet-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 16px;
}

.nav-drop {
  width: 18px;
  height: 25px;
  border-radius: 60% 60% 70% 70%;
  background: rgba(169,247,255,.32);
  border: 1px solid rgba(244,255,255,.55);
  box-shadow: inset -2px -5px 7px rgba(27,183,201,.4), 0 0 12px rgba(169,247,255,.28);
  transition: transform .35s ease, background .35s ease;
}

.nav-drop.active { transform: scale(1.45); background: linear-gradient(var(--white), var(--pink)); }

.rain-pane {
  position: fixed;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 124px;
  z-index: 15;
  border: 1px solid rgba(244,255,255,.38);
  border-radius: 48px;
  background: linear-gradient(180deg, rgba(244,255,255,.2), rgba(169,247,255,.08));
  box-shadow: inset 0 0 34px rgba(244,255,255,.12), 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.rain-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(244,255,255,.12) 16px 17px);
}

.vertical-domain {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: .06em;
  color: var(--white);
  text-shadow: 0 0 20px var(--glass-blue), 0 8px 0 rgba(27,183,201,.18);
}

.pressure-dial {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 20px;
  text-align: center;
  font-family: var(--space);
  color: var(--white);
  font-size: 12px;
}

.pressure-dial span { display: block; margin-bottom: 8px; color: var(--melon); }
.pressure-dial small { display: block; margin-top: 8px; color: var(--glass-blue); }

.dial-ring {
  width: 78px;
  height: 78px;
  margin: auto;
  border-radius: 50%;
  padding: 7px;
  background: conic-gradient(var(--pink) 0deg, var(--teal) 0deg, rgba(244,255,255,.1) 0deg);
  box-shadow: inset 0 0 12px rgba(0,0,0,.25), 0 0 20px rgba(27,183,201,.45);
}

.dial-fill {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,26,45,.9) 45%, rgba(244,255,255,.2));
}

main { position: relative; z-index: 5; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: 9vh 9vw 9vh 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: attr(data-chapter);
  position: absolute;
  right: 7vw;
  bottom: 6vh;
  font-family: var(--space);
  font-size: clamp(72px, 13vw, 190px);
  color: rgba(244,255,255,.06);
  z-index: -1;
}

.glass-sheet, .vinyl-label, .last-window, .menu-orb {
  border: 1px solid rgba(244,255,255,.48);
  background: linear-gradient(135deg, rgba(244,255,255,.22), rgba(169,247,255,.08) 45%, rgba(27,183,201,.12));
  box-shadow: inset 0 1px 1px rgba(244,255,255,.75), inset 0 -22px 55px rgba(27,183,201,.12), 0 28px 90px rgba(0,0,0,.34);
  backdrop-filter: blur(20px) saturate(1.5);
}

.hero-glass {
  width: min(980px, 76vw);
  min-height: 520px;
  border-radius: 74px 28px 92px 36px;
  padding: clamp(34px, 6vw, 76px);
  transform: rotate(-1.2deg);
}

.station-label, .vinyl-label span {
  display: inline-flex;
  border-radius: 99px;
  padding: 8px 14px;
  margin: 0 0 28px;
  font-family: var(--jp);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--night);
  background: linear-gradient(90deg, var(--melon), var(--glass-blue));
  box-shadow: 0 0 20px rgba(184,255,106,.28);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(62px, 11vw, 166px);
  line-height: .88;
  letter-spacing: -.08em;
  color: var(--white);
  filter: blur(4px);
  text-shadow: 0 0 24px rgba(169,247,255,.8), 0 12px 0 rgba(27,183,201,.2), 0 28px 60px rgba(255,111,174,.22);
  transition: filter .8s ease, letter-spacing .8s ease;
}

body.wiped .wordmark { filter: blur(0); letter-spacing: -.055em; }

.wordmark span { color: var(--glass-blue); font-size: .42em; letter-spacing: -.03em; }

.serif-line {
  max-width: 640px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.12;
  color: rgba(244,255,255,.88);
}

.wipe-control {
  appearance: none;
  border: 1px solid rgba(244,255,255,.6);
  border-radius: 999px;
  padding: 15px 24px;
  color: var(--night);
  background: linear-gradient(135deg, var(--white), var(--glass-blue) 48%, var(--melon));
  box-shadow: 0 12px 34px rgba(27,183,201,.32), inset 0 1px 0 var(--white);
  font-family: var(--space);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.lens {
  position: absolute;
  right: 11vw;
  top: 15vh;
  width: clamp(140px, 21vw, 300px);
  height: clamp(140px, 21vw, 300px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(244,255,255,.85), rgba(169,247,255,.25) 32%, rgba(255,111,174,.16) 70%);
  border: 1px solid rgba(244,255,255,.65);
  box-shadow: inset -28px -36px 55px rgba(27,183,201,.22), 0 0 70px rgba(169,247,255,.25);
  animation: orbit 7s ease-in-out infinite;
}

.lens span { font-family: var(--display); font-size: 120px; color: rgba(244,255,255,.7); }

@keyframes orbit { 50% { transform: translate(-24px, 30px) rotate(8deg); } }

.puddle-reflection {
  position: absolute;
  left: 48%;
  bottom: 10vh;
  transform: rotate(180deg) skewX(-12deg);
  font-family: var(--display);
  font-size: clamp(46px, 7vw, 110px);
  color: rgba(169,247,255,.18);
  filter: blur(2px);
}

.vestibule { grid-template-columns: 1fr 1fr; gap: 5vw; }

.umbrella-object {
  position: relative;
  width: min(480px, 42vw);
  height: 560px;
}

.umbrella-canopy {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: 230px;
  border-radius: 260px 260px 28px 28px;
  clip-path: polygon(50% 0, 100% 88%, 75% 76%, 50% 90%, 25% 76%, 0 88%);
  background: conic-gradient(from 180deg, rgba(255,111,174,.38), rgba(244,255,255,.58), rgba(169,247,255,.28), rgba(255,111,174,.42));
  border: 2px solid rgba(244,255,255,.5);
  box-shadow: inset 0 0 45px rgba(244,255,255,.24), 0 0 70px rgba(255,111,174,.22);
  animation: floatTilt 5s ease-in-out infinite;
}

.umbrella-stem {
  position: absolute;
  left: 50%;
  top: 245px;
  width: 10px;
  height: 240px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--chrome), var(--white), var(--chrome));
}

.trough {
  position: absolute;
  bottom: 34px;
  left: 13%;
  width: 74%;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(169,247,255,.48), rgba(27,183,201,.22), transparent 72%);
  border: 1px solid rgba(244,255,255,.35);
}

@keyframes floatTilt { 50% { transform: translateY(-18px) rotate(2deg); } }

.vinyl-label {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 30px 72px 38px 48px;
}

.vinyl-label.wide { max-width: 620px; transform: rotate(1deg); }
.vinyl-label.compact { max-width: 500px; justify-self: end; }
.vinyl-label.tall { max-width: 470px; border-radius: 80px 32px 74px 36px; }

.vinyl-label h2, .menu-orb h2, .last-window h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(42px, 6vw, 92px);
  line-height: .92;
  color: var(--white);
  text-shadow: 0 0 22px rgba(169,247,255,.5);
}

.vinyl-label p, .menu-orb p, .last-window p {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 31px);
  line-height: 1.18;
  color: rgba(244,255,255,.82);
}

.bead-curtain {
  position: absolute;
  right: 10vw;
  top: 0;
  width: 180px;
  height: 100%;
  background: repeating-radial-gradient(circle at 20px 20px, rgba(244,255,255,.55) 0 5px, transparent 6px 24px);
  opacity: .28;
}

.menu { grid-template-columns: .9fr 1.1fr; gap: 6vw; }

.menu-orb {
  position: relative;
  width: min(520px, 42vw);
  height: min(520px, 42vw);
  border-radius: 50%;
  padding: 80px 52px;
  display: grid;
  align-content: center;
  text-align: center;
  background: radial-gradient(circle at 30% 20%, rgba(244,255,255,.7), rgba(169,247,255,.3) 24%, rgba(27,183,201,.18) 58%, rgba(7,26,45,.22));
}

.orb-highlight {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border-top: 10px solid rgba(244,255,255,.48);
  transform: rotate(-28deg);
}

.menu-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 18px;
}

.menu-tile {
  min-height: 130px;
  border: 1px solid rgba(244,255,255,.5);
  border-radius: 26px;
  padding: 20px;
  color: var(--white);
  background: linear-gradient(140deg, rgba(244,255,255,.18), rgba(27,183,201,.18));
  backdrop-filter: blur(16px);
  font-family: var(--jp);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(244,255,255,.6), 0 14px 40px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .45s ease, background .45s ease;
}

.menu-tile b { display: block; margin-top: 28px; color: var(--melon); font-family: var(--space); }
.menu-tile.active { transform: rotateY(10deg) translateY(-8px); background: linear-gradient(140deg, rgba(255,111,174,.38), rgba(169,247,255,.25)); }

.drink-display {
  position: absolute;
  right: 12vw;
  bottom: 12vh;
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 88px);
  color: rgba(244,255,255,.16);
  text-transform: uppercase;
}

.ice { grid-template-columns: 1.1fr .9fr; gap: 5vw; }

.ice-well {
  position: relative;
  width: min(580px, 48vw);
  height: 520px;
  border-radius: 44% 56% 48% 52%;
  background: radial-gradient(ellipse at 50% 76%, rgba(27,183,201,.36), rgba(169,247,255,.16), transparent 66%);
  border: 1px solid rgba(244,255,255,.34);
  box-shadow: inset 0 -30px 80px rgba(27,183,201,.2);
}

.ice-cube {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(244,255,255,.62), rgba(169,247,255,.18));
  border: 1px solid rgba(244,255,255,.65);
  box-shadow: inset -18px -22px 36px rgba(27,183,201,.22), 0 18px 44px rgba(0,0,0,.22);
  transform: rotate(var(--r));
  animation: iceBob 4.8s ease-in-out infinite;
}

.ice-cube i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(244,255,255,.55);
  box-shadow: 32px 28px 0 rgba(169,247,255,.38), 72px 82px 0 rgba(244,255,255,.28);
}

.cube-one { --r: -12deg; left: 12%; top: 18%; }
.cube-two { --r: 18deg; right: 14%; top: 30%; animation-delay: -1s; }
.cube-three { --r: 5deg; left: 34%; bottom: 10%; animation-delay: -2s; }

@keyframes iceBob { 50% { transform: translateY(-22px) rotate(calc(var(--r) + 8deg)); border-radius: 36px; } }

.melt-gauge {
  position: absolute;
  left: 220px;
  bottom: 8vh;
  width: min(420px, 42vw);
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(244,255,255,.38);
  background: rgba(244,255,255,.08);
  overflow: hidden;
}

.melt-gauge div { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--glass-blue), var(--melon), var(--amber)); }

.counter { grid-template-columns: 1.2fr .8fr; gap: 6vw; }

.countertop {
  position: relative;
  width: min(720px, 55vw);
  height: 430px;
  border-radius: 54% 46% 38% 62% / 50% 42% 58% 50%;
  background: linear-gradient(180deg, rgba(244,255,255,.28), rgba(169,247,255,.11)), radial-gradient(ellipse at 48% 78%, rgba(255,184,77,.24), transparent 42%);
  border: 1px solid rgba(244,255,255,.45);
  box-shadow: inset 0 4px 0 rgba(244,255,255,.45), inset 0 -60px 90px rgba(27,183,201,.15), 0 40px 90px rgba(0,0,0,.35);
}

.spoon {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 12px;
  height: 310px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--chrome), var(--white), var(--chrome));
  transform-origin: 50% 70%;
}

.spoon::before {
  content: "";
  position: absolute;
  top: -42px;
  left: -16px;
  width: 44px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 34% 22%, var(--white), var(--chrome));
}

.spoon-left { transform: rotate(-31deg); }
.spoon-right { transform: rotate(31deg); }

.coaster {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 100px;
  color: rgba(244,255,255,.72);
  background: radial-gradient(circle, rgba(255,111,174,.22), rgba(169,247,255,.18));
  border: 1px solid rgba(244,255,255,.5);
}

.napkin {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: 230px;
  min-height: 120px;
  border-radius: 10px 22px 12px 18px;
  padding: 18px;
  transform: rotate(7deg);
  color: rgba(7,26,45,.8);
  background: rgba(244,255,255,.68);
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.window { padding-left: 160px; }

.last-window {
  position: relative;
  width: min(1000px, 78vw);
  min-height: 620px;
  border-radius: 110px 36px 120px 42px;
  padding: clamp(38px, 6vw, 88px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7,26,45,.15), rgba(7,26,45,.55)),
    radial-gradient(circle at 73% 22%, rgba(255,184,77,.4), transparent 18%),
    linear-gradient(135deg, rgba(169,247,255,.24), rgba(27,183,201,.08));
}

.city-drops {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7,26,45,.7), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(244,255,255,.12) 35px 38px, transparent 39px 64px);
  opacity: .56;
}

.last-window h2, .last-window p, .final-sign { position: relative; z-index: 1; }
.last-window p { max-width: 620px; }

.final-sign {
  position: absolute;
  left: 8%;
  bottom: 8%;
  font-family: var(--display);
  font-size: clamp(54px, 8vw, 122px);
  color: rgba(169,247,255,.32);
  transform: rotate(180deg) skewX(8deg);
  filter: blur(1px);
}

.citrus-moon {
  position: absolute;
  right: 12vw;
  top: 18vh;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--white), var(--amber) 32%, var(--melon) 70%);
  box-shadow: 0 0 60px rgba(255,184,77,.55);
}

@media (max-width: 900px) {
  .rain-pane { width: 82px; left: 10px; top: 10px; bottom: 10px; }
  .vertical-domain { font-size: 25px; }
  .pressure-dial { display: none; }
  .scene { padding: 8vh 24px 8vh 105px; grid-template-columns: 1fr; }
  .hero-glass, .last-window { width: 100%; }
  .vestibule, .menu, .ice, .counter { grid-template-columns: 1fr; }
  .umbrella-object, .menu-orb, .ice-well, .countertop { width: 100%; max-width: 520px; }
  .menu-orb { height: 360px; }
  .menu-tiles { grid-template-columns: 1fr; }
  .droplet-nav { right: 10px; }
  .melt-gauge { left: 115px; width: calc(100vw - 150px); }
}