:root {
  --moon-porcelain: #F4F0DD;
  --lacquer-midnight: #080A16;
  --bamboo-shadow: #183B2D;
  --celadon-glow: #9FE2BF;
  --kaguya-violet: #8D7CFF;
  --silver-mercury: #C9D4E5;
  --vermilion-seal: #E84A3A;
  --deep-ink-blue: #111A33;
  --mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --gothic: "Zen Kaku Gothic New", Inter, system-ui, sans-serif;
  --syne: Syne, "Arial Black", system-ui, sans-serif;
  --serif-jp: "Noto Serif JP", "Yu Mincho", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--silver-mercury);
  background:
    radial-gradient(circle at 70% 15%, rgba(141, 124, 255, 0.18), transparent 35vw),
    radial-gradient(circle at 20% 90%, rgba(159, 226, 191, 0.12), transparent 38vw),
    linear-gradient(180deg, var(--lacquer-midnight), var(--deep-ink-blue) 48%, #050711);
  font-family: var(--gothic);
  overflow-x: hidden;
}

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.chamber-shell { position: relative; z-index: 1; min-height: 500vh; }
.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8vh 7vw;
  isolation: isolate;
}

.moon-stage {
  position: fixed;
  width: min(72vw, 860px);
  height: min(72vw, 860px);
  right: -7vw;
  top: 8vh;
  z-index: 1;
  transform: translate3d(0, 0, 0) rotate(var(--chamber-rotation, 0deg));
  transition: transform 900ms cubic-bezier(.2,.7,.1,1);
  pointer-events: none;
}

.moon-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255,255,255,.75), transparent 10%),
    radial-gradient(circle at 67% 48%, rgba(17,26,51,.14), transparent 14%),
    radial-gradient(circle at 49% 68%, rgba(24,59,45,.12), transparent 10%),
    radial-gradient(circle at 50% 50%, var(--moon-porcelain), var(--silver-mercury) 62%, #aeb9cf 80%, var(--kaguya-violet) 100%);
  box-shadow: 0 0 70px rgba(244,240,221,.36), inset -35px -45px 90px rgba(8,10,22,.2), inset 28px 20px 45px rgba(255,255,255,.42);
  overflow: hidden;
}

.moon-texture,
.moon-texture::before,
.moon-texture::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 45% 45%, rgba(8,10,22,.08) 0 2px, transparent 3px 22px),
    linear-gradient(115deg, transparent 0 34%, rgba(159,226,191,.16) 42%, transparent 56%);
  mix-blend-mode: multiply;
  opacity: .62;
}
.moon-texture::before { transform: rotate(38deg) scale(.84); opacity: .34; }
.moon-texture::after { transform: rotate(-21deg) scale(1.08); opacity: .24; }

.moon-ripple {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  left: 38%;
  top: 42%;
  border-radius: 50%;
  border: 1px solid rgba(141,124,255,.75);
  opacity: 0;
  transform: scale(.2);
}
.moon-ripple.pulse { animation: ripple 1.2s ease-out; }

.moon-reflection {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -21%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(244,240,221,.26), transparent), repeating-linear-gradient(0deg, rgba(201,212,229,.18) 0 2px, transparent 4px 13px);
  filter: blur(8px);
  transform: scaleY(.36);
  opacity: .68;
}

.rim-label {
  position: absolute;
  left: 50%;
  color: rgba(8,10,22,.56);
  font: 700 clamp(.62rem, 1vw, .88rem)/1 var(--syne);
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rim-label.top { top: 6%; transform: translateX(-50%); }
.rim-label.bottom { bottom: 7%; transform: translateX(-50%) rotate(180deg); }

.bamboo-curtain {
  position: fixed;
  top: -8vh;
  bottom: -8vh;
  width: 28vw;
  z-index: 4;
  pointer-events: none;
  transition: transform 1400ms cubic-bezier(.22,.9,.18,1);
}
.bamboo-left { left: 0; }
.bamboo-right { right: 0; }
.opened .bamboo-left { transform: translateX(-16vw); }
.opened .bamboo-right { transform: translateX(16vw); }
.bamboo-curtain span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(18px, 3vw, 42px);
  border-radius: 999px;
  background:
    repeating-linear-gradient(180deg, transparent 0 70px, rgba(159,226,191,.2) 72px 79px, transparent 81px 136px),
    linear-gradient(90deg, #07120e, var(--bamboo-shadow), #07120e);
  box-shadow: inset 0 0 16px rgba(159,226,191,.16), 0 0 26px rgba(8,10,22,.9);
  transform-origin: bottom;
  animation: sway 5.8s ease-in-out infinite alternate;
}
.bamboo-curtain span:nth-child(1) { left: 2%; transform: rotate(-4deg); }
.bamboo-curtain span:nth-child(2) { left: 20%; transform: rotate(2deg); animation-delay: -.8s; }
.bamboo-curtain span:nth-child(3) { left: 43%; transform: rotate(-1deg); animation-delay: -1.3s; }
.bamboo-curtain span:nth-child(4) { left: 64%; transform: rotate(3deg); animation-delay: -2s; }
.bamboo-curtain span:nth-child(5) { left: 82%; transform: rotate(-2deg); animation-delay: -2.7s; }

.phase-nav {
  position: fixed;
  left: 2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: grid;
  gap: .7rem;
}
.phase-nav button {
  width: 74px;
  border: 1px solid rgba(201,212,229,.22);
  border-radius: 999px 999px 999px 18px;
  padding: .55rem .7rem;
  color: var(--silver-mercury);
  background: rgba(8,10,22,.56);
  font: 700 .68rem/1 var(--syne);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .35s ease;
}
.phase-nav button.active { color: var(--lacquer-midnight); background: var(--celadon-glow); box-shadow: 0 0 22px rgba(159,226,191,.36); }

.gate-copy {
  position: relative;
  z-index: 5;
  width: min(720px, 72vw);
  margin-right: 18vw;
  transform: translateY(4vh);
}
.eyebrow {
  margin: 0 0 .8rem;
  color: var(--celadon-glow);
  font: 800 .78rem/1 var(--syne);
  letter-spacing: .32em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--mincho); font-weight: 500; margin: 0; }
h1 {
  color: var(--moon-porcelain);
  font-size: clamp(5rem, 15vw, 12.5rem);
  line-height: .84;
  letter-spacing: -.08em;
  text-shadow: 0 0 32px rgba(244,240,221,.2), 0 12px 70px rgba(141,124,255,.34);
}
.ceremony-line {
  width: min(520px, 70vw);
  color: rgba(201,212,229,.78);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.8;
}
.vertical-plaque {
  position: absolute;
  right: 10vw;
  top: 18vh;
  z-index: 5;
  writing-mode: vertical-rl;
  color: var(--lacquer-midnight);
  background: linear-gradient(var(--moon-porcelain), var(--silver-mercury));
  border-radius: 999px;
  padding: 2rem .7rem;
  font-family: var(--serif-jp);
  letter-spacing: .28em;
  box-shadow: 0 0 26px rgba(244,240,221,.22);
}
.crescent-paddle {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--vermilion-seal);
  box-shadow: inset 34px 0 0 var(--lacquer-midnight), 0 0 28px rgba(232,74,58,.25);
}
.paddle-one { left: 18vw; bottom: 15vh; transform: rotate(-31deg); }
.seal {
  display: grid;
  place-items: center;
  color: var(--moon-porcelain);
  background: var(--vermilion-seal);
  font: 900 .8rem/1 var(--syne);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.seal-gate { position: absolute; left: 54vw; top: 23vh; width: 62px; height: 62px; border-radius: 49% 51% 45% 55%; transform: rotate(14deg); }

.arc-plaque, .rite-panel, .final-plaque {
  z-index: 3;
  width: min(560px, 82vw);
  border: 1px solid rgba(201,212,229,.2);
  background: linear-gradient(135deg, rgba(17,26,51,.8), rgba(8,10,22,.58));
  box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(244,240,221,.08);
  backdrop-filter: blur(14px);
}
.arc-plaque { margin-left: -28vw; padding: 2rem 2.2rem; border-radius: 42% 20px 42% 20px / 28% 20px 28% 20px; }
.arc-plaque span { color: var(--vermilion-seal); font: 900 .76rem/1 var(--syne); text-transform: uppercase; letter-spacing: .25em; }
h2 { color: var(--moon-porcelain); font-size: clamp(2.2rem, 5vw, 5.6rem); line-height: 1; }
.arc-plaque p, .rite-panel p, .final-plaque p { color: rgba(201,212,229,.78); line-height: 1.8; font-size: 1.03rem; }
.moon-gavel { position: absolute; left: 50%; top: 44%; z-index: 4; width: 170px; height: 110px; transform: rotate(-20deg); filter: drop-shadow(0 0 24px rgba(159,226,191,.22)); }
.gavel-head { position: absolute; width: 92px; height: 42px; border-radius: 50%; background: var(--moon-porcelain); box-shadow: inset 24px 0 0 var(--lacquer-midnight), 0 0 15px rgba(244,240,221,.35); }
.gavel-handle { position: absolute; width: 132px; height: 12px; left: 46px; top: 50px; border-radius: 999px; background: linear-gradient(90deg, var(--bamboo-shadow), var(--celadon-glow)); transform: rotate(38deg); }
.rim-notes { position: absolute; right: 6vw; bottom: 14vh; z-index: 3; display: grid; gap: .6rem; color: var(--celadon-glow); font: 700 .7rem/1 var(--syne); letter-spacing: .18em; text-transform: uppercase; }

.scene-lots { min-height: 130vh; }
.lot-intro { position: absolute; z-index: 3; left: 10vw; top: 13vh; max-width: 480px; }
.lot-orbit { position: relative; z-index: 4; width: min(1000px, 86vw); height: 680px; transform-style: preserve-3d; perspective: 1200px; }
.lot-object {
  position: absolute;
  width: 250px;
  min-height: 330px;
  padding: 1rem 1rem 1.3rem;
  border: 1px solid rgba(201,212,229,.24);
  border-radius: 46% 46% 24px 24px / 16% 16% 24px 24px;
  background: linear-gradient(180deg, rgba(244,240,221,.08), rgba(8,10,22,.72));
  box-shadow: 0 30px 80px rgba(0,0,0,.42), inset 0 0 34px rgba(141,124,255,.08);
  transform: translate3d(var(--x), var(--y), var(--z)) rotate(var(--r));
  transition: transform 160ms ease-out;
}
.lot-object::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at 50% 0, rgba(159,226,191,.18), transparent 45%); pointer-events: none; }
.robe { --x: 0px; --y: 245px; --z: -80px; --r: -13deg; left: 5%; top: 18%; }
.tide { --x: 0px; --y: 40px; --z: 70px; --r: 9deg; left: 24%; top: 2%; }
.star { --x: 0px; --y: 190px; --z: 120px; --r: -4deg; left: 43%; top: 26%; }
.mirror { --x: 0px; --y: -5px; --z: 20px; --r: 12deg; right: 11%; top: 8%; }
.boat { --x: 0px; --y: 280px; --z: -40px; --r: -9deg; right: 2%; top: 35%; }
.lot-mark { position: absolute; right: .8rem; top: .65rem; color: rgba(244,240,221,.12); font: 900 4rem/.8 var(--syne); }
.lot-figure { position: relative; height: 150px; margin: .8rem 0 1rem; display: grid; place-items: center; }
.lot-figure i { display: block; position: relative; width: 86px; height: 104px; }
.robe .lot-figure i { border-radius: 60% 60% 40% 40%; background: linear-gradient(135deg, transparent 15%, var(--silver-mercury), transparent 75%); filter: blur(.2px); }
.tide .lot-figure i { border-radius: 44% 44% 52% 52%; border: 2px solid var(--silver-mercury); background: radial-gradient(circle at 50% 68%, var(--kaguya-violet), transparent 30%), linear-gradient(180deg, transparent 45%, rgba(159,226,191,.55)); }
.star .lot-figure i { width: 58px; border-radius: 999px; background: linear-gradient(90deg, #07120e, var(--bamboo-shadow)); box-shadow: inset 0 0 0 14px rgba(159,226,191,.12), 0 0 24px var(--celadon-glow); }
.mirror .lot-figure i { border-radius: 50%; background: radial-gradient(circle, var(--moon-porcelain), var(--silver-mercury) 62%, var(--kaguya-violet)); box-shadow: inset 0 0 0 8px rgba(8,10,22,.2); }
.boat .lot-figure i { width: 128px; height: 70px; clip-path: polygon(0 45%, 50% 0, 100% 45%, 77% 100%, 22% 100%); background: linear-gradient(135deg, var(--moon-porcelain), var(--silver-mercury)); box-shadow: 0 0 20px rgba(232,74,58,.25); }
.lot-object h3 { color: var(--moon-porcelain); font-size: 1.35rem; line-height: 1.1; }
.lot-object p { color: rgba(201,212,229,.72); font-size: .92rem; line-height: 1.55; }

.scene-rite { background: radial-gradient(circle at 50% 50%, rgba(141,124,255,.12), transparent 46%); }
.rite-panel { margin-left: -16vw; padding: 2rem; border-radius: 34px 34px 34px 100px; }
.stroke-field { display: flex; align-items: center; gap: .8rem; height: 160px; margin: 1rem 0; }
.stroke-field span {
  display: block;
  width: 18%;
  height: 6px;
  border-radius: 999px;
  background: var(--vermilion-seal);
  box-shadow: 0 0 22px rgba(232,74,58,.48);
  opacity: .18;
  transform: rotate(var(--angle)) scaleX(.25);
  transform-origin: left center;
  transition: opacity .7s ease, transform .9s cubic-bezier(.18,.8,.16,1);
}
.stroke-field span:nth-child(1) { --angle: -48deg; }
.stroke-field span:nth-child(2) { --angle: 32deg; }
.stroke-field span:nth-child(3) { --angle: -14deg; }
.stroke-field span:nth-child(4) { --angle: 66deg; }
.stroke-field span:nth-child(5) { --angle: -28deg; }
.stroke-field.ignite span { opacity: 1; transform: rotate(var(--angle)) scaleX(1); }
.rabbit-constellation { position: absolute; right: 17vw; top: 30vh; z-index: 3; width: 270px; height: 270px; }
.rabbit-constellation::before { content: ""; position: absolute; inset: 20%; border: 1px dashed rgba(159,226,191,.25); border-radius: 46% 54% 48% 52%; opacity: var(--rabbit-lines, .2); transition: opacity .4s ease; }
.rabbit-constellation span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--celadon-glow); box-shadow: 0 0 16px var(--celadon-glow); }
.rabbit-constellation span:nth-child(1) { left: 20%; top: 34%; }
.rabbit-constellation span:nth-child(2) { left: 38%; top: 22%; }
.rabbit-constellation span:nth-child(3) { left: 54%; top: 40%; }
.rabbit-constellation span:nth-child(4) { left: 68%; top: 32%; }
.rabbit-constellation span:nth-child(5) { left: 47%; top: 64%; }
.rabbit-constellation span:nth-child(6) { left: 29%; top: 74%; }

.scene-vessel { overflow: hidden; }
.vessel-wrap { position: relative; z-index: 4; width: min(960px, 86vw); height: 520px; }
.return-vessel { position: absolute; left: var(--vessel-x, 8%); top: 43%; width: 180px; height: 120px; filter: drop-shadow(0 0 20px rgba(244,240,221,.28)); transition: left .4s ease; }
.sail { position: absolute; left: 48px; top: 4px; width: 76px; height: 84px; clip-path: polygon(0 100%, 100% 100%, 18% 0); background: linear-gradient(135deg, var(--moon-porcelain), var(--silver-mercury)); }
.hull { position: absolute; left: 20px; right: 0; bottom: 12px; height: 34px; border-radius: 0 0 80px 80px; background: linear-gradient(90deg, var(--bamboo-shadow), var(--celadon-glow), var(--bamboo-shadow)); }
.final-plaque { position: absolute; right: 0; bottom: 4%; padding: 2rem; border-radius: 28px 110px 28px 28px; }
.offering-link { display: inline-block; margin-top: 1rem; padding: .9rem 1.4rem; border-radius: 999px 999px 999px 18px; color: var(--lacquer-midnight); background: var(--moon-porcelain); font: 900 .72rem/1 var(--syne); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 24px rgba(244,240,221,.2); }

@keyframes sway { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
@keyframes ripple { 0% { opacity: .8; transform: scale(.2); } 100% { opacity: 0; transform: scale(5.2); } }

@media (max-width: 760px) {
  .moon-stage { width: 105vw; height: 105vw; right: -45vw; top: 12vh; opacity: .72; }
  .phase-nav { left: 50%; top: auto; bottom: 1rem; transform: translateX(-50%); display: flex; }
  .phase-nav button { width: auto; padding: .55rem .58rem; font-size: .58rem; }
  .gate-copy, .arc-plaque, .rite-panel { margin-left: 0; margin-right: 0; }
  .vertical-plaque, .rim-notes { display: none; }
  .lot-orbit { height: auto; display: grid; gap: 1rem; padding-top: 30vh; }
  .lot-object { position: relative; left: auto; right: auto; top: auto; width: 100%; transform: none !important; }
  .rabbit-constellation { opacity: .45; right: -8vw; }
  .final-plaque { left: 0; right: auto; }
}