:root {
  --lacquer: #07060A;
  --pearl: #F4EAD2;
  --bamboo: #193A2E;
  --silver: #BFC7CE;
  --plum: #4B1738;
  --gold: #D8A84E;
  --mist: #9EB6C8;
  --title: "Cormorant Garamond", "Bodoni 72 Smallcaps", "Bodoni Moda", Georgia, serif;
  --body: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--lacquer); }
body {
  margin: 0;
  color: var(--pearl);
  background: var(--lacquer);
  font-family: var(--body);
  overflow-x: hidden;
  cursor: crosshair;
}

.lacquer-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 20%, rgba(244,234,210,.08), transparent 18rem),
    linear-gradient(115deg, rgba(75,23,56,.26), transparent 42%),
    repeating-linear-gradient(98deg, rgba(191,199,206,.025) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 20% 10%, rgba(244,234,210,.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.moonbeam {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 43vw;
  width: 20px;
  z-index: 7;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(191,199,206,.75), rgba(244,234,210,.95), rgba(191,199,206,.5), transparent);
  box-shadow: 0 0 28px rgba(191,199,206,.35), inset 0 0 10px rgba(244,234,210,.65);
  opacity: .72;
}
.moonbeam::before, .moonbeam::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gold);
  opacity: .52;
}
.moonbeam::before { left: -8px; }
.moonbeam::after { right: -8px; }
.droplet {
  position: absolute;
  left: 50%;
  top: -40px;
  width: 15px;
  height: 22px;
  border-radius: 50% 50% 55% 55%;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--pearl) 36%, var(--silver));
  box-shadow: 0 0 24px var(--pearl);
  opacity: 0;
}
.droplet.fall { animation: pearlFall 1.25s cubic-bezier(.4,0,.2,1); }

.phase-nav {
  position: fixed;
  left: calc(43vw - 43px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: grid;
  gap: 28px;
}
.phase-dot {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(191,199,206,.72);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 45%, var(--pearl) 0 32%, transparent 33%), var(--lacquer);
  box-shadow: inset -10px 0 0 rgba(7,6,10,.75), 0 0 0 7px rgba(7,6,10,.5), 0 0 18px rgba(191,199,206,.12);
  color: var(--gold);
  font-family: var(--title);
  letter-spacing: .16em;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.phase-dot::after { content: attr(data-label); font-size: 11px; }
.phase-dot:hover, .phase-dot.active {
  transform: scale(1.18) rotate(-12deg);
  border-color: var(--gold);
  box-shadow: inset -5px 0 0 rgba(75,23,56,.72), 0 0 0 8px rgba(244,234,210,.05), 0 0 32px rgba(244,234,210,.62);
}

.chamber {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8vh 7vw;
}
.chamber::before {
  content: attr(data-chapter);
  position: absolute;
  right: 7vw;
  bottom: 5vh;
  font: 700 clamp(5rem, 14vw, 15rem)/1 var(--title);
  color: transparent;
  -webkit-text-stroke: 1px rgba(191,199,206,.15);
  z-index: -1;
}
.moon {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #fff9e7 0 8%, var(--pearl) 20%, #d8d2c1 54%, var(--silver) 100%);
  box-shadow: 0 0 45px rgba(244,234,210,.4), 0 0 120px rgba(158,182,200,.22);
  z-index: -2;
}
.huge { width: clamp(300px, 58vw, 840px); height: clamp(300px, 58vw, 840px); }
.title-moon { left: 29vw; top: 7vh; transform: translateX(-50%); opacity: .72; }

.plaque {
  width: min(560px, 85vw);
  padding: clamp(28px, 5vw, 58px);
  position: relative;
  border: 1px solid rgba(191,199,206,.48);
  background:
    linear-gradient(135deg, rgba(7,6,10,.78), rgba(75,23,56,.42)),
    repeating-linear-gradient(100deg, rgba(244,234,210,.04) 0 1px, transparent 1px 12px);
  box-shadow: 0 26px 80px rgba(0,0,0,.55), inset 0 0 35px rgba(191,199,206,.08);
  backdrop-filter: blur(7px);
}
.plaque::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(216,168,78,.36);
  pointer-events: none;
}
.hero-plaque { margin-left: 20vw; transform: translateY(4vh); }
.offset-right { margin-left: 35vw; }
.offset-left { margin-right: 36vw; }
.terrace-plaque { margin-left: 22vw; }
.final-plaque { text-align: center; margin-top: 18vh; }
.fan-clip { clip-path: polygon(0 8%, 100% 0, 94% 100%, 8% 92%); }
.crescent-clip { border-radius: 46% 2rem 2rem 46% / 16% 2rem 2rem 16%; }

.ritual {
  margin: 0 0 16px;
  font-family: var(--mincho);
  color: var(--gold);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .76rem;
}
h1, h2 {
  font-family: var(--title);
  text-transform: uppercase;
  letter-spacing: .13em;
  margin: 0;
  font-weight: 500;
  text-shadow: 0 0 20px rgba(244,234,210,.22);
}
h1 { font-size: clamp(4rem, 11vw, 10rem); line-height: .78; }
h2 { font-size: clamp(2.35rem, 5.8vw, 6.5rem); line-height: .88; }
p { font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.75; color: rgba(244,234,210,.82); }
.poem { font-family: var(--mincho); color: rgba(244,234,210,.88); }
.enter-ritual, .quiet-link {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 25px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(7,6,10,.45);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .24em;
  font: 700 .72rem var(--body);
}
.enter-ritual:hover, .quiet-link:hover { background: rgba(216,168,78,.13); box-shadow: 0 0 26px rgba(216,168,78,.25); }

.bamboo-threshold { background: radial-gradient(circle at 36% 34%, rgba(244,234,210,.12), transparent 28%), var(--lacquer); }
.bamboo-curtain, .bamboo-shadows {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transition: transform 1.3s cubic-bezier(.77,0,.18,1);
}
.bamboo-curtain::before, .bamboo-curtain::after, .bamboo-shadows::before, .bamboo-shadows::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, var(--bamboo) 8% 10%, transparent 10% 19%, #0e231c 19% 21%, transparent 21% 32%, var(--bamboo) 32% 35%, transparent 35% 47%, #10271f 47% 49%, transparent 49% 61%, var(--bamboo) 61% 64%, transparent 64% 77%, #0c1d18 77% 80%, transparent 80%);
}
.left-curtain { clip-path: inset(0 50% 0 0); }
.right-curtain { clip-path: inset(0 0 0 50%); }
body.opened .left-curtain { transform: translateX(-24vw); }
body.opened .right-curtain { transform: translateX(24vw); }
.bamboo-shadows { opacity: .32; filter: blur(2px); transform: translateX(var(--shadow-x, 0)); animation: bambooSway 7s ease-in-out infinite alternate; }

.moonstone-counter { background: radial-gradient(circle at 76% 30%, rgba(158,182,200,.18), transparent 28%), linear-gradient(180deg, var(--lacquer), #100711 48%, var(--plum)); }
.counter-moon { width: 38vw; height: 38vw; left: 50vw; top: 7vh; opacity: .32; }
.silver-pour { position: absolute; left: 43vw; top: 0; width: 17px; height: 100%; background: linear-gradient(var(--silver), transparent 72%); filter: blur(.4px); animation: pourPulse 3s ease-in-out infinite; }
.counter-slab {
  position: absolute;
  left: 12vw; right: 8vw; bottom: 10vh; height: 20vh;
  border: 1px solid rgba(191,199,206,.38);
  background: linear-gradient(180deg, rgba(244,234,210,.15), rgba(7,6,10,.9)), repeating-linear-gradient(90deg, rgba(191,199,206,.08) 0 2px, transparent 2px 18px);
  transform: perspective(900px) rotateX(58deg);
}
.coupe { position: absolute; left: 27vw; top: -13vh; width: 150px; height: 130px; border: 2px solid rgba(191,199,206,.75); border-top: 0; border-radius: 0 0 70px 70px; filter: drop-shadow(0 0 22px rgba(158,182,200,.35)); }
.coupe span { position: absolute; left: 18px; right: 18px; top: 35px; height: 22px; background: rgba(158,182,200,.38); border-radius: 50%; }
.coupe.tremble { animation: tremble .42s ease; }
.bar-spoon { position: absolute; right: 16vw; top: -12vh; width: 18px; height: 170px; border: 1px solid var(--gold); border-radius: 50% 50% 10px 10px; transform: rotate(34deg); }
.bar-spoon::after { content:""; position:absolute; bottom:-30px; left:-17px; width: 50px; height: 28px; border: 2px solid var(--gold); border-radius: 50%; }
.tasting-notes { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.tasting-notes li { border-top: 1px solid rgba(191,199,206,.25); padding-top: 12px; }
.tasting-notes b { display:block; color: var(--gold); font-family: var(--title); letter-spacing: .15em; text-transform: uppercase; }
.tasting-notes span { color: rgba(244,234,210,.7); }

.phase-cabinet { background: linear-gradient(180deg, var(--plum), var(--lacquer) 60%); }
.cabinet-frame { position: absolute; right: 8vw; width: min(48vw, 640px); height: min(72vh, 720px); border: 1px solid rgba(191,199,206,.55); box-shadow: inset 0 0 0 18px rgba(7,6,10,.5), inset 0 0 0 20px rgba(216,168,78,.28); }
.phase-wheel { position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(191,199,206,.35); animation: moonRotate 28s linear infinite; }
.phase { position: absolute; width: 80px; height: 80px; margin: -40px; border-radius: 50%; background: var(--pearl); box-shadow: inset -28px 0 0 rgba(7,6,10,.78), 0 0 24px rgba(244,234,210,.32); }
.p1 { left: 50%; top: 0; }.p2 { left: 85%; top: 15%; }.p3 { left: 100%; top: 50%; }.p4 { left: 85%; top: 85%; }.p5 { left: 50%; top: 100%; }.p6 { left: 15%; top: 85%; }.p7 { left: 0; top: 50%; }.p8 { left: 15%; top: 15%; }
.constellation i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.constellation i:nth-child(1){left:16vw;top:18vh}.constellation i:nth-child(2){left:20vw;top:25vh}.constellation i:nth-child(3){left:24vw;top:20vh}.constellation i:nth-child(4){left:29vw;top:30vh}.constellation i:nth-child(5){left:34vw;top:24vh}

.cloud-terrace { background: radial-gradient(circle at 78% 24%, rgba(244,234,210,.18), transparent 24%), linear-gradient(180deg, #0a0a12, #13243a 54%, var(--mist)); }
.cloud { position: absolute; width: 60vw; height: 20vh; border-radius: 50%; background: radial-gradient(ellipse at 30% 50%, rgba(244,234,210,.45), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(158,182,200,.5), transparent 60%); filter: blur(18px); opacity: .75; animation: cloudDrift 12s ease-in-out infinite alternate; }
.cloud-a { left: -12vw; top: 18vh; }.cloud-b { right: -15vw; top: 46vh; animation-delay: -5s; }.cloud-c { left: 18vw; bottom: 4vh; animation-delay: -2s; }
.folded-fan { position: absolute; left: 9vw; top: 18vh; width: 32vw; height: 32vw; border-radius: 50%; background: repeating-conic-gradient(from 220deg, rgba(191,199,206,.18) 0 8deg, transparent 8deg 16deg); clip-path: polygon(50% 100%, 0 10%, 100% 10%); opacity: .55; }
.floating-cups span { position: absolute; width: 72px; height: 26px; border: 1px solid rgba(244,234,210,.7); border-radius: 50%; animation: floatCup 6s ease-in-out infinite; }
.floating-cups span:nth-child(1){left:22vw;bottom:23vh}.floating-cups span:nth-child(2){left:62vw;bottom:34vh;animation-delay:-2s}.floating-cups span:nth-child(3){left:75vw;bottom:16vh;animation-delay:-4s}

.returning-princess { background: radial-gradient(circle at 50% 20%, rgba(244,234,210,.16), transparent 30%), linear-gradient(180deg, var(--mist), var(--lacquer) 62%); }
.final-moon { width: clamp(260px, 34vw, 520px); height: clamp(260px, 34vw, 520px); top: 7vh; left: 50%; transform: translateX(-50%); transition: transform 1.5s ease, opacity 1.5s ease; }
.returning-princess.in-view .final-moon { transform: translate(-50%, -8vh) scale(1.08); }
.deco-arch { position:absolute; top:15vh; width:52vw; height:62vh; border:1px solid rgba(216,168,78,.42); border-bottom:0; border-radius:50% 50% 0 0; box-shadow: inset 0 0 0 16px rgba(191,199,206,.06); }

@keyframes pearlFall { 0% { top:-40px; opacity:0; } 12% { opacity:1; } 82% { opacity:1; } 100% { top: calc(100vh + 40px); opacity:0; } }
@keyframes bambooSway { from { transform: translateX(calc(var(--shadow-x, 0px) - 12px)); } to { transform: translateX(calc(var(--shadow-x, 0px) + 12px)); } }
@keyframes pourPulse { 0%,100% { opacity:.35; transform: scaleY(.92); } 50% { opacity:.9; transform: scaleY(1.04); } }
@keyframes tremble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-1deg); } 70% { transform: translateX(5px) rotate(1deg); } }
@keyframes moonRotate { to { transform: rotate(360deg); } }
@keyframes cloudDrift { from { transform: translateX(-8vw); } to { transform: translateX(8vw); } }
@keyframes floatCup { 0%,100% { transform: translateY(0) rotate(-4deg); opacity:.45; } 50% { transform: translateY(-34px) rotate(5deg); opacity:.9; } }

@media (max-width: 800px) {
  .moonbeam { left: 18vw; }
  .phase-nav { left: calc(18vw - 30px); gap: 18px; }
  .phase-dot { width: 38px; height: 38px; }
  .hero-plaque, .offset-right, .offset-left, .terrace-plaque { margin-left: 18vw; margin-right: 0; }
  .cabinet-frame { right: -22vw; width: 82vw; opacity: .42; }
  .counter-slab { left: 3vw; right: 3vw; }
}