:root {
  --moon-ink: #121826;
  --deep-violet: #2A2440;
  --pearl-washi: #F4F1EA;
  --rain-mist: #DDEFF0;
  --reiwa-violet: #B8A7FF;
  --rain-cyan: #8FE7E2;
  --sakura: #FFB7C8;
  --matcha: #5F7D63;
  --vermilion: #E94E3C;
  --mincho: "Shippori Mincho", "Noto Serif JP", serif;
  --gothic: "Zen Kaku Gothic New", Inter, sans-serif;
  --rounded: "M PLUS Rounded 1c", sans-serif;
  --serif-jp: "Noto Serif JP", serif;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--moon-ink);
}

body {
  margin: 0;
  color: var(--pearl-washi);
  font-family: var(--gothic);
  overflow-x: hidden;
  background: linear-gradient(160deg, var(--moon-ink), var(--deep-violet));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: radial-gradient(circle at 15% 20%, rgba(184,167,255,.14), transparent 28%), radial-gradient(circle at 85% 72%, rgba(143,231,226,.12), transparent 30%);
  mix-blend-mode: screen;
}

.ambient, .grain, .rain, .mist, .cursor-moon {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient { z-index: 5; overflow: hidden; }

.grain {
  opacity: .35;
  background-image: radial-gradient(rgba(18,24,38,.28) 1px, transparent 1px), radial-gradient(rgba(244,241,234,.18) 1px, transparent 1px);
  background-size: 5px 7px, 13px 17px;
}

.rain {
  opacity: .18;
  background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(143,231,226,.6) 23px, transparent 25px);
  animation: rainDrift 14s linear infinite;
}

.rain-b { opacity: .08; animation-duration: 22s; transform: scale(1.3); }

.mist {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 45%), transparent 0 10rem, rgba(244,241,234,.12) 15rem, rgba(221,239,240,.18) 28rem, transparent 46rem);
  transition: background .25s ease;
}

.cursor-moon {
  width: 9rem;
  height: 9rem;
  inset: auto;
  left: calc(var(--mx, 50%) - 4.5rem);
  top: calc(var(--my, 50%) - 4.5rem);
  border: 1px solid rgba(143,231,226,.28);
  border-radius: 50%;
  opacity: .45;
  filter: blur(.2px);
  transform: scale(var(--cursor-scale, .65));
  transition: transform .35s ease, opacity .35s ease;
}

.seal-nav {
  position: fixed;
  z-index: 20;
  right: 2.2rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .8rem;
}

.seal-dot {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(244,241,234,.35);
  border-radius: 50%;
  background: rgba(18,24,38,.18);
  color: var(--pearl-washi);
  font-family: var(--serif-jp);
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: border-color .4s ease, background .4s ease, transform .4s ease, color .4s ease;
}

.seal-dot.active {
  border-color: var(--vermilion);
  background: var(--pearl-washi);
  color: var(--vermilion);
  transform: scale(1.24);
  box-shadow: 0 0 0 8px rgba(233,78,60,.1), 0 0 32px rgba(184,167,255,.38);
}

.era-scroll { position: relative; z-index: 8; }

.gate {
  min-height: 100vh;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 6.5rem);
  isolation: isolate;
}

.gate::before, .gate::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.gate::before {
  inset: 7vh 9vw;
  border-left: 1px solid rgba(244,241,234,.18);
  border-right: 1px solid rgba(143,231,226,.15);
  background: linear-gradient(90deg, transparent, rgba(244,241,234,.035), transparent);
  transform: skewX(-3deg);
}

.gate::after {
  width: 44vmin;
  height: 44vmin;
  border-radius: 50%;
  border: 1px solid rgba(184,167,255,.18);
  background: radial-gradient(circle, rgba(244,241,234,.08), transparent 62%);
  right: 12vw;
  top: 13vh;
}

.accession {
  position: absolute;
  left: 2rem;
  top: 8vh;
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  font-size: .72rem;
  letter-spacing: .22em;
  color: rgba(244,241,234,.52);
}

.washi-strip {
  width: min(34rem, 78vw);
  padding: 1.4rem 1.8rem;
  background: linear-gradient(105deg, rgba(244,241,234,.86), rgba(221,239,240,.58));
  color: var(--moon-ink);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 2rem 5rem rgba(18,24,38,.25), inset 0 0 2rem rgba(255,255,255,.28);
  backdrop-filter: blur(18px);
  transform: translateY(3rem) rotate(-1deg);
  opacity: .32;
  transition: transform 1s ease, opacity 1s ease;
}

.gate.active .washi-strip { transform: translateY(0) rotate(0deg); opacity: 1; }
.left-strip { justify-self: start; margin-left: 11vw; }
.right-strip { justify-self: end; margin-right: 11vw; }
.narrow { width: min(28rem, 74vw); }

h1, h2 { font-family: var(--mincho); font-weight: 700; }
h2 { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 4rem); letter-spacing: .03em; }
p { line-height: 1.75; font-size: clamp(1rem, 1.45vw, 1.2rem); }

.opening {
  background: linear-gradient(155deg, var(--pearl-washi) 0%, var(--rain-mist) 52%, var(--moon-ink) 125%);
  color: var(--moon-ink);
}

.opening .accession { color: rgba(18,24,38,.45); }
.hero-cluster { position: absolute; left: 13vw; top: 46vh; transform: translateY(-15%); }
.small-aside { font-family: var(--rounded); color: var(--matcha); margin: 0 0 .6rem 4rem; font-size: .9rem; }
.wordmark { margin: 0; font-size: clamp(5rem, 14vw, 17rem); line-height: .78; letter-spacing: -.06em; color: var(--moon-ink); }
.reflection { transform: scaleY(-1) skewX(-12deg); opacity: .14; filter: blur(2px); mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 58%); }
.mist-phrase { margin: -2rem 0 0 40%; font-family: var(--mincho); font-size: clamp(1.3rem, 3vw, 3rem); color: rgba(42,36,64,.7); opacity: 0; animation: mistReveal 4s ease 1s forwards; }
.date-stamp { position: absolute; right: 12vw; top: 14vh; color: var(--vermilion); border: 3px solid var(--vermilion); border-radius: 50%; width: 7rem; height: 7rem; display: grid; place-items: center; text-align: center; font-family: var(--serif-jp); font-weight: 700; transform: rotate(11deg) scale(.4); opacity: 0; animation: stampPress 1.4s cubic-bezier(.2,1.6,.5,1) .5s forwards; }
.date-stamp small { font-size: .86rem; letter-spacing: .1em; }
.steam-ghost { position: absolute; left: 27vw; top: 38vh; width: 5rem; height: 6rem; border-radius: 48% 48% 38% 38%; background: linear-gradient(rgba(255,255,255,.74), rgba(143,231,226,.12)); filter: blur(.2px); opacity: .72; animation: ghostPass 12s ease-in-out infinite; }
.steam-ghost i { position: absolute; bottom: -.4rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(255,255,255,.55); }
.steam-ghost i:nth-child(1) { left: .4rem; } .steam-ghost i:nth-child(2) { left: 1.9rem; } .steam-ghost i:nth-child(3) { right: .4rem; }
.puddle { position: absolute; left: 13vw; bottom: 14vh; width: 54vw; height: 8vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(143,231,226,.28), transparent 68%); }
.puddle span { position: absolute; border: 1px solid rgba(42,36,64,.18); border-radius: 50%; animation: ripple 4s ease-in-out infinite; }
.puddle span:nth-child(1) { inset: 18% 30%; } .puddle span:nth-child(2) { inset: 28% 12%; animation-delay: 1s; } .puddle span:nth-child(3) { inset: 5% 45%; animation-delay: 2s; }

.announcement { background: radial-gradient(circle at 52% 47%, rgba(184,167,255,.18), transparent 32%), linear-gradient(155deg, var(--moon-ink), var(--deep-violet)); }
.moon-well { width: min(48vmin, 35rem); height: min(48vmin, 35rem); border-radius: 50%; border: 1px solid rgba(221,239,240,.24); display: grid; place-items: center; background: radial-gradient(circle at 43% 36%, rgba(244,241,234,.14), rgba(184,167,255,.08) 38%, transparent 67%); }
.kanji { font-family: var(--mincho); font-size: clamp(4rem, 13vw, 12rem); color: var(--pearl-washi); text-shadow: 0 0 44px rgba(184,167,255,.38); }
.ink-drop { position: absolute; border-radius: 50%; background: var(--rain-cyan); opacity: .32; animation: upDrop 8s ease-in-out infinite; }
.d1 { width: 1rem; height: 1rem; left: 33vw; bottom: 22vh; } .d2 { width: .55rem; height: .55rem; right: 31vw; top: 27vh; animation-delay: 2s; }
.glass-doors { position: absolute; inset: 12vh 20vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; z-index: -1; }
.glass-doors span { border: 1px solid rgba(143,231,226,.13); background: linear-gradient(90deg, transparent, rgba(221,239,240,.06), transparent); }

.plaza { background: linear-gradient(170deg, var(--rain-mist), var(--deep-violet) 72%, var(--moon-ink)); }
.umbrella { position: absolute; width: 46vmin; height: 23vmin; top: 16vh; left: 18vw; border-radius: 24vmin 24vmin 1rem 1rem; border: 1px solid rgba(244,241,234,.5); border-bottom: 3px solid rgba(143,231,226,.55); background: radial-gradient(circle at 50% 100%, transparent 25%, rgba(244,241,234,.2) 26% 36%, transparent 37%), linear-gradient(105deg, rgba(143,231,226,.26), rgba(184,167,255,.22)); transform: rotate(var(--umbrella-rot, -8deg)); transition: transform .35s ease; }
.umbrella span { position: absolute; left: 50%; top: 99%; width: 2px; height: 24vmin; background: rgba(244,241,234,.55); }
.phone-lantern { width: 12rem; height: 20rem; border-radius: 2rem; padding: .8rem; background: rgba(18,24,38,.7); box-shadow: 0 0 70px rgba(143,231,226,.42); transform: rotate(5deg); }
.screen { height: 100%; border-radius: 1.4rem; display: grid; align-content: center; justify-items: center; gap: 1rem; background: linear-gradient(180deg, var(--rain-cyan), var(--reiwa-violet)); color: var(--moon-ink); font-family: var(--rounded); }
.screen b { font-size: 2.6rem; font-family: var(--mincho); } .screen em { font-style: normal; writing-mode: vertical-rl; }
.fireflies i { position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: var(--sakura); box-shadow: 0 0 24px var(--sakura); animation: flicker 3s ease-in-out infinite; }
.fireflies i:nth-child(1) { left: 18%; top: 58%; } .fireflies i:nth-child(2) { left: 38%; top: 32%; animation-delay: .5s; } .fireflies i:nth-child(3) { right: 24%; top: 24%; animation-delay: 1s; } .fireflies i:nth-child(4) { right: 16%; bottom: 20%; animation-delay: 1.6s; } .fireflies i:nth-child(5) { left: 62%; bottom: 24%; animation-delay: 2.1s; } .fireflies i:nth-child(6) { left: 10%; bottom: 32%; animation-delay: 2.6s; }
.ripples span { position: absolute; border: 1px solid rgba(143,231,226,.3); border-radius: 50%; width: 10rem; height: 2rem; bottom: 16vh; animation: ripple 4s ease-in-out infinite; } .ripples span:nth-child(1){left:22vw}.ripples span:nth-child(2){left:44vw;animation-delay:1s}.ripples span:nth-child(3){right:18vw;animation-delay:2s}

.talisman { background: radial-gradient(circle at 50% 60%, rgba(95,125,99,.22), transparent 30%), linear-gradient(145deg, var(--moon-ink), var(--deep-violet)); }
.qr-garden { position: absolute; inset: 10vh 15vw; }
.qr-talisman { position: absolute; width: 9rem; height: 13rem; border: 0; background: linear-gradient(var(--pearl-washi), var(--rain-mist)); box-shadow: 0 1rem 4rem rgba(0,0,0,.24); cursor: pointer; transform: rotate(var(--r)) translateY(var(--lift, 0)); transition: transform .8s ease, filter .8s ease; }
.qr-talisman::before { content: ""; position: absolute; inset: .9rem .9rem 4.2rem; background: conic-gradient(var(--moon-ink) 25%, transparent 0 50%, var(--moon-ink) 0 75%, transparent 0), linear-gradient(90deg, var(--rain-cyan) 20%, transparent 0 40%, var(--moon-ink) 0 60%, transparent 0); background-size: 1.4rem 1.4rem, 2rem 2rem; }
.qr-talisman::after { content: "令"; position: absolute; left: 0; right: 0; bottom: 1rem; color: var(--vermilion); font-family: var(--serif-jp); font-size: 2rem; }
.qr-talisman span { position: absolute; inset: -1.3rem; border-radius: 45% 55% 50% 50%; border: 1px solid rgba(255,183,200,.48); opacity: .55; }
.qr-talisman.bloom { filter: drop-shadow(0 0 24px rgba(143,231,226,.65)); --lift: -1.5rem; }
.t1 { left: 41%; top: 20%; --r: -5deg; } .t2 { left: 63%; top: 38%; --r: 7deg; } .t3 { left: 25%; top: 48%; --r: -13deg; } .t4 { left: 51%; top: 62%; --r: 3deg; }
.moss-island { position: absolute; bottom: 11vh; left: 28vw; width: 34vw; height: 8vh; border-radius: 50%; background: radial-gradient(ellipse, var(--matcha), transparent 70%); opacity: .68; }

.archive { background: linear-gradient(150deg, var(--pearl-washi), var(--rain-mist)); color: var(--moon-ink); }
.archive .accession { color: rgba(18,24,38,.5); }
.archive-rail { position: absolute; left: 50%; top: 8vh; bottom: 8vh; border-left: 1px solid rgba(233,78,60,.3); }
.receipt-stack { position: relative; width: 32rem; height: 30rem; }
.receipt { position: absolute; width: 14rem; padding: 1.4rem; background: rgba(255,255,255,.72); color: var(--moon-ink); font-family: var(--rounded); box-shadow: 0 1rem 3rem rgba(18,24,38,.16); }
.receipt b { display: block; color: var(--vermilion); font-family: var(--serif-jp); margin-bottom: .8rem; }
.r1 { left: 1rem; top: 2rem; transform: rotate(-8deg); } .r2 { right: 2rem; bottom: 3rem; transform: rotate(7deg); }
.crane { position: absolute; left: 10rem; top: 9rem; width: 15rem; height: 15rem; transform-style: preserve-3d; transition: transform 1s ease; }
.gate.active .crane { transform: rotateX(18deg) rotateZ(-12deg); }
.crane span { position: absolute; width: 0; height: 0; border-style: solid; filter: drop-shadow(0 1rem 1rem rgba(18,24,38,.18)); }
.crane span:nth-child(1) { border-width: 0 7rem 7rem 0; border-color: transparent var(--pearl-washi) transparent transparent; left: 0; top: 4rem; }
.crane span:nth-child(2) { border-width: 7rem 7rem 0 0; border-color: var(--rain-cyan) transparent transparent transparent; right: 1rem; top: 4rem; }
.crane span:nth-child(3) { border-width: 3rem 0 3rem 8rem; border-color: transparent transparent transparent var(--sakura); left: 6rem; top: 5rem; }

.apartment { background: radial-gradient(circle at 60% 38%, rgba(255,183,200,.12), transparent 22%), linear-gradient(160deg, var(--deep-violet), var(--moon-ink)); }
.window-scene { position: relative; width: min(48rem, 82vw); height: 58vh; display: grid; place-items: center; }
.window-frame { position: relative; width: 34rem; height: 23rem; border: .8rem solid rgba(244,241,234,.32); background: linear-gradient(180deg, rgba(143,231,226,.18), rgba(18,24,38,.55)); box-shadow: inset 0 0 5rem rgba(184,167,255,.22), 0 2rem 7rem rgba(0,0,0,.38); }
.curtain { position: absolute; top: 0; bottom: 0; width: 39%; background: linear-gradient(90deg, rgba(244,241,234,.22), transparent); animation: curtainBreathe 8s ease-in-out infinite; }
.c1 { left: 0; } .c2 { right: 0; transform: scaleX(-1); }
.moon { position: absolute; right: 4rem; top: 3rem; width: 5rem; height: 5rem; border-radius: 50%; background: var(--pearl-washi); box-shadow: 0 0 60px rgba(244,241,234,.55); }
.vending-halo { position: absolute; left: 5rem; bottom: 3rem; width: 6rem; height: 10rem; border-radius: 1rem; background: linear-gradient(var(--rain-cyan), var(--reiwa-violet)); box-shadow: 0 0 80px rgba(143,231,226,.55); }
.rounded-note { position: absolute; bottom: -1rem; right: 1rem; width: 18rem; font-family: var(--rounded); color: var(--sakura); }

.dawn { background: linear-gradient(180deg, var(--moon-ink) 0%, var(--deep-violet) 45%, var(--rain-mist) 100%); }
.dawn-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; background: radial-gradient(ellipse at 50% 100%, var(--sakura), transparent 55%), linear-gradient(180deg, transparent, var(--pearl-washi)); }
.final-seal { display: flex; gap: 1rem; font-family: var(--mincho); font-size: clamp(7rem, 18vw, 18rem); color: var(--pearl-washi); text-shadow: 0 0 80px rgba(184,167,255,.45); }
.final-seal span { display: inline-block; transform: translateY(2rem); opacity: .55; transition: transform 1.2s ease, opacity 1.2s ease, color 1.2s ease; }
.dawn.active .final-seal span { transform: translateY(0); opacity: 1; color: var(--vermilion); }
.closing-inscription { position: absolute; right: 10vw; bottom: 12vh; width: min(32rem, 78vw); color: var(--moon-ink); }
.closing-inscription a { color: var(--vermilion); font-family: var(--rounded); text-decoration: none; }
.ritual-line { font-size: .86rem; opacity: .68; font-family: var(--rounded); }

@keyframes rainDrift { to { transform: translate3d(-8rem, 12rem, 0); } }
@keyframes mistReveal { from { opacity: 0; filter: blur(18px); } to { opacity: 1; filter: blur(0); } }
@keyframes stampPress { 0% { opacity: 0; transform: rotate(18deg) scale(2.2); filter: blur(8px); } 70% { opacity: 1; transform: rotate(11deg) scale(.92); } 100% { opacity: 1; transform: rotate(11deg) scale(1); } }
@keyframes ghostPass { 0%,100% { transform: translateX(-8vw) translateY(1rem); opacity: 0; } 20%,70% { opacity: .72; } 50% { transform: translateX(28vw) translateY(-1rem); } }
@keyframes ripple { 0%,100% { transform: scale(.6); opacity: .18; } 50% { transform: scale(1.35); opacity: .55; } }
@keyframes upDrop { 0%,100% { transform: translateY(2rem); opacity: .05; } 50% { transform: translateY(-6rem); opacity: .38; } }
@keyframes flicker { 0%,100% { transform: translateY(0) scale(.7); opacity: .25; } 50% { transform: translateY(-2rem) scale(1.2); opacity: 1; } }
@keyframes curtainBreathe { 0%,100% { opacity: .26; transform: translateX(0); } 50% { opacity: .5; transform: translateX(1rem); } }

@media (max-width: 760px) {
  .seal-nav { right: 1rem; gap: .5rem; }
  .seal-dot { width: 1.6rem; height: 1.6rem; font-size: .7rem; }
  .accession { left: .8rem; top: 5vh; }
  .hero-cluster { left: 8vw; top: 48vh; }
  .date-stamp { right: 8vw; top: 11vh; width: 5.6rem; height: 5.6rem; }
  .left-strip, .right-strip { margin: 0; justify-self: center; }
  .qr-garden { inset: 16vh 5vw; }
  .qr-talisman { width: 6rem; height: 9rem; }
  .window-frame { width: 82vw; height: 20rem; }
  .closing-inscription { right: 7vw; }
}