:root {
  --night: #071521;
  --deep: #102B3D;
  --mist: #BFDDF2;
  --paper: #F4F0E8;
  --indigo: #294D73;
  --blush: #D9A6A1;
  --moss: #7D8B7C;
  --gold: #D8B35F;
  --shippori: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --zen: "Hiragino Maru Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --cormorant: "Cormorant Garamond", "Times New Roman", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: rgba(244, 240, 232, .88);
  background: linear-gradient(180deg, #071521 0%, #102B3D 46%, #294D73 100%);
  font-family: var(--zen);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.atmosphere, .grain, .rain-field, .mist {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.atmosphere { z-index: 0; overflow: hidden; }
.grain {
  opacity: .18;
  background-image:
    radial-gradient(circle at 12% 31%, rgba(244,240,232,.22) 0 1px, transparent 1.4px),
    radial-gradient(circle at 73% 18%, rgba(191,221,242,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 44% 82%, rgba(216,179,95,.12) 0 1px, transparent 1.5px);
  background-size: 31px 43px, 47px 59px, 67px 83px;
  mix-blend-mode: screen;
}
.rain-field {
  opacity: .38;
  background-image: linear-gradient(90deg, transparent 0 93%, rgba(191,221,242,.22) 94% 95%, transparent 96%), linear-gradient(180deg, rgba(191,221,242,.04), transparent 42%);
  background-size: 34px 100%, 100% 100%;
  animation: rainDrift 7s linear infinite;
}
.mist-one { background: radial-gradient(circle at 19% 24%, rgba(191,221,242,.16), transparent 34%); filter: blur(24px); animation: mistFloat 18s ease-in-out infinite alternate; }
.mist-two { background: radial-gradient(circle at 83% 72%, rgba(217,166,161,.09), transparent 31%); filter: blur(36px); animation: mistFloat 23s ease-in-out infinite alternate-reverse; }

.pavilion { position: relative; z-index: 1; }
.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(34px, 6vw, 82px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}
.room-label {
  position: absolute;
  top: 8vh;
  left: clamp(24px, 5vw, 70px);
  color: rgba(191,221,242,.7);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
}
.room-label span { color: #D8B35F; font-family: var(--shippori); font-size: 18px; margin-right: 10px; }
.vertical-note {
  position: absolute;
  left: clamp(18px, 3vw, 48px);
  bottom: 15vh;
  writing-mode: vertical-rl;
  color: rgba(191,221,242,.58);
  font-family: var(--shippori);
  letter-spacing: .35em;
  z-index: 4;
}
.vertical-note.right { left: auto; right: clamp(18px, 3vw, 48px); }

.threshold { min-height: 108vh; cursor: crosshair; }
.shoji-map {
  position: absolute;
  inset: 5vh 5vw;
  display: grid;
  grid-template-columns: 1.15fr .72fr 1.42fr .92fr;
  gap: clamp(8px, 1.5vw, 22px);
  perspective: 900px;
  z-index: -1;
}
.panel {
  border: 1px solid rgba(191,221,242,.22);
  background:
    linear-gradient(90deg, rgba(244,240,232,.03), rgba(191,221,242,.10), rgba(244,240,232,.025)),
    repeating-linear-gradient(0deg, rgba(244,240,232,.04) 0 1px, transparent 1px 12vh),
    repeating-linear-gradient(90deg, rgba(191,221,242,.07) 0 1px, transparent 1px 24%);
  box-shadow: inset 0 0 60px rgba(191,221,242,.05), 0 30px 80px rgba(7,21,33,.35);
  transform-origin: left center;
  filter: blur(.1px);
  animation: panelBreathe 8s ease-in-out infinite alternate;
}
.panel-b, .panel-d { transform-origin: right center; animation-delay: -3s; }
.threshold.open .panel-a { transform: rotateY(-11deg) translateX(-3vw); }
.threshold.open .panel-b { transform: rotateY(8deg) translateX(2vw); }
.threshold.open .panel-c { transform: rotateY(-6deg); }
.threshold.open .panel-d { transform: rotateY(10deg) translateX(3vw); }
.threshold-seam {
  position: absolute;
  top: 10vh;
  bottom: 8vh;
  left: 52%;
  width: 1px;
  background: linear-gradient(180deg, transparent, #BFDDF2, #D8B35F, transparent);
  box-shadow: 0 0 24px rgba(191,221,242,.8);
  transform: scaleY(.12);
  opacity: .35;
  transition: transform 1.4s ease, width 1.4s ease, opacity 1.4s ease;
}
.threshold.open .threshold-seam { width: 7px; opacity: .85; transform: scaleY(1); }
.threshold-copy {
  width: min(820px, 82vw);
  margin-left: -9vw;
  padding: clamp(28px, 5vw, 62px);
  border: 1px solid rgba(191,221,242,.18);
  background: linear-gradient(135deg, rgba(7,21,33,.38), rgba(191,221,242,.08));
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 100px rgba(7,21,33,.5);
}
.kicker { margin: 0 0 18px; color: #D8B35F; letter-spacing: .22em; text-transform: uppercase; font-size: 12px; }
.condensed-title {
  margin: 0;
  font-family: var(--shippori);
  font-weight: 400;
  font-size: clamp(54px, 12vw, 150px);
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244,240,232,.62);
  text-shadow: 0 0 22px rgba(191,221,242,.26), 0 18px 50px rgba(7,21,33,.85);
  filter: blur(.25px);
}
.poem, .slip-copy, .ledger-note, .corridor-copy, .return-slip p {
  max-width: 560px;
  line-height: 1.9;
  color: rgba(244,240,232,.76);
}
.object-action {
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid rgba(216,179,95,.42);
  border-radius: 999px;
  background: rgba(216,179,95,.08);
  color: #F4F0E8;
  cursor: pointer;
  transition: background .5s ease, box-shadow .5s ease, transform .5s ease;
}
.object-action:hover { background: rgba(216,179,95,.2); box-shadow: 0 0 28px rgba(216,179,95,.2); transform: translateY(-2px); }
.droplet-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.drop {
  position: absolute;
  width: var(--s, 9px); height: calc(var(--s, 9px) * 1.35);
  border-radius: 60% 60% 70% 70%;
  background: radial-gradient(circle at 35% 25%, #F4F0E8, #BFDDF2 45%, rgba(191,221,242,.12));
  box-shadow: 0 0 18px rgba(191,221,242,.34);
  opacity: .72;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .7s ease;
}
.d1{left:34%;top:42%;--s:8px}.d2{left:42%;top:36%;--s:12px}.d3{left:55%;top:47%;--s:7px}.d4{left:63%;top:41%;--s:10px}.d5{left:49%;top:56%;--s:13px}.d6{left:29%;top:57%;--s:7px}.d7{left:70%;top:32%;--s:8px}.d8{left:58%;top:62%;--s:11px}.d9{left:39%;top:66%;--s:9px}.d10{left:51%;top:30%;--s:6px}
.threshold.open .drop { transform: translate3d(var(--mx, 0px), 18vh, 0) scale(.8); opacity: .28; }

.worry-thread { position: fixed; left: 16px; top: 0; width: 50px; height: 100vh; z-index: 5; pointer-events: none; }
.worry-thread span { position: absolute; left: 22px; top: var(--thread-y, 12vh); width: 2px; height: 90px; background: linear-gradient(#D9A6A1, #D8B35F, transparent); box-shadow: 0 0 18px rgba(216,179,95,.45); border-radius: 3px; transition: top .35s ease; }

.shelf { background: radial-gradient(circle at 12% 82%, rgba(125,139,124,.17), transparent 30%); }
.shelf-perspective {
  width: min(980px, 86vw);
  min-height: 440px;
  transform: rotateX(58deg) rotateZ(-5deg) translateY(20px);
  transform-style: preserve-3d;
  border-bottom: 14px solid rgba(125,139,124,.32);
  box-shadow: 0 48px 90px rgba(7,21,33,.42);
}
.talisman {
  position: absolute;
  width: 138px;
  min-height: 210px;
  padding: 24px 16px;
  background: linear-gradient(180deg, rgba(244,240,232,.92), rgba(191,221,242,.58));
  color: #102B3D;
  border-radius: 10px 10px 26px 26px;
  box-shadow: 0 18px 35px rgba(7,21,33,.36);
  transform: translateZ(80px) rotateZ(var(--tilt));
  animation: talismanSway 5.5s ease-in-out infinite;
  animation-delay: var(--delay);
}
.talisman:before { content:""; position:absolute; inset: 12px 18px auto; height: 32px; border-top: 2px solid rgba(41,77,115,.45); border-bottom: 1px solid rgba(41,77,115,.25); }
.talisman b { display:block; margin-top: 42px; font-family: var(--shippori); font-size: 24px; font-weight: 400; }
.talisman span { display:block; margin-top: 14px; font-size: 12px; line-height: 1.55; color: rgba(16,43,61,.72); }
.talisman:nth-child(1){left:4%;top:36%}.talisman:nth-child(2){left:25%;top:19%}.talisman:nth-child(3){left:46%;top:33%}.talisman:nth-child(4){left:66%;top:12%}.talisman:nth-child(5){left:82%;top:38%}
.talisman.blush { background: linear-gradient(180deg, #F4F0E8, #D9A6A1); }
.talisman.moss { background: linear-gradient(180deg, #F4F0E8, #7D8B7C); }
.talisman.gold { background: linear-gradient(180deg, #F4F0E8, #D8B35F); }
.stone-path { position:absolute; bottom:10vh; left:12vw; display:flex; gap:28px; opacity:.55; }
.stone-path span { width:70px; height:38px; border-radius:50%; background: radial-gradient(circle at 40% 30%, #7D8B7C, rgba(41,77,115,.35)); filter: blur(.2px); }
.slip-copy { position:absolute; right:8vw; bottom:12vh; width:min(400px, 70vw); }

.ledger { background: linear-gradient(180deg, rgba(7,21,33,0), rgba(16,43,61,.54)); }
.pool {
  position: relative;
  width: min(950px, 86vw);
  height: min(62vh, 560px);
  border-radius: 50% 47% 52% 44%;
  background: radial-gradient(ellipse at 50% 45%, rgba(191,221,242,.20), rgba(41,77,115,.28) 44%, rgba(7,21,33,.68) 74%), linear-gradient(180deg, rgba(244,240,232,.07), rgba(7,21,33,.3));
  border: 1px solid rgba(191,221,242,.22);
  box-shadow: inset 0 0 90px rgba(191,221,242,.1), 0 45px 100px rgba(7,21,33,.45);
  overflow: hidden;
}
.moon-reflection { position:absolute; left:45%; top:23%; width:160px; height:36px; border-radius:50%; background: rgba(244,240,232,.22); filter: blur(14px); animation: reflection 6s ease-in-out infinite; }
.ripple, .pool:before, .pool:after { position:absolute; border:1px solid rgba(191,221,242,.32); border-radius:50%; content:""; opacity:.55; animation: ripplePulse 5.8s ease-out infinite; }
.r-a{inset:31% 35%}.r-b{inset:22% 26%; animation-delay:1.4s}.r-c{inset:14% 18%; animation-delay:2.8s}.pool:before{inset:39% 42%; animation-delay:.6s}.pool:after{inset:6% 9%; animation-delay:3.5s}
.ripple-phrase {
  position: absolute;
  border: 0;
  background: transparent;
  color: rgba(244,240,232,.82);
  font-family: var(--cormorant);
  font-size: clamp(22px, 3vw, 42px);
  font-style: italic;
  cursor: pointer;
  text-shadow: 0 0 18px rgba(191,221,242,.32);
  transition: transform .8s ease, letter-spacing .8s ease, opacity .8s ease;
}
.ripple-phrase:hover, .ripple-phrase.active { transform: scale(1.08); letter-spacing: .06em; opacity: .62; }
.p1{left:11%;top:35%}.p2{right:16%;top:27%}.p3{left:35%;bottom:22%}
.ledger-note { position:absolute; bottom:8vh; left:9vw; }

.folding { background: radial-gradient(circle at 75% 24%, rgba(217,166,161,.12), transparent 28%); }
.fold-field { width:min(1040px, 88vw); display:grid; grid-template-columns: repeat(4, minmax(150px,1fr)); gap: clamp(14px, 2vw, 28px); align-items:center; }
.fold-slip {
  position: relative;
  min-height: 280px;
  padding: 28px 18px;
  border: 1px solid rgba(191,221,242,.22);
  background: linear-gradient(145deg, rgba(244,240,232,.86) 0 48%, rgba(191,221,242,.52) 49% 100%);
  color: #102B3D;
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%);
  cursor: pointer;
  transform: rotate(var(--r, -3deg));
  transition: transform .75s cubic-bezier(.2,.8,.2,1), clip-path .75s ease, background .75s ease;
}
.fold-slip:nth-child(2){--r:4deg; margin-top:12vh}.fold-slip:nth-child(3){--r:-7deg; margin-top:-6vh}.fold-slip:nth-child(4){--r:5deg; margin-top:8vh}
.fold-slip span { display:block; font-family: var(--shippori); font-size: 30px; margin-bottom: 40px; }
.fold-slip em { display:block; opacity:0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; line-height:1.7; font-style: normal; }
.fold-slip.open { transform: rotate(0deg) scale(1.04); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #F4F0E8, rgba(217,166,161,.78)); z-index:2; }
.fold-slip.open em { opacity:1; transform: translateY(0); }
.ink-bleed { position:absolute; right:12vw; bottom:11vh; width:230px; height:230px; border-radius:45% 55% 48% 52%; background: rgba(41,77,115,.28); filter: blur(24px); animation: inkSpread 12s ease-in-out infinite alternate; }

.corridor { min-height: 105vh; }
.lantern-track { position:relative; width: min(1120px, 90vw); height: 520px; transform-style: preserve-3d; perspective: 700px; }
.lantern { position:absolute; top: var(--top); left: var(--left); transform: translateZ(var(--z)) scale(var(--scale)); text-align:center; transition: filter .45s ease, transform .45s ease; }
.lantern:before { content:""; display:block; width:1px; height:90px; margin:auto; background: linear-gradient(#BFDDF2, transparent); opacity:.5; }
.lantern span { display:block; width:82px; height:118px; border-radius: 48% 48% 42% 42%; background: radial-gradient(circle at 50% 40%, rgba(216,179,95,.85), rgba(191,221,242,.24) 48%, rgba(41,77,115,.34)); border:1px solid rgba(216,179,95,.32); box-shadow: 0 0 42px rgba(216,179,95,.18); animation: lanternBreath 4s ease-in-out infinite; }
.lantern b { display:block; margin-top:12px; color: rgba(244,240,232,.65); font-weight:400; font-size:12px; letter-spacing:.18em; }
.lantern.near { filter: brightness(1.45); transform: translateZ(var(--z)) scale(calc(var(--scale) * 1.12)); }
.lantern.near span { box-shadow: 0 0 80px rgba(216,179,95,.48); }
.l1{--left:2%;--top:18%;--z:-70px;--scale:.8}.l2{--left:24%;--top:4%;--z:60px;--scale:1.05}.l3{--left:48%;--top:23%;--z:140px;--scale:1.2}.l4{--left:70%;--top:8%;--z:20px;--scale:.95}.l5{--left:88%;--top:30%;--z:-90px;--scale:.74}
.corridor-copy { position:absolute; bottom:9vh; right:9vw; }

.return { background: radial-gradient(circle at 53% 30%, rgba(244,240,232,.12), transparent 26%); }
.moon-window { position:relative; width:min(520px, 70vw); height:min(520px, 70vw); border-radius:50%; background: radial-gradient(circle at 42% 35%, #F4F0E8, #BFDDF2 28%, rgba(41,77,115,.62) 55%, rgba(7,21,33,.88)); border: 18px solid rgba(16,43,61,.72); box-shadow: 0 0 90px rgba(191,221,242,.22), inset 0 0 60px rgba(7,21,33,.42); margin-left:-18vw; overflow:hidden; transition: box-shadow 1s ease, transform 1s ease; }
.moon-window.open { box-shadow: 0 0 140px rgba(191,221,242,.48), inset 0 0 40px rgba(244,240,232,.18); transform: scale(1.03); }
.star { position:absolute; width:4px; height:4px; border-radius:50%; background:#F4F0E8; opacity:0; box-shadow:0 0 12px #BFDDF2; animation: starArrive 4.5s ease-in-out infinite; }
.s1{left:24%;top:34%;animation-delay:.1s}.s2{left:52%;top:19%;animation-delay:.8s}.s3{left:72%;top:44%;animation-delay:1.3s}.s4{left:39%;top:62%;animation-delay:1.9s}.s5{left:59%;top:73%;animation-delay:2.4s}.s6{left:18%;top:56%;animation-delay:3s}
.return-slip { position:absolute; right:8vw; bottom:16vh; width:min(470px, 78vw); padding:32px; background: rgba(244,240,232,.08); border:1px solid rgba(191,221,242,.2); backdrop-filter: blur(10px); }
.return-slip h2 { margin:0 0 18px; font-family:var(--shippori); font-weight:400; font-size:clamp(36px,5vw,66px); color:#F4F0E8; }
.final-water { position:absolute; left:0; right:0; bottom:0; height:22vh; background: linear-gradient(180deg, transparent, rgba(191,221,242,.12)), repeating-radial-gradient(ellipse at 50% 100%, rgba(191,221,242,.14) 0 1px, transparent 2px 26px); opacity:.65; }

@keyframes rainDrift { to { background-position: 0 120px, 0 0; } }
@keyframes mistFloat { from { transform: translate(-3vw, -1vh) scale(1); } to { transform: translate(4vw, 3vh) scale(1.08); } }
@keyframes panelBreathe { from { opacity:.62; transform: rotateY(-1deg); } to { opacity:.9; transform: rotateY(2deg); } }
@keyframes talismanSway { 0%,100% { margin-top:0; } 50% { margin-top:-12px; } }
@keyframes ripplePulse { 0% { transform: scale(.72); opacity:.55; } 100% { transform: scale(1.35); opacity:0; } }
@keyframes reflection { 0%,100% { transform: scaleX(1); opacity:.42; } 50% { transform: scaleX(1.25); opacity:.22; } }
@keyframes inkSpread { to { transform: scale(1.25) rotate(18deg); opacity:.5; } }
@keyframes lanternBreath { 0%,100% { filter: brightness(.92); } 50% { filter: brightness(1.25); } }
@keyframes starArrive { 0%,30% { opacity:0; transform: translateY(26px); } 55%,100% { opacity:.85; transform: translateY(0); } }

@media (max-width: 820px) {
  .threshold-copy { margin-left:0; width:92vw; }
  .fold-field { grid-template-columns:1fr; padding-top:12vh; }
  .fold-slip, .fold-slip:nth-child(n) { min-height:210px; margin-top:0; }
  .shelf-perspective { transform: rotateX(48deg) rotateZ(-5deg) scale(.78); }
  .talisman { width:120px; }
  .room-label { top: 4vh; }
  .return-slip, .slip-copy, .corridor-copy, .ledger-note { position:relative; inset:auto; margin-top:24px; }
  .moon-window { margin-left:0; }
}