:root {
  --night-ink: #0B1020;
  --rice-paper: #F3EAD2;
  --vermilion: #C7352A;
  --camellia: #4A1028;
  --blade: #B8C2C8;
  --moss: #2E4A3F;
  --amber: #D59A45;
  --serif-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif-body: "Newsreader", "Source Serif 4", Georgia, serif;
  --jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--rice-paper);
  background:
    radial-gradient(circle at 80% 12%, rgba(184, 194, 200, .12), transparent 24rem),
    radial-gradient(circle at 10% 82%, rgba(74, 16, 40, .55), transparent 34rem),
    linear-gradient(120deg, #050815, var(--night-ink) 42%, #070914);
  font-family: var(--serif-body);
  overflow-x: hidden;
  cursor: none;
}

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .42;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 234, 210, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(184, 194, 200, .07) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(243, 234, 210, .025), transparent 35%, rgba(199, 53, 42, .018));
  background-size: 21px 23px, 31px 29px, 100% 100%;
  mix-blend-mode: screen;
}

.brush-cursor {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(199, 53, 42, .8);
  background: radial-gradient(circle, rgba(199, 53, 42, .7), rgba(199, 53, 42, .06) 62%, transparent 66%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
  transition: width .2s ease, height .2s ease, opacity .2s ease;
}

.thread-nav {
  position: fixed;
  top: 50%;
  right: 1.4rem;
  z-index: 60;
  display: grid;
  gap: 1.25rem;
  transform: translateY(-50%);
}

.thread-nav::before {
  content: "";
  position: absolute;
  top: .25rem;
  bottom: .25rem;
  left: 10px;
  width: 1px;
  background: linear-gradient(var(--vermilion), rgba(199, 53, 42, .14));
  box-shadow: 1px 0 7px rgba(199, 53, 42, .35);
}

.thread-nav a {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(199, 53, 42, .5);
  border-radius: 50%;
  background: rgba(11, 16, 32, .78);
  color: var(--rice-paper);
  font-family: var(--jp-serif);
  font-size: .58rem;
  transition: transform .25s ease, background .25s ease;
}

.thread-nav a::after { content: attr(data-mark); }
.thread-nav a span { position: absolute; right: 2rem; opacity: 0; white-space: nowrap; font: .62rem var(--mono); letter-spacing: .12em; color: var(--blade); transition: opacity .2s ease, transform .2s ease; transform: translateX(8px); }
.thread-nav a:hover, .thread-nav a.active { transform: rotate(-18deg) scale(1.12); background: var(--vermilion); }
.thread-nav a:hover span, .thread-nav a.active span { opacity: 1; transform: translateX(0); }

.route-thread {
  position: fixed;
  left: 2.2rem;
  top: 0;
  width: 7vw;
  height: 100vh;
  z-index: 55;
  overflow: visible;
  filter: drop-shadow(0 0 9px rgba(199, 53, 42, .28));
  pointer-events: none;
}

#threadPath {
  fill: none;
  stroke: var(--vermilion);
  stroke-width: .58;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.thread-knot { fill: var(--vermilion); opacity: .85; }

.spread {
  position: relative;
  min-height: 100vh;
  padding: clamp(3rem, 7vw, 7rem);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

.spread::before {
  content: attr(data-chapter);
  position: absolute;
  font-family: var(--serif-display);
  font-size: clamp(12rem, 27vw, 28rem);
  line-height: .7;
  color: rgba(243, 234, 210, .035);
  right: -3vw;
  top: 10vh;
  z-index: -1;
}

.opening {
  background: radial-gradient(circle at 50% 45%, rgba(184, 194, 200, .08), transparent 20rem), #060917;
}

.opening-thread, .closing-thread {
  position: absolute;
  width: 140vw;
  height: 1px;
  left: -18vw;
  top: 43%;
  background: var(--vermilion);
  box-shadow: 0 0 16px rgba(199, 53, 42, .55), 0 6px 16px rgba(0, 0, 0, .45);
  transform: rotate(-13deg) scaleX(.2);
  transform-origin: left center;
  animation: threadWake 2.2s cubic-bezier(.2, .8, .1, 1) forwards;
}

.eye-cut {
  position: absolute;
  width: clamp(12rem, 26vw, 30rem);
  height: 2px;
  left: 50%;
  background: linear-gradient(90deg, transparent, var(--rice-paper), transparent);
  opacity: .7;
  filter: drop-shadow(0 0 10px rgba(243, 234, 210, .18));
}
.eye-one { top: 38%; transform: translateX(-54%) rotate(-8deg); }
.eye-two { top: 50%; transform: translateX(-46%) rotate(7deg); opacity: .45; }

.domain-stamp {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%) rotate(-2deg);
  margin: 0;
  padding: .55rem .8rem;
  border: 1px solid rgba(199, 53, 42, .68);
  color: var(--vermilion);
  font: 1rem var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  animation: stampLand 1.4s .8s ease both;
}

.folio-caption, .cipher {
  font: .68rem var(--mono);
  letter-spacing: .18em;
  color: rgba(184, 194, 200, .76);
  text-transform: uppercase;
}
.folio-caption { position: absolute; bottom: 4vh; right: 8vw; }

.paper, .text-rail, .silk-panel, .gate-copy, .closing-folio {
  position: relative;
  max-width: 45rem;
  padding: clamp(2rem, 4vw, 4.5rem);
  border: 1px solid rgba(184, 194, 200, .22);
  background:
    linear-gradient(110deg, rgba(243, 234, 210, .96), rgba(243, 234, 210, .86)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(11, 16, 32, .035) 13px);
  color: var(--night-ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45), inset 0 0 0 9px rgba(11, 16, 32, .035);
  clip-path: polygon(0 1.4rem, 1.3rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1.2rem) 100%, 0 100%);
}

.paper::after, .silk-panel::after, .closing-folio::after {
  content: "";
  position: absolute;
  inset: .8rem;
  border: 1px solid rgba(46, 74, 63, .18);
  pointer-events: none;
}

h1, h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -.04em;
}
h1 { font-size: clamp(4.5rem, 11vw, 11rem); line-height: .76; max-width: 10ch; color: var(--night-ink); }
h2 { font-size: clamp(3.2rem, 7vw, 8rem); line-height: .82; color: inherit; }
.mission { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.55; max-width: 31rem; }

.vertical-note {
  position: absolute;
  top: 10vh;
  writing-mode: vertical-rl;
  font-family: var(--jp-serif);
  letter-spacing: .22em;
  color: rgba(243, 234, 210, .68);
  font-size: clamp(.9rem, 1.2vw, 1.2rem);
  z-index: 4;
}
.vertical-note.left { left: clamp(1rem, 3vw, 3rem); }
.vertical-note.right { right: clamp(3.6rem, 6vw, 7rem); }

.chapter-seal {
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  color: var(--vermilion);
  border-radius: 50%;
  font-family: var(--jp-serif);
  transform: rotate(var(--seal-rot, -9deg));
  transition: transform .6s ease;
}

.floorboard { grid-template-columns: minmax(0, 1fr); justify-items: center; background: linear-gradient(180deg, rgba(11, 16, 32, .95), rgba(46, 74, 63, .25)); }
.floor-art { margin-top: 2rem; height: 9rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; transform: perspective(900px) rotateX(18deg); }
.floor-art span { background: linear-gradient(90deg, rgba(46, 74, 63, .2), rgba(11, 16, 32, .12), rgba(46, 74, 63, .18)); border-left: 1px solid rgba(11, 16, 32, .12); }
.hairpin { position: absolute; width: 9rem; height: 2px; background: var(--vermilion); left: 42%; top: 68%; transform: rotate(-20deg); box-shadow: 0 0 0 1px rgba(199,53,42,.12); }
.hairpin::after { content: ""; position: absolute; right: -1rem; top: -7px; width: 14px; height: 14px; border: 2px solid var(--vermilion); border-radius: 50%; }
.secret-note { color: var(--camellia); opacity: 0; transform: translateY(8px); transition: .5s ease; font-style: italic; }
.listening-zone.revealed .secret-note { opacity: 1; transform: translateY(0); }
.pinholes { position: absolute; right: 16vw; bottom: 17vh; display: flex; gap: .8rem; }
.pinholes i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); opacity: .28; animation: pinGlow 3s infinite alternate; }
.pinholes i:nth-child(2n) { animation-delay: .8s; }

.rooftop { grid-template-columns: 1.4fr .85fr; gap: 5vw; background: linear-gradient(120deg, var(--night-ink), #080d18 55%, rgba(46, 74, 63, .42)); }
.stealth-field { position: relative; min-height: 64vh; border-left: 1px solid rgba(184,194,200,.18); }
.moon-scan { position: absolute; inset: 5vh 2vw 10vh; background: linear-gradient(100deg, transparent 30%, rgba(243,234,210,.12), transparent 54%); transform: translateX(-25%); animation: moonScan 7s ease-in-out infinite; }
.roofline { position: absolute; bottom: 12vh; left: 0; right: -5vw; height: 13rem; display: flex; align-items: end; gap: 0; animation: roofDrift 6s ease-in-out infinite alternate; }
.roofline i { flex: 1; height: calc(6rem + var(--h, 1rem)); background: var(--moss); border-radius: 50% 50% 0 0 / 16% 16% 0 0; border-top: 1px solid rgba(184,194,200,.25); }
.roofline i:nth-child(2) { --h: 3rem; } .roofline i:nth-child(4) { --h: 2rem; } .roofline i:nth-child(5) { --h: 4rem; }
.text-rail { justify-self: end; background: transparent; color: var(--rice-paper); border-color: rgba(243,234,210,.22); box-shadow: none; clip-path: none; }
.shuriken-row { display: flex; gap: 1rem; color: var(--blade); font-size: 1.5rem; }
.shuriken-row b { animation: sealTurn 9s linear infinite; }

.alley { background: radial-gradient(circle at 32% 42%, rgba(213,154,69,.34), transparent 18rem), linear-gradient(120deg, #080915, var(--camellia)); grid-template-columns: 1fr 1fr; gap: 4vw; }
.lantern-layer { position: relative; min-height: 70vh; }
.lantern { position: absolute; width: 10rem; height: 15rem; left: 30%; top: 18%; border-radius: 48% 48% 35% 35%; background: radial-gradient(circle, #F3EAD2 0 18%, var(--amber) 45%, rgba(213,154,69,.18) 72%, transparent 73%); box-shadow: 0 0 8rem rgba(213,154,69,.42); animation: breathe 3.5s ease-in-out infinite; }
.lantern::before, .lantern::after { content: ""; position: absolute; left: 20%; right: 20%; height: 1px; background: rgba(11,16,32,.45); }
.lantern::before { top: 28%; } .lantern::after { bottom: 30%; }
.lantern i { position: absolute; inset: 1rem 2.2rem; border-left: 1px solid rgba(11,16,32,.32); border-right: 1px solid rgba(11,16,32,.32); }
.smoke { position: absolute; width: 10rem; height: 18rem; border: 1px solid rgba(184,194,200,.16); border-left: 0; border-bottom: 0; border-radius: 50%; filter: blur(.3px); animation: smokeRise 6s ease-in-out infinite; }
.smoke-a { left: 14%; top: 12%; } .smoke-b { left: 48%; top: 4%; animation-delay: -2s; }
.alley-paper { justify-self: start; align-self: center; transform: rotate(1.5deg); }
.mask-slit { margin-top: 2rem; display: grid; gap: 1.2rem; }
.mask-slit span { display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--night-ink), transparent); transform: rotate(var(--r, -4deg)); }
.mask-slit span:nth-child(2) { --r: 5deg; opacity: .6; }

.silk { background: linear-gradient(145deg, var(--night-ink), var(--camellia)); justify-items: center; }
.silk-panel { width: min(58rem, 78vw); min-height: 70vh; color: var(--rice-paper); background: radial-gradient(circle at 72% 30%, rgba(199,53,42,.24), transparent 14rem), repeating-linear-gradient(135deg, rgba(243,234,210,.08) 0 2px, transparent 2px 18px), var(--camellia); }
.camellia { position: absolute; right: 11%; bottom: 15%; width: 15rem; height: 15rem; }
.camellia i { position: absolute; width: 6.5rem; height: 9rem; left: 4rem; top: 3rem; background: radial-gradient(circle at 40% 30%, rgba(243,234,210,.18), transparent 30%), var(--vermilion); border-radius: 70% 30% 70% 30%; transform-origin: 50% 85%; transform: rotate(calc(var(--p) * 72deg)); opacity: .78; }
.camellia i:nth-child(1){--p:0}.camellia i:nth-child(2){--p:1}.camellia i:nth-child(3){--p:2}.camellia i:nth-child(4){--p:3}.camellia i:nth-child(5){--p:4}
.stitch-line { position: absolute; left: 7%; right: 8%; bottom: 20%; height: 1px; background: repeating-linear-gradient(90deg, var(--vermilion) 0 18px, transparent 18px 29px); box-shadow: 0 0 14px rgba(199,53,42,.42); }

.gate { grid-template-columns: .78fr 1.22fr; gap: 5vw; background: linear-gradient(90deg, #070b18, var(--night-ink) 45%, rgba(184,194,200,.08)); }
.gate-copy { color: var(--rice-paper); background: transparent; border: 0; box-shadow: none; clip-path: none; }
.moon-gate-art { position: relative; height: 72vh; }
.gate-ring { position: absolute; width: min(38vw, 32rem); aspect-ratio: 1; border: 2px solid rgba(184,194,200,.62); border-radius: 50%; right: 8vw; top: 11vh; box-shadow: inset 0 0 4rem rgba(184,194,200,.08), 0 0 4rem rgba(184,194,200,.08); }
.gate-ring::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(243,234,210,.12); border-radius: 50%; }
.paper-hole { position: absolute; border-radius: 50%; background: var(--rice-paper); opacity: .88; box-shadow: 0 0 20px rgba(243,234,210,.24); }
.hole-one { width: 2.3rem; height: 2.3rem; right: 15vw; top: 18vh; }
.hole-two { width: 1.1rem; height: 1.1rem; right: 37vw; top: 48vh; }
.passing-shadow { position: absolute; width: 18rem; height: 38rem; right: 24vw; top: 16vh; background: linear-gradient(90deg, transparent, rgba(5,8,21,.88), transparent); filter: blur(2px); transform: translateX(-38vw); animation: passBehind 8s ease-in-out infinite; }

.mark { background: radial-gradient(circle at 50% 40%, rgba(199,53,42,.16), transparent 18rem), linear-gradient(180deg, var(--camellia), #050711 72%); justify-items: center; }
.closing-folio { text-align: left; color: var(--night-ink); transform-origin: center; transition: transform .7s ease; }
.closing-folio.revealed { transform: perspective(1000px) rotateY(-7deg) scale(.98); }
.final-seal { margin-top: 2rem; width: 6rem; height: 6rem; display: grid; place-items: center; border-radius: 50%; border: 3px double var(--vermilion); color: var(--vermilion); font: 3rem var(--jp-serif); animation: inkBloom 4s ease-in-out infinite; }
.closing-thread { top: auto; bottom: 18%; transform: rotate(8deg) scaleX(.55); animation: threadClose 5s ease-in-out infinite alternate; }
.footer-seal { position: absolute; bottom: 5vh; color: rgba(184,194,200,.58); font: .7rem var(--mono); letter-spacing: .18em; text-transform: uppercase; }

.secret-panel {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 140%);
  z-index: 70;
  padding: .8rem 1rem;
  border: 1px solid rgba(199,53,42,.55);
  background: rgba(11,16,32,.86);
  color: var(--rice-paper);
  font: .82rem var(--mono);
  letter-spacing: .08em;
  transition: transform .35s ease;
}
.secret-panel.visible { transform: translate(-50%, 0); }

.spread.in-view .chapter-seal { --seal-rot: 12deg; }
.spread.in-view .paper, .spread.in-view .text-rail, .spread.in-view .silk-panel, .spread.in-view .gate-copy, .spread.in-view .closing-folio { animation: folioLift .9s ease both; }

@keyframes threadWake { to { transform: rotate(-13deg) scaleX(1); } }
@keyframes stampLand { 0% { opacity: 0; transform: translateX(-50%) scale(1.4) rotate(8deg); filter: blur(8px); } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-2deg); filter: blur(0); } }
@keyframes folioLift { from { opacity: .35; transform: translateY(4rem) rotateX(8deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
@keyframes moonScan { 50% { transform: translateX(35%); } }
@keyframes roofDrift { to { transform: translateX(10px); } }
@keyframes sealTurn { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.035); box-shadow: 0 0 10rem rgba(213,154,69,.5); } }
@keyframes smokeRise { 50% { transform: translate(18px, -28px) rotate(12deg); opacity: .4; } }
@keyframes pinGlow { to { opacity: 1; transform: scale(1.4); } }
@keyframes passBehind { 45%, 55% { transform: translateX(4vw); opacity: .72; } 100% { transform: translateX(38vw); opacity: 0; } }
@keyframes inkBloom { 50% { box-shadow: 0 0 0 18px rgba(199,53,42,.06), inset 0 0 20px rgba(199,53,42,.16); } }
@keyframes threadClose { to { transform: rotate(8deg) scaleX(.9); } }

@media (max-width: 820px) {
  body { cursor: auto; }
  .brush-cursor { display: none; }
  .thread-nav { right: .5rem; gap: .75rem; }
  .route-thread { left: .5rem; width: 14vw; opacity: .65; }
  .spread { padding: 5rem 2rem; }
  .rooftop, .alley, .gate { grid-template-columns: 1fr; }
  .vertical-note { opacity: .45; }
  .vertical-note.right { right: 2.4rem; }
  .paper, .text-rail, .silk-panel, .gate-copy, .closing-folio { width: 100%; padding: 2rem; }
  h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
  h2 { font-size: clamp(3rem, 16vw, 5.5rem); }
  .camellia { opacity: .42; right: -2rem; }
}