:root {
  /* Interpret Kaguya through **The Tale of the Bamboo Cutter** as lunar developer ritual. */
  --moon-paper: #F7F3E8;
  --deep-night: #080A12;
  --bamboo-green: #31493C;
  --frost: #C8D5DF;
  --pearl: #FCECC9;
  --plum: #7B2446;
  --gold: #D9B86C;
  --eclipse: #16243A;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans-jp: "Noto Sans JP", Inter, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --brush: "Zen Kurenaido", "Hiragino Mincho ProN", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--moon-paper);
  background:
    radial-gradient(circle at 72% 18%, rgba(252, 236, 201, .18), transparent 25rem),
    linear-gradient(135deg, var(--deep-night) 0%, var(--eclipse) 56%, var(--deep-night) 100%);
  font-family: var(--sans-jp);
}

button { font: inherit; }

.grain, .mica {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.grain {
  opacity: .34;
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(90deg, rgba(247,243,232,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(247,243,232,.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(200,213,223,.2) .7px, transparent 1px);
  background-size: 37px 37px, 41px 41px, 19px 19px;
}

.mica { z-index: 8; }

.dust {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--pearl);
  box-shadow: 0 0 16px var(--pearl);
  opacity: .1;
  transform: translate3d(var(--x), var(--y), 0);
  animation: driftDust var(--d) linear infinite;
}

@keyframes driftDust {
  0% { translate: 0 0; opacity: .04; }
  45% { opacity: .48; }
  100% { translate: 22px -90px; opacity: .03; }
}

.bamboo-ruler {
  position: fixed;
  top: 0;
  left: 2.4vw;
  width: 72px;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.4vh;
}

.ruler-thread {
  position: absolute;
  top: 6vh;
  bottom: 6vh;
  width: 1px;
  background: linear-gradient(var(--frost), var(--gold), var(--frost));
  opacity: .5;
}

.phase-seal {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(200,213,223,.45);
  border-radius: 50%;
  background: rgba(8,10,18,.58);
  color: var(--frost);
  cursor: pointer;
  box-shadow: inset 0 0 14px rgba(200,213,223,.12), 0 0 0 6px rgba(49,73,60,.1);
}

.phase-seal span {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--frost) 50%, transparent 51%);
  opacity: .28;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s ease, opacity .9s ease;
}

.phase-seal em {
  position: absolute;
  left: 46px;
  top: 11px;
  font: 10px var(--mono);
  color: rgba(200,213,223,.62);
  font-style: normal;
  letter-spacing: .12em;
}

.phase-seal.active span { clip-path: inset(0 0 0 0); opacity: .9; }
.phase-seal.active { border-color: var(--pearl); box-shadow: 0 0 24px rgba(252,236,201,.28); }

.ruler-stamp {
  position: absolute;
  bottom: 3vh;
  writing-mode: vertical-rl;
  font: 10px var(--mono);
  letter-spacing: .22em;
  color: rgba(217,184,108,.72);
}

.lunar-scroll { position: relative; }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 13vh 7vw 13vh 18vw;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.chamber::before, .chamber::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12vw;
  z-index: -1;
  opacity: .33;
  background: linear-gradient(90deg, transparent, rgba(49,73,60,.65), transparent), repeating-linear-gradient(0deg, transparent 0 86px, rgba(217,184,108,.28) 87px 90px);
  filter: blur(.2px);
}

.chamber::before { left: 10vw; transform: skewX(-4deg); }
.chamber::after { right: -2vw; transform: skewX(6deg); opacity: .18; }

.bamboo-compiler {
  position: fixed;
  top: 5vh;
  left: 18vw;
  width: 132px;
  height: 90vh;
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 25px 55px rgba(0,0,0,.45));
}

.bamboo-shell {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background:
    linear-gradient(90deg, rgba(247,243,232,.12), transparent 18%, rgba(8,10,18,.26) 62%),
    repeating-linear-gradient(0deg, transparent 0 116px, rgba(217,184,108,.48) 118px 122px),
    linear-gradient(180deg, #31493C, #22382F 42%, #31493C);
  transition: transform 1.25s cubic-bezier(.2,.8,.12,1), border-radius 1.25s ease;
}

.left-shell { left: 0; border-radius: 72px 0 0 72px; }
.right-shell { right: 0; border-radius: 0 72px 72px 0; }

.bamboo-compiler.open .left-shell { transform: translateX(calc(-12px - var(--split, 0px))) rotateY(24deg); }
.bamboo-compiler.open .right-shell { transform: translateX(calc(12px + var(--split, 0px))) rotateY(-24deg); }

.hollow-light {
  position: absolute;
  inset: 1.5% 43%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--pearl), var(--frost), transparent);
  box-shadow: 0 0 34px rgba(252,236,201,.75), 0 0 100px rgba(200,213,223,.32);
  transform: scaleX(.16);
  transition: transform 1.6s cubic-bezier(.2,.8,.12,1);
}

.bamboo-compiler.open .hollow-light { transform: scaleX(1); }

.vertical-wordmark {
  position: absolute;
  inset: 15vh 0 auto;
  writing-mode: vertical-rl;
  margin: auto;
  width: max-content;
  font-family: var(--mincho);
  font-size: clamp(32px, 4.6vw, 68px);
  letter-spacing: .14em;
  color: var(--moon-paper);
  text-shadow: 0 0 26px rgba(252,236,201,.58);
  opacity: 0;
  transition: opacity 1s ease .65s;
}

.bamboo-compiler.open .vertical-wordmark { opacity: 1; }

.code-ribbon {
  position: absolute;
  right: -62px;
  bottom: 13vh;
  writing-mode: vertical-rl;
  font: 11px var(--mono);
  color: rgba(200,213,223,.7);
  letter-spacing: .08em;
}

.moon-window {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, var(--moon-paper), var(--pearl) 44%, var(--frost) 70%, rgba(200,213,223,.05) 71%),
    var(--pearl);
  box-shadow: 0 0 80px rgba(252,236,201,.42), inset -22px -18px 50px rgba(22,36,58,.18);
  opacity: .92;
}

.hero-moon { width: 34vw; height: 34vw; min-width: 330px; min-height: 330px; right: 5vw; top: 12vh; }
.eclipse-moon { width: 28vw; height: 28vw; right: 14vw; top: 18vh; clip-path: circle(48% at var(--eclipse-x, 42%) 50%); }
.return-moon { width: 38vw; height: 38vw; right: -4vw; bottom: 2vh; background: radial-gradient(circle, var(--frost), var(--eclipse) 64%, transparent 65%); }

.moon-ring-text {
  position: absolute;
  inset: -24px;
  border: 1px solid rgba(217,184,108,.36);
  border-radius: 50%;
  color: var(--plum);
  font: 10px var(--mono);
  letter-spacing: .45em;
  display: grid;
  place-items: start center;
  padding-top: 14px;
  animation: rotateRing 28s linear infinite;
}

@keyframes rotateRing { to { transform: rotate(360deg); } }

.slip {
  position: relative;
  max-width: 610px;
  padding: clamp(28px, 4vw, 54px);
  color: var(--deep-night);
  background:
    linear-gradient(135deg, rgba(247,243,232,.94), rgba(200,213,223,.82)),
    var(--moon-paper);
  border: 1px solid rgba(252,236,201,.6);
  box-shadow: 0 38px 90px rgba(0,0,0,.34), inset 0 0 25px rgba(217,184,108,.16);
  clip-path: polygon(0 4%, 96% 0, 100% 93%, 6% 100%);
  transform: translateX(var(--slip-x, 0)) translateY(22px);
  opacity: .28;
  transition: transform 1s cubic-bezier(.2,.8,.12,1), opacity .8s ease;
}

.chamber.active .slip { opacity: 1; transform: translateX(var(--slip-x, 0)) translateY(0); }

.primary-slip { --slip-x: 7vw; margin-left: 12vw; }
.offset-slip { --slip-x: -2vw; margin-top: 8vh; }
.wide-slip { max-width: 740px; margin-left: 10vw; margin-top: -38vh; }
.command-slip { margin-left: 6vw; }
.repository-slip { margin-left: 16vw; max-width: 700px; }

.seal-caption {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 10px;
  color: var(--moon-paper);
  background: var(--plum);
  font: 12px var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  line-height: .98;
  color: var(--deep-night);
}

h1 { font-size: clamp(54px, 7vw, 118px); max-width: 780px; }
h2 { font-size: clamp(42px, 5.8vw, 86px); }

p {
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.75;
  color: rgba(8,10,18,.76);
}

.brush-note {
  position: absolute;
  right: 11vw;
  bottom: 14vh;
  font-family: var(--brush);
  font-size: clamp(34px, 5vw, 80px);
  color: rgba(252,236,201,.72);
  writing-mode: vertical-rl;
  text-shadow: 0 0 18px rgba(252,236,201,.32);
}

.vertical-code {
  position: absolute;
  left: 36vw;
  top: 14vh;
  writing-mode: vertical-rl;
  font: 13px var(--mono);
  color: rgba(200,213,223,.74);
  letter-spacing: .09em;
  text-shadow: 0 0 14px rgba(200,213,223,.32);
}

.comment-orbit span {
  position: absolute;
  right: 12vw;
  top: 48vh;
  font: 12px var(--mono);
  color: var(--frost);
  text-shadow: 0 0 18px rgba(200,213,223,.5);
  opacity: 0;
  transform: rotate(var(--a)) translateX(18vw) rotate(calc(-1 * var(--a)));
  transition: opacity .8s ease, transform 1.2s ease;
}

.comment-orbit span:nth-child(1){ --a: 12deg; }
.comment-orbit span:nth-child(2){ --a: 96deg; }
.comment-orbit span:nth-child(3){ --a: 188deg; }
.comment-orbit span:nth-child(4){ --a: 282deg; }
.chamber.active .comment-orbit span { opacity: 1; transform: rotate(var(--a)) translateX(15vw) rotate(calc(-1 * var(--a))); }

.constellation {
  position: absolute;
  left: 26vw;
  bottom: 16vh;
  width: 42vw;
  max-width: 560px;
  overflow: visible;
}
.constellation path { fill: none; stroke: rgba(217,184,108,.46); stroke-width: 1; stroke-dasharray: 5 9; }
.constellation circle { fill: var(--pearl); filter: drop-shadow(0 0 8px var(--pearl)); }

.artifacts-chamber { align-items: end; }
.artifact-ring {
  position: relative;
  min-height: 54vh;
  margin-left: 7vw;
  display: flex;
  gap: 22px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.artifact {
  width: min(17vw, 210px);
  min-width: 150px;
  height: 250px;
  padding: 28px 18px;
  color: var(--moon-paper);
  border: 1px solid rgba(200,213,223,.32);
  background: linear-gradient(160deg, rgba(8,10,18,.66), rgba(49,73,60,.42));
  clip-path: polygon(8% 0, 100% 9%, 91% 100%, 0 92%);
  transform: translateY(70px) rotate(var(--r));
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.8,.12,1), opacity .9s ease;
}

.active .artifact { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); }
.artifact:nth-child(1){ --r: -5deg; --y: -10px; transition-delay: .05s; }
.artifact:nth-child(2){ --r: 3deg; --y: -54px; transition-delay: .18s; }
.artifact:nth-child(3){ --r: -2deg; --y: -22px; transition-delay: .31s; }
.artifact:nth-child(4){ --r: 4deg; --y: -78px; transition-delay: .44s; }
.artifact:nth-child(5){ --r: -4deg; --y: -35px; transition-delay: .57s; }

.artifact i {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  position: relative;
  filter: drop-shadow(0 0 18px rgba(252,236,201,.45));
}
.bowl i { border: 9px solid var(--frost); border-top: 0; border-radius: 0 0 55px 55px; }
.branch i::before { content:""; position:absolute; left:35px; top:0; width:6px; height:76px; background:var(--gold); transform:rotate(22deg); box-shadow: -22px 18px 0 -1px var(--pearl), 24px 28px 0 -1px var(--pearl); }
.robe i { background: linear-gradient(120deg, transparent 20%, var(--plum), var(--gold)); clip-path: polygon(50% 0, 100% 100%, 55% 80%, 0 100%); }
.jewel i { background: radial-gradient(circle, var(--pearl), var(--gold) 34%, var(--plum) 62%, transparent 64%); border-radius: 50%; }
.shell i { background: conic-gradient(from 220deg, var(--frost), var(--pearl), var(--eclipse), var(--frost)); clip-path: polygon(50% 0, 90% 80%, 50% 100%, 10% 80%); }

.artifact strong { display: block; font-family: var(--mincho); font-size: 26px; font-weight: 500; }
.artifact span { display: block; margin-top: 12px; color: rgba(200,213,223,.75); font: 12px/1.6 var(--mono); }

.sealed-letter {
  margin-top: 20px;
  padding: 15px 24px;
  border: 1px solid var(--plum);
  color: var(--plum);
  background: linear-gradient(90deg, rgba(252,236,201,.3), rgba(247,243,232,.95));
  font-family: var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sealed-letter.sent { transform: translateX(28px) rotate(-2deg); box-shadow: -28px 18px 0 rgba(123,36,70,.16); }

.letter-trail span {
  position: absolute;
  width: 110px;
  height: 42px;
  right: 26vw;
  top: 51vh;
  border: 1px solid rgba(252,236,201,.4);
  background: rgba(247,243,232,.18);
  clip-path: polygon(0 0, 100% 0, 50% 58%, 0 0, 0 100%, 100% 100%, 100% 0);
  opacity: .16;
  animation: floatLetter 9s ease-in-out infinite;
}
.letter-trail span:nth-child(2){ animation-delay: -3s; top: 38vh; right: 18vw; transform: scale(.7); }
.letter-trail span:nth-child(3){ animation-delay: -6s; top: 64vh; right: 10vw; transform: scale(.55); }
@keyframes floatLetter { 50% { translate: -80px -34px; opacity: .45; } }

.repo-lines {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  font: 13px var(--mono);
  color: var(--bamboo-green);
}
.repo-lines span { border-left: 2px solid var(--gold); padding-left: 14px; }
.final-note { left: 38vw; right: auto; color: rgba(217,184,108,.62); }

@media (max-width: 900px) {
  .bamboo-ruler { left: 0; transform: scale(.78); }
  .bamboo-compiler { left: 12vw; width: 96px; opacity: .72; }
  .chamber { padding-left: 22vw; padding-right: 5vw; }
  .hero-moon, .eclipse-moon, .return-moon { opacity: .42; right: -18vw; }
  .primary-slip, .offset-slip, .wide-slip, .command-slip, .repository-slip { margin-left: 0; --slip-x: 0; }
  .artifact { width: 42vw; }
}