:root {
  --moon-shell: #F7F0DA;
  --night-indigo: #151B36;
  --bamboo-glow: #A7C97B;
  --bamboo-shadow: #3E6B4D;
  --plum-ink: #8E375F;
  --silver-mist: #C9D5E8;
  --lacquer-black: #07080D;
  --gold-leaf: #D9B45F;
  --mincho: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Times New Roman", serif;
  --old-mincho: "Iowan Old Style", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --roman: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--moon-shell);
  background:
    radial-gradient(circle at 26% 18%, rgba(247, 240, 218, .16), transparent 19rem),
    radial-gradient(circle at 78% 42%, rgba(142, 55, 95, .13), transparent 21rem),
    linear-gradient(135deg, var(--night-indigo), var(--lacquer-black) 72%);
  font-family: var(--old-mincho);
}

button { font: inherit; color: inherit; cursor: pointer; }

.night-vellum {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .48;
  background-image:
    linear-gradient(90deg, rgba(247, 240, 218, .04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(247, 240, 218, .035) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(201, 213, 232, .1), transparent 12rem),
    radial-gradient(circle at 70% 70%, rgba(217, 180, 95, .08), transparent 10rem);
  background-size: 46px 46px, 59px 59px, auto, auto;
  mix-blend-mode: screen;
}

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

.opening {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(247, 240, 218, .12), transparent 16rem),
    linear-gradient(135deg, var(--night-indigo), var(--lacquer-black));
  transition: opacity 1.6s ease, transform 1.6s ease, visibility 1.6s;
}

body.unfurled .opening { opacity: 0; transform: scale(1.04); visibility: hidden; }

.lacquer-tube {
  position: relative;
  width: min(62vw, 620px);
  height: 74px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5));
}

.tube-body, .tube-cap, .cord { position: absolute; display: block; }
.tube-body {
  inset: 12px 42px;
  border-radius: 40px;
  background:
    linear-gradient(90deg, rgba(217, 180, 95, .45), transparent 13%, transparent 87%, rgba(217, 180, 95, .4)),
    linear-gradient(180deg, #181224, var(--lacquer-black) 52%, #2b1222);
  border: 1px solid rgba(217, 180, 95, .45);
}
.tube-cap { top: 5px; width: 70px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--plum-ink), var(--lacquer-black) 68%); border: 2px solid rgba(217, 180, 95, .5); }
.cap-left { left: 0; }
.cap-right { right: 0; }
.cord { left: 50%; top: -24px; width: 2px; height: 122px; background: var(--gold-leaf); transform-origin: top; box-shadow: 0 0 12px rgba(217, 180, 95, .7); }
.cord-a { transform: rotate(34deg); animation: loosenA 2.8s ease forwards; }
.cord-b { transform: rotate(-34deg); animation: loosenB 2.8s ease forwards; }
.opening-line { position: absolute; bottom: 20vh; font-family: var(--roman); letter-spacing: .24em; color: var(--silver-mist); text-transform: lowercase; }

@keyframes loosenA { 55%, 100% { transform: rotate(74deg) translateY(44px); opacity: .25; } }
@keyframes loosenB { 55%, 100% { transform: rotate(-74deg) translateY(44px); opacity: .25; } }

.scroll {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  min-height: 100vh;
  width: 600vw;
  opacity: 0;
  transform: translateX(calc(var(--scene-x, 0) * -100vw + 10vw)) scaleX(.88);
  transform-origin: left center;
  transition: opacity 1.3s ease .8s, transform 1.8s cubic-bezier(.16, .72, .2, 1) .8s;
}

body.unfurled .scroll { opacity: 1; transform: translateX(calc(var(--scene-x, 0) * -100vw)) scaleX(1); }

.tableau {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  padding: clamp(20px, 4vw, 56px);
  flex: 0 0 100vw;
  display: grid;
  place-items: center;
}

.paper-panel {
  position: relative;
  width: min(94vw, 1280px);
  min-height: min(82vh, 760px);
  overflow: hidden;
  border-radius: 2px 48px 6px 36px;
  color: var(--night-indigo);
  background:
    radial-gradient(circle at 18% 28%, rgba(167, 201, 123, .2), transparent 13rem),
    radial-gradient(circle at 78% 20%, rgba(201, 213, 232, .34), transparent 18rem),
    linear-gradient(100deg, rgba(247, 240, 218, .98), rgba(247, 240, 218, .82));
  box-shadow: 0 26px 90px rgba(7, 8, 13, .48), inset 0 0 60px rgba(142, 55, 95, .08);
}

.paper-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image:
    linear-gradient(110deg, transparent 0 12%, rgba(62, 107, 77, .08) 13%, transparent 14% 42%, rgba(142, 55, 95, .07) 43%, transparent 44%),
    radial-gradient(circle, rgba(7, 8, 13, .18) 1px, transparent 1.8px);
  background-size: auto, 34px 34px;
  pointer-events: none;
}

.hero-paper { clip-path: ellipse(120% 78% at 52% 50%); }

.moon {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 32%, rgba(201, 213, 232, .7), transparent 6%),
    radial-gradient(circle at 40% 64%, rgba(217, 180, 95, .18), transparent 11%),
    radial-gradient(circle, var(--moon-shell), #eadfbf 72%);
  box-shadow: 0 0 70px rgba(247, 240, 218, .52), inset -16px -20px 36px rgba(201, 213, 232, .4);
}
.moon-large { width: clamp(260px, 38vw, 560px); height: clamp(260px, 38vw, 560px); right: -8%; top: -12%; }
.moon-cropped { width: 54vmin; height: 54vmin; right: -12vmin; top: -18vmin; opacity: .82; }
.rabbit-mark { position: absolute; inset: 30% 42% 38% 36%; border-radius: 55% 45% 60% 38%; background: rgba(21, 27, 54, .055); transform: rotate(-20deg); }

.title-block { position: absolute; left: 7%; top: 18%; max-width: 520px; }
h1, h2 { margin: 0; font-family: var(--mincho); font-weight: 500; line-height: .94; }
h1 { font-size: clamp(4.3rem, 10vw, 11rem); letter-spacing: -.07em; color: var(--night-indigo); text-shadow: 0 1px 0 rgba(217, 180, 95, .35); }
h2 { font-size: clamp(2.8rem, 6vw, 7.2rem); color: var(--plum-ink); }
p { line-height: 1.8; }
.eyebrow, .chapter-number { font-family: var(--roman); text-transform: uppercase; letter-spacing: .32em; font-size: .75rem; color: var(--bamboo-shadow); }
.epigraph { font-family: var(--roman); font-size: clamp(1.1rem, 1.6vw, 1.45rem); color: rgba(21, 27, 54, .78); }
.chapter-kana { position: absolute; right: 6%; bottom: 8%; font-family: var(--mincho); font-size: clamp(5rem, 13vw, 13rem); color: rgba(142, 55, 95, .08); writing-mode: vertical-rl; }

.bamboo-grove { position: absolute; left: 42%; bottom: -8%; width: 42%; height: 90%; transform: skewX(-8deg); }
.bamboo { position: absolute; bottom: 0; width: 34px; height: 94%; border-radius: 28px; background: linear-gradient(90deg, #254832, var(--bamboo-shadow), #6f965b); box-shadow: inset 8px 0 rgba(167, 201, 123, .24); }
.bamboo i { display: block; width: 130%; height: 3px; margin-top: 24vh; margin-left: -15%; background: rgba(21, 27, 54, .32); box-shadow: 0 5px 0 rgba(247, 240, 218, .13); }
.stalk-one { left: 0; height: 76%; }
.stalk-two { left: 24%; height: 103%; }
.stalk-three { left: 52%; height: 86%; }
.stalk-four { left: 78%; height: 98%; }
.glowing { background: linear-gradient(90deg, var(--bamboo-shadow), var(--bamboo-glow), #f3ffd0); animation: bambooPulse 3.4s ease-in-out infinite; }
@keyframes bambooPulse { 50% { box-shadow: 0 0 46px rgba(167, 201, 123, .84), inset 8px 0 rgba(247, 240, 218, .38); } }

.moon-mask {
  position: absolute;
  width: 28vmin;
  height: 28vmin;
  border-radius: 50%;
  left: 48%;
  top: 44%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(247, 240, 218, .38), rgba(167, 201, 123, .06) 62%, transparent 70%);
  mix-blend-mode: screen;
}

.poem-slip, .silk-banner {
  position: absolute;
  padding: 18px 20px;
  background: rgba(247, 240, 218, .64);
  border-left: 3px solid var(--gold-leaf);
  color: var(--plum-ink);
  font-family: var(--roman);
  box-shadow: 0 18px 45px rgba(21, 27, 54, .16);
}
.poem-slip { right: 19%; bottom: 16%; width: 220px; transform: rotate(4deg); }
.silk-banner { right: 7%; bottom: 12%; width: 300px; transform: rotate(-2deg); }

.split-paper, .long-paper, .palace-paper, .night-paper, .finale-paper { min-height: min(84vh, 800px); }
.folded-letter, .chapter-heading { position: absolute; max-width: 470px; z-index: 3; }
.folded-letter { left: 8%; top: 16%; padding: 30px; background: rgba(247, 240, 218, .56); border-top: 1px solid rgba(217, 180, 95, .5); box-shadow: 0 18px 60px rgba(21, 27, 54, .12); }
.jp-line { font-family: var(--mincho); font-size: 1.8rem; color: var(--plum-ink); }
.mist-band { position: absolute; inset: auto 0 18% 0; height: 22vh; background: linear-gradient(90deg, transparent, rgba(201, 213, 232, .28), transparent); filter: blur(14px); }

.artifact {
  position: absolute;
  border: 0;
  background: transparent;
  transition: transform .55s ease, filter .55s ease;
  z-index: 4;
}
.artifact:hover, .artifact.collected { transform: translateY(-14px) scale(1.07); filter: drop-shadow(0 0 24px rgba(217, 180, 95, .75)); }

.light-child { right: 27%; bottom: 23%; width: 190px; height: 190px; }
.aura { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(247, 240, 218, .98), rgba(167, 201, 123, .3) 42%, transparent 70%); animation: aura 2.8s ease-in-out infinite; }
.swaddle { position: absolute; z-index: 2; left: 50%; top: 53%; width: 68px; height: 92px; border-radius: 55% 55% 45% 45%; transform: translate(-50%, -50%) rotate(-12deg); background: linear-gradient(135deg, var(--silver-mist), var(--moon-shell)); box-shadow: inset -8px -12px rgba(142, 55, 95, .12); }
@keyframes aura { 50% { transform: scale(1.14); opacity: .72; } }
.screen-silhouette { position: absolute; bottom: 0; width: 22%; height: 54%; background: linear-gradient(180deg, transparent, rgba(21, 27, 54, .14)); filter: blur(.4px); }
.sleeve-left { left: 42%; clip-path: polygon(0 25%, 80% 0, 100% 100%, 0 100%); }
.sleeve-right { right: 3%; clip-path: polygon(20% 0, 100% 28%, 100% 100%, 0 100%); }

.chapter-heading { left: 7%; top: 12%; }
.gift-river { position: absolute; inset: 26% 5% 18% 18%; }
.gift { width: 150px; height: 150px; }
.gift span { position: absolute; inset: 21%; display: block; }
.gift em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 150px; color: var(--night-indigo); font-family: var(--roman); font-style: normal; letter-spacing: .08em; font-size: .9rem; }
.jeweled-branch { left: 4%; top: 14%; }
.jeweled-branch span { background: linear-gradient(30deg, transparent 45%, var(--bamboo-shadow) 46% 52%, transparent 53%), radial-gradient(circle at 28% 42%, var(--gold-leaf) 0 6px, transparent 7px), radial-gradient(circle at 68% 28%, var(--plum-ink) 0 6px, transparent 7px), radial-gradient(circle at 58% 65%, var(--bamboo-glow) 0 7px, transparent 8px); }
.stone-bowl { left: 24%; top: 46%; }
.stone-bowl span { border-radius: 0 0 50% 50%; background: radial-gradient(ellipse at 50% 0, transparent 32%, var(--silver-mist) 34%), linear-gradient(#9fa9b8, #586171); box-shadow: inset 0 -14px rgba(21, 27, 54, .28); }
.fire-rat { left: 45%; top: 8%; }
.fire-rat span { border-radius: 44% 56% 58% 42%; background: radial-gradient(circle at 40% 30%, var(--gold-leaf), transparent 16%), linear-gradient(135deg, var(--plum-ink), #4b1830); }
.dragon-jewel { left: 62%; top: 48%; }
.dragon-jewel span { border-radius: 50%; background: radial-gradient(circle at 33% 30%, white, var(--silver-mist) 22%, var(--night-indigo) 72%); box-shadow: 0 0 28px rgba(201, 213, 232, .8); }
.swallow-shell { left: 80%; top: 18%; }
.swallow-shell span { border-radius: 55% 45% 50% 50%; background: conic-gradient(from 210deg, var(--moon-shell), var(--silver-mist), var(--plum-ink), var(--moon-shell)); clip-path: polygon(50% 0, 100% 86%, 50% 62%, 0 86%); }

.screen-row { position: absolute; right: 6%; bottom: 0; width: 62%; height: 68%; display: flex; gap: 10px; transform: skewX(-7deg); }
.screen-row span { flex: 1; background: linear-gradient(180deg, rgba(247, 240, 218, .08), rgba(201, 213, 232, .34)), repeating-linear-gradient(90deg, rgba(21, 27, 54, .18) 0 2px, transparent 2px 38px); border-top: 4px solid rgba(217, 180, 95, .45); }
.palace-letter { top: 24%; }
.poem-rain { position: absolute; inset: 8% 4% auto auto; width: 42%; height: 74%; }
.poem-rain i { position: absolute; font-style: normal; font-family: var(--mincho); color: rgba(142, 55, 95, .26); animation: poemFall 8s linear infinite; }
.poem-rain i:nth-child(1){left:8%;animation-delay:0s}.poem-rain i:nth-child(2){left:28%;animation-delay:1.6s}.poem-rain i:nth-child(3){left:50%;animation-delay:.7s}.poem-rain i:nth-child(4){left:70%;animation-delay:2.2s}.poem-rain i:nth-child(5){left:88%;animation-delay:1s}
@keyframes poemFall { from { top: -8%; opacity: 0; } 20% { opacity: 1; } to { top: 100%; opacity: 0; } }

.night-paper { color: var(--moon-shell); background: radial-gradient(circle at 72% 22%, rgba(247, 240, 218, .28), transparent 17rem), linear-gradient(100deg, rgba(21, 27, 54, .98), rgba(7, 8, 13, .9)); }
.moon-court h2, .moon-court p { color: var(--moon-shell); }
.moon-court .eyebrow { color: var(--gold-leaf); }
.silver-ladders { position: absolute; right: 12%; top: 0; width: 34%; height: 74%; display: flex; justify-content: space-around; opacity: .72; }
.silver-ladders span { width: 2px; height: 100%; background: linear-gradient(var(--silver-mist), transparent); box-shadow: 16px 0 rgba(201, 213, 232, .48), -16px 0 rgba(201, 213, 232, .48); transform: rotate(8deg); }
.cloud-cart { position: absolute; right: 20%; bottom: 24%; width: 340px; height: 130px; animation: cloudDrift 8s ease-in-out infinite; }
.cloud-cart i { position: absolute; bottom: 0; border-radius: 50%; background: rgba(201, 213, 232, .58); filter: blur(2px); }
.cloud-cart i:nth-child(1){width:180px;height:82px;left:0}.cloud-cart i:nth-child(2){width:220px;height:110px;left:80px;bottom:20px}.cloud-cart i:nth-child(3){width:130px;height:70px;right:0}
@keyframes cloudDrift { 50% { transform: translateX(-34px) translateY(-8px); } }
.moon-seal { right: 12%; bottom: 13%; width: 105px; height: 105px; }
.moon-seal span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--gold-leaf), var(--plum-ink)); box-shadow: inset 0 0 0 12px rgba(7, 8, 13, .18); }

.finale-paper { background: radial-gradient(circle at 42% 42%, rgba(201, 213, 232, .48), transparent 24rem), linear-gradient(100deg, var(--moon-shell), rgba(201, 213, 232, .72)); }
.robe-mist { position: absolute; right: 7%; top: 14%; width: 50%; height: 70%; }
.robe-mist span { position: absolute; width: 70%; height: 28%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(201, 213, 232, .76), transparent); filter: blur(9px); animation: robeWave 6s ease-in-out infinite; }
.robe-mist span:nth-child(1){top:12%;left:8%}.robe-mist span:nth-child(2){top:38%;left:20%;animation-delay:1s}.robe-mist span:nth-child(3){top:62%;left:0;animation-delay:2s}
@keyframes robeWave { 50% { transform: translateX(-40px) scaleX(1.16); opacity: .5; } }
.final-letter { top: 18%; }
.seal-button { position: absolute; left: 10%; bottom: 16%; border: 1px solid rgba(142, 55, 95, .5); background: var(--plum-ink); color: var(--moon-shell); padding: 14px 28px; border-radius: 999px; font-family: var(--roman); letter-spacing: .16em; text-transform: lowercase; box-shadow: 0 12px 32px rgba(142, 55, 95, .28); }

.moon-progress {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(7, 8, 13, .42);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(247, 240, 218, .16);
}
.phase { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(201, 213, 232, .45); border-radius: 50%; background: transparent; overflow: hidden; }
.phase span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--moon-shell); transform: translateX(-70%); transition: transform .45s ease, box-shadow .45s ease; }
.phase.active span, .phase.lit span { transform: translateX(0); box-shadow: 0 0 14px rgba(247, 240, 218, .85); }

.memory-tray { position: fixed; right: 22px; top: 22px; z-index: 8; display: flex; gap: 8px; align-items: center; color: var(--silver-mist); font-family: var(--roman); letter-spacing: .18em; font-size: .72rem; text-transform: uppercase; }
.memory-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(217, 180, 95, .5); background: rgba(7, 8, 13, .4); transition: background .4s ease, box-shadow .4s ease; }
.memory-dot.lit { background: var(--gold-leaf); box-shadow: 0 0 12px rgba(217, 180, 95, .9); }

.brush-reveal { opacity: 0; transform: translateY(24px); filter: blur(7px); transition: opacity 1s ease, transform 1s ease, filter 1s ease; }
.tableau.in-view .brush-reveal { opacity: 1; transform: translateY(0); filter: blur(0); }
.tableau::after { content: ""; position: absolute; inset: 8% -4%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(201, 213, 232, .16), transparent); transform: translateX(-70%); animation: mistSlide 12s ease-in-out infinite; }
@keyframes mistSlide { 50% { transform: translateX(70%); } }

body.sealed .scroll { filter: saturate(.78) brightness(.72); }
body.sealed .opening { visibility: visible; opacity: .92; transform: scale(1); }
body.sealed .opening-line { color: var(--moon-shell); }

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .scroll { position: relative; inset: auto; display: block; width: 100%; transform: translateY(4vh) scaleY(.95); }
  body.unfurled .scroll { transform: translateY(0) scaleY(1); }
  .tableau { width: 100%; min-height: 100svh; padding: 14px; }
  .paper-panel { width: 100%; min-height: 88svh; border-radius: 2px 30px 4px 24px; }
  h1 { font-size: clamp(3.6rem, 20vw, 6rem); }
  h2 { font-size: clamp(2.4rem, 13vw, 4rem); }
  .title-block, .folded-letter, .chapter-heading { left: 7%; right: 7%; max-width: none; }
  .bamboo-grove { left: 24%; width: 70%; opacity: .8; }
  .moon-large { right: -28%; top: -8%; }
  .gift-river { inset: 35% 3% 10% 3%; }
  .gift { transform: scale(.74); }
  .jeweled-branch{left:0;top:0}.stone-bowl{left:34%;top:22%}.fire-rat{left:62%;top:0}.dragon-jewel{left:12%;top:56%}.swallow-shell{left:58%;top:58%}
  .silk-banner, .poem-slip { display: none; }
  .screen-row { width: 92%; right: -10%; opacity: .45; }
  .cloud-cart { right: -8%; transform: scale(.7); }
  .moon-progress { bottom: 12px; gap: 8px; }
  .memory-tray { top: 12px; right: 12px; }
}