:root {
  --moon-bone: #F5EEDC;
  --ink-cave: #17131A;
  --bamboo-bruise: #586B45;
  --foxfire-violet: #B58CFF;
  --blood-persimmon: #C14A3D;
  --tarnished-silver: #A7B7C8;
  --tea-smoke: #7B6A58;
  --mincho: "Iowan Old Style", "Palatino Linotype", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --hand: "Bradley Hand", "Hiragino Maru Gothic ProN", "Comic Sans MS", cursive;
  --display: Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--ink-cave); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--moon-bone);
  font-family: var(--sans);
  cursor: none;
  background:
    radial-gradient(circle at 17% 8%, rgba(181, 140, 255, .16), transparent 30rem),
    radial-gradient(circle at 83% 22%, rgba(167, 183, 200, .12), transparent 24rem),
    linear-gradient(105deg, #17131A 0%, #211a24 44%, #111013 100%);
}

button, a { cursor: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(82deg, rgba(245,238,220,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(8deg, rgba(123,106,88,.08) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 22% 33%, rgba(88,107,69,.18), transparent 18rem);
  animation: grainBreath 6s ease-in-out infinite alternate;
}

.cursor-brush {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(167,183,200,.9);
  background: radial-gradient(circle, rgba(245,238,220,.85), rgba(181,140,255,.28) 45%, transparent 70%);
  box-shadow: 0 0 18px rgba(181,140,255,.55);
  pointer-events: none;
  z-index: 50;
  transform: translate(-50%, -50%);
}

.ripple {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 49;
  border: 1px solid rgba(181,140,255,.7);
  background: rgba(167,183,200,.14);
  animation: rippleFade .9s ease-out forwards;
}

.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(245,238,220,.94), rgba(245,238,220,.86) 48%, rgba(123,106,88,.42)),
    repeating-linear-gradient(94deg, rgba(123,106,88,.08) 0 1px, transparent 1px 8px);
  transition: opacity 1.15s ease, transform 1.3s ease, clip-path 1.3s ease;
}

.opening-screen.opened {
  opacity: 0;
  transform: scale(1.05);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

.opening-washi {
  position: absolute;
  inset: 8vmin;
  border: 1px solid rgba(123,106,88,.25);
  background: linear-gradient(90deg, transparent, rgba(167,183,200,.12), transparent);
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
}

.bamboo-crack {
  position: relative;
  width: 86px;
  height: 76vh;
  border: 0;
  background: transparent;
  color: var(--tea-smoke);
  font-family: var(--hand);
  letter-spacing: .08em;
}

.bamboo-crack::before,
.bamboo-crack::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8px;
  background: linear-gradient(var(--bamboo-bruise), #7B6A58, var(--bamboo-bruise));
  filter: drop-shadow(0 0 18px rgba(181,140,255,.6));
  clip-path: polygon(45% 0, 68% 14%, 38% 27%, 58% 41%, 28% 61%, 64% 78%, 44% 100%, 20% 100%, 38% 78%, 10% 61%, 34% 41%, 12% 27%, 38% 14%, 18% 0);
}

.bamboo-crack::after { transform: translateX(17px) scaleX(-1); opacity: .45; }
.bamboo-crack::before { transform: translateX(-24px); }

.crack-glow {
  position: absolute;
  inset: 0 28px;
  background: linear-gradient(180deg, transparent, rgba(181,140,255,.7), rgba(245,238,220,.9), transparent);
  filter: blur(10px);
  animation: crackPulse 2.8s ease-in-out infinite;
}

.crack-label {
  position: absolute;
  top: 50%;
  left: 72px;
  writing-mode: vertical-rl;
  font-size: 1rem;
}

.moon-nav {
  position: fixed;
  z-index: 25;
  top: 50%;
  right: 2.4vw;
  transform: translateY(-50%);
  display: grid;
  gap: 1.2rem;
  padding: 1rem .55rem;
  border-left: 1px dashed rgba(167,183,200,.32);
}

.moon-phase {
  color: var(--tarnished-silver);
  text-decoration: none;
  display: grid;
  place-items: center;
  gap: .25rem;
  font-family: var(--hand);
  font-size: .72rem;
}

.moon-phase span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--moon-bone), var(--tarnished-silver) 50%, rgba(23,19,26,.85) 52%);
  border: 1px solid rgba(245,238,220,.55);
  transition: transform .5s ease, box-shadow .5s ease;
}

.moon-phase:nth-child(1) span { background: var(--ink-cave); box-shadow: inset 8px 0 0 var(--tarnished-silver); }
.moon-phase:nth-child(2) span { box-shadow: inset -10px 0 0 var(--ink-cave); }
.moon-phase:nth-child(3) span { background: var(--moon-bone); }
.moon-phase:nth-child(4) span { box-shadow: inset 10px 0 0 var(--ink-cave); }
.moon-phase:nth-child(5) span { background: var(--ink-cave); box-shadow: inset -8px 0 0 var(--tarnished-silver); }
.moon-phase.active span { transform: rotate(32deg) scale(1.24); box-shadow: 0 0 22px rgba(181,140,255,.75); }

.scroll { position: relative; }

.folio {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(1rem, 1.1fr) minmax(280px, .9fr) 9vw;
  align-items: center;
  overflow: hidden;
  padding: 8vh 8vw 8vh 9vw;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 14%, rgba(245,238,220,.08), transparent 24rem),
    linear-gradient(120deg, rgba(245,238,220,.09), rgba(23,19,26,.96) 58%);
}

.folio::before {
  content: attr(data-ink);
  position: absolute;
  left: 5vw;
  top: 9vh;
  font-family: var(--display);
  font-size: clamp(7rem, 18vw, 19rem);
  color: rgba(167,183,200,.055);
  z-index: -1;
}

.folio::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(circle at var(--mx, 20%) var(--my, 30%), rgba(181,140,255,.14), transparent 18rem),
    radial-gradient(circle at 70% 70%, rgba(193,74,61,.08), transparent 20rem);
  transition: background-position .4s ease;
}

.paper-panel {
  grid-column: 2;
  position: relative;
  padding: clamp(1.5rem, 4vw, 4rem);
  max-width: 680px;
  background:
    linear-gradient(115deg, rgba(245,238,220,.9), rgba(245,238,220,.68)),
    repeating-linear-gradient(86deg, rgba(123,106,88,.12) 0 1px, transparent 1px 9px);
  color: var(--ink-cave);
  box-shadow: 0 24px 80px rgba(0,0,0,.38), inset 0 0 34px rgba(123,106,88,.18);
  border: 1px solid rgba(123,106,88,.35);
  backdrop-filter: blur(2px);
  transform: translateX(0);
}

.torn-right { clip-path: polygon(0 1%, 97% 0, 100% 10%, 96% 18%, 100% 31%, 96% 47%, 99% 64%, 95% 80%, 100% 100%, 0 97%); }
.torn-left { clip-path: polygon(4% 0, 100% 2%, 98% 98%, 0 100%, 3% 84%, 0 70%, 4% 53%, 0 35%, 3% 16%); }

.folio-kicker {
  margin: 0 0 1rem;
  color: var(--blood-persimmon);
  font-family: var(--hand);
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .1em;
}

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

h1 { font-size: clamp(4.4rem, 12vw, 12rem); letter-spacing: -.07em; }
h1 span { color: var(--bamboo-bruise); font-style: italic; }
h2 { font-size: clamp(3rem, 7vw, 7.8rem); letter-spacing: -.05em; }

.folio-copy {
  max-width: 38rem;
  margin: 1.4rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.75;
  color: rgba(23,19,26,.78);
}

.annotation, .pin-label {
  position: absolute;
  z-index: 4;
  padding: .55rem .75rem;
  color: var(--moon-bone);
  font-family: var(--hand);
  font-size: clamp(.9rem, 1.2vw, 1.15rem);
  background: rgba(23,19,26,.5);
  border: 1px solid rgba(167,183,200,.42);
  box-shadow: 0 0 24px rgba(181,140,255,.18);
  transform: rotate(var(--r, -3deg));
}

.annotation::before, .pin-label::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--foxfire-violet);
  top: -.35rem;
  left: .75rem;
  box-shadow: 0 0 16px var(--foxfire-violet);
  animation: orbitGlow 3s linear infinite;
}

.note-one { left: 14vw; bottom: 18vh; --r: 5deg; }
.sleeve-note { left: 12vw; top: 24vh; --r: -7deg; }
.court-note { right: 16vw; bottom: 15vh; --r: 4deg; }
.label-a { left: 16vw; top: 19vh; --r: -4deg; }
.label-b { left: 36vw; bottom: 12vh; --r: 6deg; }

.red-seal, .closing-seal {
  position: absolute;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  color: rgba(245,238,220,.86);
  background: var(--blood-persimmon);
  font-family: var(--mincho);
  font-size: 2rem;
  border: 4px double rgba(245,238,220,.55);
  transform: rotate(-10deg) scale(.9);
  mix-blend-mode: multiply;
  animation: stampPress 6s ease-in-out infinite;
}

.red-seal { right: 20vw; bottom: 11vh; }
.closing-seal { right: 18vw; top: 17vh; opacity: 0; transition: opacity .4s ease, transform .4s ease; }
.closing-seal.pressed { opacity: 1; transform: rotate(-7deg) scale(1.35); }

.moon-wash, .gate-moon {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,238,220,.78), rgba(167,183,200,.35) 42%, rgba(181,140,255,.1) 65%, transparent 72%);
  filter: blur(.4px);
}
.moon-wash { width: 44vmin; height: 44vmin; left: 12vw; top: 12vh; }
.gate-moon { width: 66vmin; height: 66vmin; left: 9vw; top: 18vh; box-shadow: inset 0 0 80px rgba(23,19,26,.3); }

.bamboo-diagram { position: absolute; left: 11vw; bottom: 9vh; width: 23vw; height: 50vh; opacity: .72; }
.bamboo-diagram i { position: absolute; bottom: 0; width: 30px; height: 100%; background: linear-gradient(90deg, rgba(88,107,69,.08), rgba(88,107,69,.75), rgba(245,238,220,.1)); border-radius: 60% 40%; }
.bamboo-diagram i:nth-child(1) { left: 10%; transform: rotate(5deg); }
.bamboo-diagram i:nth-child(2) { left: 44%; height: 88%; transform: rotate(-7deg); }
.bamboo-diagram i:nth-child(3) { left: 75%; height: 70%; transform: rotate(3deg); }
.bamboo-diagram i::after { content: ""; position: absolute; left: -12px; right: -12px; height: 18px; border: 1px solid rgba(245,238,220,.34); border-radius: 50%; top: 35%; }

.creature-shadow.horns { position: absolute; left: 8vw; top: 18vh; width: 34vw; height: 54vh; opacity: .28; filter: blur(2px); background: var(--ink-cave); clip-path: polygon(45% 44%, 30% 4%, 44% 32%, 51% 10%, 56% 35%, 74% 2%, 60% 45%, 72% 78%, 50% 100%, 28% 78%); }

.ink-pool { position: absolute; left: 8vw; bottom: 11vh; width: 42vw; height: 22vh; background: radial-gradient(ellipse, rgba(167,183,200,.42), rgba(23,19,26,.86) 61%, transparent 72%); border-radius: 50%; filter: blur(.5px); }
.ink-pool span, .reflection-face span { position: absolute; border-radius: 50%; background: var(--foxfire-violet); box-shadow: 0 0 18px var(--foxfire-violet); }
.ink-pool span:nth-child(1) { width: 22px; height: 16px; left: 43%; top: 38%; }
.ink-pool span:nth-child(2) { width: 16px; height: 12px; left: 51%; top: 44%; }
.ink-pool span:nth-child(3) { width: 12px; height: 9px; left: 48%; top: 56%; }

.specimen-wrist { position: absolute; left: 13vw; top: 28vh; width: 28vw; height: 28vh; transform: rotate(-13deg); }
.fur { position: absolute; inset: 10% 0; background: radial-gradient(ellipse at 60% 50%, rgba(245,238,220,.8), rgba(167,183,200,.45) 48%, rgba(88,107,69,.25)); clip-path: polygon(5% 28%, 75% 0, 100% 35%, 82% 79%, 18% 100%, 0 64%); filter: drop-shadow(0 0 35px rgba(181,140,255,.35)); }
.pearl-eye { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F5EEDC, #B58CFF 48%, #17131A 55%); box-shadow: 0 0 20px rgba(181,140,255,.8); animation: blink 5s infinite; }
.e1 { width: 34px; height: 34px; left: 48%; top: 36%; }
.e2 { width: 24px; height: 24px; left: 61%; top: 50%; animation-delay: .7s; }
.e3 { width: 18px; height: 18px; left: 41%; top: 56%; animation-delay: 1.3s; }

.sleeve-creature { position: absolute; left: 6vw; bottom: 10vh; width: 47vw; height: 68vh; opacity: .95; }
.sleeve { position: absolute; top: 10%; width: 52%; height: 70%; background: linear-gradient(135deg, rgba(245,238,220,.63), rgba(181,140,255,.18), rgba(23,19,26,.7)); border: 1px solid rgba(167,183,200,.38); filter: drop-shadow(0 20px 45px rgba(0,0,0,.45)); }
.sleeve-left { left: 4%; clip-path: polygon(8% 0, 92% 18%, 74% 100%, 0 76%); animation: sleeveBreathe 5s ease-in-out infinite; }
.sleeve-right { right: 8%; clip-path: polygon(5% 20%, 96% 0, 100% 74%, 24% 100%); animation: sleeveBreathe 5s ease-in-out infinite reverse; }
.rib-lines { position: absolute; inset: 18% 25% 18% 25%; border-left: 1px solid rgba(193,74,61,.42); border-right: 1px solid rgba(193,74,61,.42); background: repeating-linear-gradient(90deg, transparent 0 23px, rgba(193,74,61,.28) 24px 25px); transform: skewX(-8deg); }
.claw { position: absolute; bottom: 7%; width: 7vw; height: 16vh; background: var(--blood-persimmon); clip-path: polygon(50% 0, 100% 100%, 0 84%); opacity: .7; }
.c1 { left: 32%; transform: rotate(8deg); }.c2 { left: 45%; transform: rotate(-4deg); }.c3 { left: 58%; transform: rotate(11deg); }
.moth-dust { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(181,140,255,.48) 0 2px, transparent 3px); background-size: 88px 72px; animation: dustDrift 12s linear infinite; opacity: .36; }
.claw-marks { position: absolute; right: 22vw; top: 12vh; display: flex; gap: 1rem; transform: rotate(14deg); }
.claw-marks b { width: 9px; height: 160px; background: var(--blood-persimmon); border-radius: 50%; clip-path: polygon(45% 0, 100% 100%, 0 100%); opacity: .75; }

.crater-map { position: absolute; left: 8vw; top: 14vh; width: 42vw; height: 72vh; border-radius: 50%; border: 1px dashed rgba(167,183,200,.35); background: radial-gradient(circle, rgba(167,183,200,.17), transparent 58%); }
.orbit { position: absolute; border: 1px solid rgba(167,183,200,.28); border-radius: 50%; inset: var(--inset); animation: rotateOrbit var(--speed) linear infinite; }
.o1 { --inset: 8%; --speed: 18s; }.o2 { --inset: 23%; --speed: 12s; }.o3 { --inset: 38%; --speed: 8s; }
.crater { position: absolute; border-radius: 50%; border: 1px solid rgba(245,238,220,.45); background: rgba(23,19,26,.24); }
.cr1 { width: 60px; height: 44px; left: 22%; top: 20%; }.cr2 { width: 34px; height: 28px; left: 61%; top: 33%; }.cr3 { width: 82px; height: 58px; left: 42%; top: 58%; }.cr4 { width: 22px; height: 18px; left: 72%; top: 70%; }
.rabbit-constellation { position: absolute; left: 18vw; bottom: 16vh; width: 23vw; height: 18vh; }
.rabbit-constellation::before { content: ""; position: absolute; inset: 10%; border-top: 1px solid rgba(181,140,255,.6); border-left: 1px solid rgba(181,140,255,.4); transform: skew(-20deg); }
.rabbit-constellation i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--foxfire-violet); box-shadow: 0 0 16px var(--foxfire-violet); }
.rabbit-constellation i:nth-child(1){left:5%;top:25%}.rabbit-constellation i:nth-child(2){left:30%;top:8%}.rabbit-constellation i:nth-child(3){left:54%;top:45%}.rabbit-constellation i:nth-child(4){left:74%;top:18%}.rabbit-constellation i:nth-child(5){left:88%;top:70%}

.reflection-face { position: absolute; left: 19vw; bottom: 16vh; width: 34vw; height: 18vh; background: radial-gradient(ellipse, rgba(167,183,200,.34), rgba(23,19,26,.68), transparent 76%); border-radius: 50%; transform: scaleY(.62); filter: blur(.4px); }
.reflection-face span:nth-child(1) { width: 28px; height: 18px; left: 38%; top: 39%; }
.reflection-face span:nth-child(2) { width: 28px; height: 18px; left: 54%; top: 39%; }
.reflection-face span:nth-child(3) { width: 16px; height: 12px; left: 47%; top: 57%; background: var(--blood-persimmon); }
.smoke-tail { position: absolute; left: 7vw; top: 12vh; width: 45vw; height: 76vh; border-radius: 50%; border-left: 36px solid rgba(167,183,200,.12); border-bottom: 16px solid rgba(181,140,255,.1); filter: blur(6px); animation: smokeWaver 7s ease-in-out infinite; }
.seal-button { margin-top: 1.6rem; border: 0; color: var(--moon-bone); background: var(--blood-persimmon); padding: 1rem 1.2rem; font-family: var(--hand); font-size: 1.05rem; box-shadow: 0 12px 30px rgba(193,74,61,.28); transform: rotate(-1deg); }
.seal-button:active { transform: rotate(-1deg) scale(.94); }

.folio.in-view .paper-panel { animation: paperSlide .95s ease both; }
.folio.in-view .annotation { animation-name: floatNote; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

@keyframes grainBreath { from { opacity: .18; transform: scale(1); } to { opacity: .34; transform: scale(1.015); } }
@keyframes rippleFade { to { width: 80px; height: 80px; opacity: 0; transform: translate(-35px, -35px); } }
@keyframes crackPulse { 50% { filter: blur(16px); opacity: .55; } }
@keyframes orbitGlow { to { transform: translateX(42px) rotate(360deg); } }
@keyframes stampPress { 0%, 84%, 100% { transform: rotate(-10deg) scale(.9); opacity: .78; } 88% { transform: rotate(-10deg) scale(1.12); opacity: 1; } }
@keyframes blink { 0%, 88%, 100% { transform: scaleY(1); } 91%, 94% { transform: scaleY(.08); } }
@keyframes sleeveBreathe { 50% { transform: translateY(-2vh) rotate(2deg) scale(1.03); } }
@keyframes dustDrift { to { background-position: 180px 120px; } }
@keyframes rotateOrbit { to { transform: rotate(360deg); } }
@keyframes smokeWaver { 50% { transform: translateX(4vw) rotate(8deg); opacity: .55; } }
@keyframes paperSlide { from { opacity: .2; transform: translateX(7vw) rotate(.5deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes floatNote { 50% { transform: translateY(-10px) rotate(var(--r, -3deg)); } }

@media (max-width: 800px) {
  body { cursor: auto; }
  button, a { cursor: pointer; }
  .cursor-brush { display: none; }
  .folio { grid-template-columns: 1fr; padding: 10vh 8vw 14vh; }
  .paper-panel { grid-column: 1; }
  .moon-nav { right: .5rem; gap: .65rem; }
  .moon-phase em { display: none; }
  .bamboo-diagram, .specimen-wrist, .sleeve-creature, .crater-map, .reflection-face { opacity: .42; left: 2vw; width: 70vw; }
  .annotation, .pin-label { display: none; }
  h1 { font-size: clamp(4rem, 20vw, 7rem); }
  h2 { font-size: clamp(3rem, 14vw, 5.6rem); }
}