:root {
  --moon-nacre: #F5F0D8;
  --bamboo-shadow: #223B2B;
  --split-bamboo: #9DBA70;
  --heian-violet: #2A1838;
  --lacquer: #B53A2D;
  --powder-gold: #D7B45A;
  --mist-silver: #B9C9D6;
  --display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --serif-jp: "Noto Serif JP", "Yu Mincho", "Times New Roman", serif;
  --gothic: "Zen Kaku Gothic New", Inter, system-ui, sans-serif;
  --latin: "Cormorant Garamond", Cormorant, Garamond, Georgia, serif;
  --progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--moon-nacre);
  background:
    radial-gradient(circle at 64% 18%, rgba(185,201,214,.22), transparent 28vw),
    radial-gradient(circle at 18% 72%, rgba(157,186,112,.14), transparent 32vw),
    linear-gradient(130deg, #120a1b 0%, var(--heian-violet) 48%, #09170f 100%);
  font-family: var(--serif-jp);
}

.grain, .grain::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .22;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(245,240,216,.14) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(103deg, rgba(245,240,216,.05) 0 1px, transparent 1px 5px);
}
.grain::after { content: ""; opacity: .28; transform: rotate(4deg) scale(1.08); }

.bamboo-frame { position: fixed; inset: 0; pointer-events: none; z-index: 12; }
.bamboo-frame span {
  position: absolute; top: -6vh; bottom: -6vh; width: clamp(22px, 4vw, 54px);
  border-radius: 999px;
  background:
    repeating-linear-gradient(180deg, transparent 0 15vh, rgba(245,240,216,.18) 15.2vh 15.8vh, transparent 16vh 28vh),
    linear-gradient(90deg, rgba(0,0,0,.45), var(--bamboo-shadow), #36563a 48%, var(--split-bamboo) 53%, #152419);
  box-shadow: inset 10px 0 16px rgba(0,0,0,.42), inset -7px 0 11px rgba(245,240,216,.12), 0 0 32px rgba(0,0,0,.5);
  transform: rotate(var(--tilt));
}
.bamboo-frame span:nth-child(1){ left: -1vw; --tilt: 1.5deg; }
.bamboo-frame span:nth-child(2){ left: 5vw; --tilt: -2.2deg; opacity:.82; }
.bamboo-frame span:nth-child(3){ left: 10vw; --tilt: 3deg; opacity:.55; }
.bamboo-frame span:nth-child(4){ right: -1vw; --tilt: -1.5deg; }
.bamboo-frame span:nth-child(5){ right: 5.5vw; --tilt: 2.4deg; opacity:.82; }
.bamboo-frame span:nth-child(6){ right: 11vw; --tilt: -3.2deg; opacity:.52; }

.dust-field { position: fixed; inset: 0; pointer-events: none; z-index: 11; overflow: hidden; }
.mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--mist-silver); box-shadow: 0 0 12px var(--moon-nacre); opacity: .5; animation: driftUp var(--dur) linear infinite; }
@keyframes driftUp { from { transform: translateY(106vh) translateX(0); } to { transform: translateY(-8vh) translateX(var(--sway)); } }

.chapter-cord {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 18px;
}
.chapter-cord::before { content:""; position:absolute; top:8px; bottom:8px; left:9px; width:2px; background: linear-gradient(var(--powder-gold), var(--lacquer), var(--powder-gold)); opacity:.55; }
.dot { position: relative; width: 20px; height: 20px; border: 1px solid var(--powder-gold); border-radius: 50%; background: var(--heian-violet); box-shadow: 0 0 0 3px rgba(42,24,56,.55); cursor: pointer; }
.dot.is-active { background: var(--lacquer); box-shadow: 0 0 18px rgba(215,180,90,.75); }
.dot span { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); font: 10px var(--gothic); letter-spacing: .18em; text-transform: uppercase; color: var(--mist-silver); opacity: 0; white-space: nowrap; transition: opacity .35s; }
.dot:hover span, .dot.is-active span { opacity: 1; }

.chapter { min-height: 100vh; position: relative; overflow: hidden; padding: clamp(34px, 6vw, 84px); }
.chapter-label { font-family: var(--gothic); letter-spacing: .24em; text-transform: uppercase; color: var(--powder-gold); font-size: 11px; }

.dawn { display: grid; place-items: center; background: radial-gradient(circle at 54% 44%, rgba(185,201,214,.11), transparent 34%), linear-gradient(#130b1d, #0a160f); }
.split-stalk { position: absolute; left: 50%; top: 0; height: 100%; width: 10vw; min-width: 70px; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 34px rgba(157,186,112,.5)); }
.split-stalk::before { content:""; position:absolute; inset:0 48%; background: linear-gradient(180deg, transparent, var(--split-bamboo), var(--moon-nacre), var(--split-bamboo), transparent); box-shadow: 0 0 calc(40px + 80px * var(--progress)) var(--split-bamboo); transform: scaleX(calc(1 + 16 * var(--progress))); opacity: .95; }
.split-stalk i { position:absolute; top:0; bottom:0; width:50%; background: linear-gradient(90deg, #152719, var(--bamboo-shadow), var(--split-bamboo)); border-radius: 999px; transition: transform 1.8s cubic-bezier(.16,.8,.18,1); }
.split-stalk i:first-child { right:50%; transform: translateX(calc(-42vw * var(--progress))) rotate(calc(-8deg * var(--progress))); }
.split-stalk i:last-child { left:50%; transform: translateX(calc(42vw * var(--progress))) rotate(calc(8deg * var(--progress))); }
.mist { position: absolute; inset: 15% 8%; background: radial-gradient(ellipse, rgba(185,201,214,.28), transparent 65%); filter: blur(18px); animation: mist 9s ease-in-out infinite alternate; }
.veil-two { animation-delay: -4s; transform: rotate(-8deg); opacity: .55; }
@keyframes mist { to { transform: translateX(7vw) scale(1.08); opacity: .35; } }
.opening-panel { position: relative; z-index: 5; margin-left: min(32vw, 420px); margin-top: -18vh; max-width: 520px; padding: 34px 38px; background: linear-gradient(135deg, rgba(245,240,216,.88), rgba(185,201,214,.52)); color: var(--heian-violet); clip-path: polygon(2% 0, 98% 4%, 94% 100%, 0 92%); box-shadow: 0 24px 80px rgba(0,0,0,.44); transform: perspective(900px) rotateY(-7deg) rotateZ(-2deg); }
.kicker { font: 12px var(--gothic); letter-spacing: .38em; color: var(--lacquer); margin:0 0 8px; }
h1 { font-family: var(--display); font-size: clamp(58px, 10vw, 138px); line-height: .78; margin: 0; font-weight: 400; letter-spacing: -.06em; }
.subtitle { font-family: var(--latin); font-size: clamp(20px, 3vw, 34px); line-height: 1.05; }
.letter-tab { border: 0; background: var(--moon-nacre); color: var(--heian-violet); padding: 13px 24px 15px; font: 12px var(--gothic); letter-spacing: .18em; text-transform: uppercase; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 7% 50%); box-shadow: 0 0 0 1px var(--powder-gold), 0 12px 30px rgba(0,0,0,.24); cursor: pointer; }
.moon-vessel, .false-sun, .escape-moon { position: absolute; border-radius: 50%; background: radial-gradient(circle at 37% 31%, #fff9dc, var(--moon-nacre) 35%, rgba(185,201,214,.75) 58%, transparent 71%), conic-gradient(from 90deg, rgba(215,180,90,.25), transparent, rgba(157,186,112,.22), rgba(185,201,214,.28), rgba(215,180,90,.25)); box-shadow: 0 0 70px rgba(245,240,216,.58), inset -18px -22px 35px rgba(42,24,56,.18); mix-blend-mode: screen; }
.moon-vessel { width: clamp(90px, 18vw, 250px); height: clamp(90px, 18vw, 250px); left: 17vw; top: 23vh; z-index:3; transform: rotate(calc(var(--scroll-rot, 0) * 1deg)); }

.requests { background: linear-gradient(145deg, #1b1027, #112417 62%, #0d1110); }
.request-stage { position: relative; min-height: 78vh; }
.talisman { position: absolute; width: clamp(210px, 24vw, 330px); min-height: 260px; padding: 28px 24px; color: var(--heian-violet); background: linear-gradient(130deg, rgba(245,240,216,.96), rgba(185,201,214,.72)); clip-path: polygon(5% 0, 100% 8%, 92% 100%, 0 91%); box-shadow: 0 26px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(215,180,90,.55); transform: rotate(var(--r)) translateY(var(--float,0)); transition: transform .7s, filter .7s; }
.talisman:hover { --float: -14px; filter: brightness(1.08); }
.talisman b { color: var(--lacquer); font-family: var(--gothic); letter-spacing:.2em; }
.talisman h2 { font-family: var(--display); font-weight:400; font-size: 28px; line-height:1; margin:18px 0; }
.talisman p { line-height:1.6; }
.talisman em { color: var(--powder-gold); font: 11px var(--gothic); letter-spacing:.18em; text-transform:uppercase; }
.t1{ left:8vw; top:10vh; --r:-9deg; }.t2{ left:31vw; top:23vh; --r:7deg; }.t3{ right:12vw; top:7vh; --r:-4deg; }.t4{ left:17vw; bottom:2vh; --r:11deg; }.t5{ right:23vw; bottom:5vh; --r:-12deg; }

.noon { background: radial-gradient(circle at 60% 42%, rgba(245,240,216,.94), rgba(245,240,216,.5) 22%, rgba(215,180,90,.18) 40%, rgba(42,24,56,.9) 74%); color: var(--heian-violet); }
.false-sun { width: 44vw; height: 44vw; right: 8vw; top: 12vh; opacity: .9; }
.washi-panel { position: relative; z-index: 4; width: min(520px, 68vw); margin: 17vh 0 0 12vw; padding: 42px; background: rgba(245,240,216,.72); clip-path: polygon(0 5%, 95% 0, 100% 91%, 8% 100%); box-shadow: 0 30px 95px rgba(42,24,56,.28); }
.washi-panel h2, .final-slip h2 { font-family: var(--display); font-weight:400; font-size: clamp(42px, 7vw, 96px); line-height:.9; margin:18px 0; }
.orbit { position:absolute; border: 1px solid rgba(215,180,90,.75); border-radius:50%; transform: rotate(22deg); }
.orbit-a { width: 68vw; height: 25vw; right: -7vw; top: 23vh; }.orbit-b { width: 58vw; height: 18vw; right: 4vw; top: 37vh; transform: rotate(-16deg); }
.eclipse-diagram { position:absolute; right:13vw; bottom:12vh; width:150px; height:150px; }
.eclipse-diagram span { position:absolute; border:1px solid var(--heian-violet); border-radius:50%; inset: calc(var(--n) * 22px); opacity:.7; }
.eclipse-diagram span:nth-child(1){--n:0}.eclipse-diagram span:nth-child(2){--n:1}.eclipse-diagram span:nth-child(3){--n:2}

.procession { background: linear-gradient(180deg, #0e1712, var(--heian-violet)); }
.scroll-window { height: 66vh; margin-top: 10vh; overflow: hidden; border-block: 1px solid rgba(215,180,90,.45); background: linear-gradient(90deg, rgba(245,240,216,.05), rgba(185,201,214,.14), rgba(245,240,216,.04)); }
.procession-track { height: 100%; display: flex; gap: 6vw; align-items: center; width: max-content; transform: translateX(var(--procession-x, 0px)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.screen { position: relative; width: 38vw; min-width: 360px; height: 54vh; background: linear-gradient(90deg, rgba(245,240,216,.72), rgba(185,201,214,.28)); color: var(--heian-violet); clip-path: polygon(3% 0, 100% 3%, 96% 100%, 0 96%); box-shadow: 0 18px 65px rgba(0,0,0,.38); display:grid; place-items:center; }
.screen p { position:absolute; bottom:28px; left:28px; font: 18px var(--latin); }
.screen span { display:block; width: 42%; height: 42%; }
.sleeve span { background: var(--lacquer); clip-path: polygon(0 0, 90% 18%, 64% 100%, 18% 72%); opacity:.72; }.fan span { background: conic-gradient(from 210deg, var(--powder-gold), var(--moon-nacre), var(--mist-silver), transparent 62%); border-radius:50%; }.crane span { border-top: 6px solid var(--heian-violet); border-left: 6px solid var(--heian-violet); transform: skew(-28deg) rotate(12deg); }.rabbit span { background: var(--heian-violet); border-radius: 50% 50% 42% 42%; box-shadow: 26px -50px 0 -9px var(--heian-violet), -4px -48px 0 -10px var(--heian-violet); }.letter span { background: var(--moon-nacre); border: 1px solid var(--powder-gold); transform: rotate(-12deg); }
.procession-tab { position:absolute; right:13vw; bottom:9vh; }

.return { min-height: 112vh; background: radial-gradient(circle at 50% 35%, rgba(185,201,214,.35), transparent 32%), linear-gradient(#09110e, #05020a 72%); display:grid; place-items:center; }
.escape-moon { width: min(62vw, 620px); height: min(62vw, 620px); top: 7vh; left: 50%; transform: translateX(-50%); opacity:.68; }
.constellation { position:absolute; inset:0; }
.constellation i { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--moon-nacre); box-shadow:0 0 24px var(--mist-silver); }
.constellation i:nth-child(1){left:22%;top:25%}.constellation i:nth-child(2){left:37%;top:18%}.constellation i:nth-child(3){left:61%;top:29%}.constellation i:nth-child(4){left:72%;top:51%}.constellation i:nth-child(5){left:48%;top:65%}.constellation i:nth-child(6){left:29%;top:55%}.constellation i:nth-child(7){left:55%;top:44%}
.constellation::before { content:""; position:absolute; inset:18% 22% 30%; background: linear-gradient(30deg, transparent 19%, rgba(215,180,90,.55) 19.2%, transparent 19.6%), linear-gradient(154deg, transparent 36%, rgba(215,180,90,.45) 36.2%, transparent 36.5%), linear-gradient(94deg, transparent 52%, rgba(185,201,214,.45) 52.2%, transparent 52.5%); }
.final-slip { position:relative; z-index:5; width:min(620px, 74vw); margin-top:22vh; padding:46px; text-align:center; background: linear-gradient(150deg, rgba(245,240,216,.84), rgba(185,201,214,.34)); color: var(--heian-violet); clip-path: polygon(8% 0, 100% 9%, 90% 100%, 0 86%); box-shadow:0 32px 90px rgba(0,0,0,.44); }
.seal { width:70px; height:70px; margin:28px auto 16px; display:grid; place-items:center; border-radius: 44% 56% 48% 52%; background: var(--lacquer); color: var(--moon-nacre); font: 36px var(--display); box-shadow: 0 0 0 7px rgba(181,58,45,.18); animation: sealPulse 2.8s ease-in-out infinite; }
@keyframes sealPulse { 50% { transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 0 14px rgba(181,58,45,.09); } }
time { font: 11px var(--gothic); letter-spacing:.28em; text-transform:uppercase; color:var(--lacquer); }

.chapter.is-visible .talisman { animation: paperWake .9s ease both; }
.chapter.is-visible .talisman:nth-child(2){animation-delay:.1s}.chapter.is-visible .talisman:nth-child(3){animation-delay:.2s}.chapter.is-visible .talisman:nth-child(4){animation-delay:.3s}.chapter.is-visible .talisman:nth-child(5){animation-delay:.4s}
@keyframes paperWake { from { opacity:0; transform: rotate(var(--r)) translateY(80px) rotateX(25deg); } to { opacity:1; transform: rotate(var(--r)) translateY(0); } }

@media (max-width: 760px) {
  .opening-panel { margin: 0; transform: rotate(-2deg); }
  .chapter { padding: 28px 22px; }
  .request-stage { display: grid; gap: 22px; padding-top: 50px; }
  .talisman { position: relative; inset: auto; width: 82vw; margin-inline: auto; }
  .false-sun { width: 78vw; height:78vw; right:-10vw; }
  .washi-panel { margin: 16vh auto 0; width: 84vw; }
  .chapter-cord { right: 10px; }
  .screen { min-width: 78vw; }
}