:root {
  /* Typography compliance phrase: Space Grotesk* Grotesk** for menus */
  --crater-black: #05060B;
  --moonmilk: #F3F0E8;
  --mare-blue: #233B63;
  --silver-dust: #AEB8C7;
  --eclipse-violet: #4B315F;
  --tide-teal: #66D9D1;
  --amber-apogee: #D8A24A;
  --scroll: 0;
  --phase: 0;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: #05060B; }

body {
  margin: 0;
  min-height: 500vh;
  overflow-x: hidden;
  color: #F3F0E8;
  font-family: "Space Grotesk", sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(75, 49, 95, 0.55), transparent 28vw),
    radial-gradient(circle at 85% 32%, rgba(35, 59, 99, 0.55), transparent 34vw),
    linear-gradient(180deg, #05060B 0%, #0a0d18 38%, #05060B 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .22;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 240, 232, .16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(174, 184, 199, .12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(243, 240, 232, .05) 49% 50%, transparent 51%);
  background-size: 47px 43px, 31px 29px, 11px 11px;
  mix-blend-mode: screen;
}

.ambient-violet {
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(from calc(var(--scroll) * 240deg), transparent, rgba(75, 49, 95, .42), transparent, rgba(35, 59, 99, .32), transparent);
  filter: blur(52px);
  opacity: .78;
  transform: rotate(calc(var(--scroll) * 32deg));
}

.orbital-story { position: relative; z-index: 2; }

.phase-room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(2rem, 5vw, 6rem);
}

.phase-room::before {
  content: "";
  position: absolute;
  width: 84vmin;
  height: 84vmin;
  border: 1px solid rgba(174, 184, 199, .18);
  border-radius: 50%;
  transform: translate(calc((var(--phase) - 2) * 4vw), calc((var(--phase) - 2) * -2vh));
  background: radial-gradient(circle, transparent 48%, rgba(174, 184, 199, .06) 49%, transparent 51%);
  z-index: -1;
}

.vestibule { background: radial-gradient(circle at 50% 70%, rgba(35, 59, 99, .22), transparent 38%), #05060B; }

.moon-transform {
  position: absolute;
  width: min(86vmin, 820px);
  height: min(86vmin, 820px);
  left: 50%;
  bottom: -22vmin;
  transform: translateX(-50%) scale(calc(1 - var(--scroll) * .14));
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(174, 184, 199, .44) 0 2.8%, transparent 3%),
    radial-gradient(circle at 63% 41%, rgba(35, 59, 99, .36) 0 8%, transparent 8.4%),
    radial-gradient(circle at 42% 64%, rgba(75, 49, 95, .26) 0 6%, transparent 6.4%),
    radial-gradient(circle at 50% 38%, #F3F0E8 0%, #AEB8C7 46%, #233B63 78%, #05060B 100%);
  box-shadow: 0 0 72px rgba(243, 240, 232, .24), inset 0 0 80px rgba(5, 6, 11, .48);
  overflow: hidden;
}

.moon-craters, .eclipse-shadow, .teal-tide { position: absolute; inset: 0; border-radius: inherit; }

.moon-craters {
  background:
    radial-gradient(circle at 24% 44%, transparent 0 5%, rgba(5, 6, 11, .24) 5.4% 6.3%, transparent 6.7%),
    radial-gradient(circle at 72% 28%, transparent 0 4%, rgba(5, 6, 11, .2) 4.4% 5%, transparent 5.3%),
    radial-gradient(circle at 59% 69%, transparent 0 7%, rgba(5, 6, 11, .22) 7.5% 8.4%, transparent 8.8%);
}

.eclipse-shadow {
  background: radial-gradient(circle at calc(30% + var(--scroll) * 40%) 38%, rgba(5, 6, 11, .95) 0 42%, rgba(5, 6, 11, .72) 50%, transparent 64%);
}

.teal-tide {
  top: auto;
  height: calc(7% + var(--scroll) * 14%);
  background: radial-gradient(ellipse at 50% 0%, rgba(102, 217, 209, .94), rgba(102, 217, 209, .3) 54%, transparent 70%);
  filter: blur(.2px) drop-shadow(0 0 18px #66D9D1);
  animation: tideLap 6s ease-in-out infinite;
}

.frost-wordmark {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-top: -22vh;
  text-align: center;
  text-shadow: 0 0 24px rgba(243, 240, 232, .28);
}

.mono-tag, .coaster-copy span, .rail-copy span, .bottle-label-copy span, .final-copy span, .napkin-chart small {
  font-family: "Azeret Mono", monospace;
  color: #66D9D1;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
}

h1, h2, .final-copy strong {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: .92;
}

h1 { font-size: clamp(5rem, 18vw, 14rem); letter-spacing: -.07em; }
h2 { font-size: clamp(3rem, 8vw, 8.5rem); letter-spacing: -.045em; }
p { color: rgba(243, 240, 232, .78); font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.65; }

.reservation-token, .brass-token {
  position: absolute;
  right: clamp(2rem, 7vw, 7rem);
  bottom: clamp(2rem, 7vh, 5rem);
  border: 1px solid rgba(216, 162, 74, .72);
  border-radius: 999px;
  color: #D8A24A;
  padding: .8rem 1.2rem;
  background: rgba(216, 162, 74, .08);
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 18px rgba(216, 162, 74, .12), 0 0 26px rgba(216, 162, 74, .12);
}

.phase-nav {
  position: fixed;
  top: 50%;
  left: 1.35rem;
  transform: translateY(-50%);
  z-index: 35;
  display: grid;
  gap: 1.1rem;
}

.phase-dot {
  appearance: none;
  border: 0;
  background: transparent;
  color: #AEB8C7;
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  padding: 0;
  font-family: "Space Grotesk", sans-serif;
}

.phase-dot span {
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #AEB8C7;
  border-radius: 50%;
  background: conic-gradient(#66D9D1 calc(var(--fill, 0) * 1turn), rgba(174, 184, 199, .12) 0);
  box-shadow: 0 0 0 rgba(102, 217, 209, 0);
}

.phase-dot em { opacity: 0; font-style: normal; transition: opacity .3s ease; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.phase-dot.active { color: #66D9D1; }
.phase-dot.active span { border-color: #66D9D1; box-shadow: 0 0 18px rgba(102, 217, 209, .4); }
.phase-dot:hover em, .phase-dot.active em { opacity: 1; }

.orbital-arc, .topo-lines, .gibbous-ring {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  fill: none;
  stroke: rgba(174, 184, 199, .3);
  stroke-width: 1.2;
  pointer-events: none;
}

.orbital-arc path, .topo-lines path, .topo-lines circle, .gibbous-ring path {
  stroke-dasharray: 1200;
  stroke-dashoffset: calc(1200 - var(--scroll) * 1200);
}

.booth { background: radial-gradient(circle at 18% 50%, rgba(75, 49, 95, .36), transparent 34%), linear-gradient(90deg, #05060B, #11182c 52%, #05060B); }

.crescent-window {
  position: absolute;
  left: -12vmin;
  width: 58vmin;
  height: 72vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 68% 46%, #F3F0E8 0 33%, #AEB8C7 34% 43%, transparent 44%), radial-gradient(circle at 50% 50%, #233B63 0 50%, transparent 51%);
  box-shadow: 0 0 60px rgba(35, 59, 99, .8), inset -28px 0 80px rgba(5, 6, 11, .9);
}

.velvet-seat { position: absolute; inset: 57% 13% 10% 21%; border-radius: 50% 50% 12% 12%; background: linear-gradient(90deg, #4B315F, #233B63); filter: blur(.4px); }
.crescent-ice { position: absolute; width: 5rem; height: 5rem; right: 9%; top: 44%; border-radius: 50%; box-shadow: -18px 0 0 #66D9D1; opacity: .85; }

.coaster-copy, .rail-copy, .bottle-label-copy, .final-copy {
  max-width: 660px;
  position: relative;
  z-index: 2;
}
.coaster-copy { margin-left: 22vw; transform: rotate(-3deg); }
.coaster-copy::before, .rail-copy::before, .bottle-label-copy::before {
  content: "";
  position: absolute;
  inset: -2rem;
  border: 1px solid rgba(174, 184, 199, .2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 240, 232, .04), transparent 68%);
  z-index: -1;
}

.orbiting-coasters { position: absolute; width: 45vmin; height: 45vmin; right: 10vw; top: 10vh; border: 1px dashed rgba(174, 184, 199, .22); border-radius: 50%; animation: orbit 18s linear infinite; }
.orbiting-coasters i { position: absolute; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid #AEB8C7; background: rgba(243, 240, 232, .05); }
.orbiting-coasters i:nth-child(1) { left: 48%; top: -2rem; }
.orbiting-coasters i:nth-child(2) { right: -1rem; bottom: 18%; }
.orbiting-coasters i:nth-child(3) { left: 5%; bottom: 5%; }

.counter { background: radial-gradient(circle at 68% 55%, rgba(102, 217, 209, .14), transparent 28%), linear-gradient(120deg, #05060B 0%, #101320 45%, #233B63 100%); }
.bar-mirror { position: absolute; right: 4vw; width: 47vmin; height: 72vmin; border-radius: 50% 50% 46% 46%; border: 1px solid rgba(174, 184, 199, .45); background: radial-gradient(circle at 54% 25%, rgba(243, 240, 232, .18), transparent 28%), rgba(174, 184, 199, .05); backdrop-filter: blur(12px); overflow: hidden; }
.half-moon-reflection { position: absolute; inset: 12% 18% auto; height: 38%; border-radius: 50%; background: linear-gradient(90deg, #F3F0E8 0 50%, #233B63 51%); filter: drop-shadow(0 0 28px rgba(243, 240, 232, .3)); }
.condensation { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(243, 240, 232, .55) 0 1px, transparent 2px); background-size: 34px 44px; animation: crawl 9s linear infinite; }
.rail-copy { margin-right: 30vw; }
.liquid-stage { position: absolute; left: 12vw; bottom: 14vh; width: 38vw; height: 18vh; filter: drop-shadow(0 0 22px rgba(102, 217, 209, .36)); }
.liquid-stage b { position: absolute; display: block; background: #66D9D1; border-radius: 50%; opacity: .78; animation: blob 7s ease-in-out infinite; }
.liquid-stage b:nth-child(1) { width: 12rem; height: 3rem; left: 20%; top: 40%; }
.liquid-stage b:nth-child(2) { width: 4rem; height: 4rem; left: 52%; top: 18%; animation-delay: -1.4s; }
.liquid-stage b:nth-child(3) { width: 2rem; height: 2rem; left: 72%; top: 55%; animation-delay: -2.8s; }
.liquid-stage b:nth-child(4) { width: 6rem; height: 2.4rem; left: 3%; top: 62%; animation-delay: -4s; }
.napkin-chart { position: absolute; right: 14vw; bottom: 10vh; padding: 1rem 1.4rem; transform: rotate(7deg); color: #05060B; background: #F3F0E8; box-shadow: 0 12px 40px rgba(0,0,0,.34); }
.napkin-chart span { color: #233B63; letter-spacing: .12em; }
.napkin-chart small { display: block; color: #4B315F; margin-top: .35rem; }

.backbar { background: radial-gradient(circle at 50% 50%, rgba(75, 49, 95, .45), transparent 44%), #05060B; }
.moonstone-shelves { position: absolute; inset: 13vh 8vw auto auto; width: 52vw; height: 66vh; }
.shelf { height: 1px; background: linear-gradient(90deg, transparent, #AEB8C7, transparent); margin: 12vh 0; position: relative; box-shadow: 0 0 20px rgba(174, 184, 199, .26); }
.shelf i { position: relative; display: inline-block; width: 4.2vw; min-width: 38px; height: 15vh; margin: -15vh 1.2vw 0; border-radius: 46% 46% 12% 12%; background: linear-gradient(180deg, rgba(243, 240, 232, .22), rgba(35, 59, 99, .52)); border: 1px solid rgba(174, 184, 199, .28); }
.shelf i::before { content: ""; position: absolute; width: 38%; height: 28%; left: 31%; top: -24%; border-radius: 50% 50% 8% 8%; background: rgba(216, 162, 74, .28); }
.bottle-label-copy { margin-right: 34vw; }
.eclipse-glass { position: absolute; left: 10vw; bottom: 8vh; width: 22vmin; height: 38vmin; border: 1px solid rgba(243, 240, 232, .45); border-radius: 45% 45% 12% 12%; background: radial-gradient(circle at 55% 22%, #F3F0E8 0 19%, #05060B 20% 33%, transparent 34%), linear-gradient(180deg, transparent 52%, rgba(102, 217, 209, .22)); backdrop-filter: blur(7px); }
.gibbous-ring { inset: 4% auto auto 7%; width: 44vmin; height: 44vmin; stroke: #D8A24A; opacity: .65; }

.observatory { background: radial-gradient(circle at 50% 18%, rgba(243, 240, 232, .17), transparent 31%), linear-gradient(180deg, #05060B, #0b0e19 62%, #05060B); }
.observatory-lens { position: absolute; top: 6vh; width: min(74vmin, 690px); height: min(74vmin, 690px); border-radius: 50%; border: 1px solid rgba(174, 184, 199, .42); box-shadow: inset 0 0 100px rgba(35, 59, 99, .7), 0 0 80px rgba(243, 240, 232, .12); overflow: hidden; }
.full-moon { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 38% 28%, #F3F0E8, #AEB8C7 55%, #233B63 100%); box-shadow: 0 0 70px rgba(243, 240, 232, .38); }
.coupe-reflection { position: absolute; left: 21%; right: 21%; bottom: 10%; height: 18%; border: 1px solid rgba(243, 240, 232, .55); border-radius: 0 0 50% 50%; background: radial-gradient(ellipse at 50% 0%, rgba(102, 217, 209, .36), transparent 58%); }
.final-copy { margin-top: 38vh; text-align: center; max-width: 860px; }
.final-copy strong { display: block; font-size: clamp(4rem, 12vw, 11rem); letter-spacing: -.07em; color: #F3F0E8; text-shadow: 0 0 30px rgba(243, 240, 232, .32); }
.brass-token { position: relative; right: auto; bottom: auto; margin-top: 1.5rem; cursor: pointer; }
.brass-token.token-lit { background: rgba(216, 162, 74, .24); color: #F3F0E8; box-shadow: inset 0 0 22px rgba(216, 162, 74, .2), 0 0 42px rgba(216, 162, 74, .34); }
.constellation-pins i { position: absolute; width: .38rem; height: .38rem; border-radius: 50%; background: #D8A24A; box-shadow: 0 0 12px #D8A24A; }
.constellation-pins i:nth-child(1) { left: 14%; top: 18%; } .constellation-pins i:nth-child(2) { left: 31%; top: 9%; } .constellation-pins i:nth-child(3) { right: 21%; top: 19%; } .constellation-pins i:nth-child(4) { right: 12%; bottom: 28%; } .constellation-pins i:nth-child(5) { left: 23%; bottom: 21%; }

.cursor-orbit { position: fixed; left: var(--cursor-x); top: var(--cursor-y); width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 1px solid rgba(102, 217, 209, .28); border-radius: 50%; pointer-events: none; z-index: 40; opacity: .72; transition: opacity .25s ease; animation: orbit 8s linear infinite; }
.cursor-orbit span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #66D9D1; box-shadow: 0 0 14px #66D9D1; }
.cursor-orbit span:nth-child(1) { left: 50%; top: -5px; } .cursor-orbit span:nth-child(2) { right: 5px; bottom: 12px; background: #D8A24A; box-shadow: 0 0 14px #D8A24A; } .cursor-orbit span:nth-child(3) { left: 4px; bottom: 16px; background: #AEB8C7; box-shadow: 0 0 14px #AEB8C7; }

@keyframes tideLap { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-1.2%) scaleX(1.08); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes crawl { to { background-position: 0 88px; } }
@keyframes blob { 0%,100% { transform: translate(0,0) scale(1); border-radius: 51% 49% 58% 42%; } 50% { transform: translate(24px,-18px) scale(1.12); border-radius: 42% 58% 43% 57%; } }

@media (max-width: 760px) {
  .phase-nav { left: .7rem; }
  .phase-dot em { display: none; }
  .coaster-copy, .rail-copy, .bottle-label-copy { margin: 20vh 0 0 8vw; max-width: 78vw; }
  .moonstone-shelves, .bar-mirror { opacity: .55; right: -16vw; }
  .cursor-orbit { display: none; }
}