:root {
  --sumi: #090807;
  --paper: #F2E7CF;
  --amber: #F0A33A;
  --lacquer: #C83A2D;
  --indigo: #18213B;
  --tatami: #B8A56A;
  --moth: #A6D77B;
  --violet: #7E5BEF;
  --font-display: 'Shippori Mincho', serif;
  --font-gothic: 'Zen Kaku Gothic New', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 18%, rgba(240, 163, 58, .18), transparent 22vw),
    radial-gradient(circle at 82% 77%, rgba(126, 91, 239, .09), transparent 16vw),
    linear-gradient(125deg, var(--sumi), var(--indigo) 52%, #060504 100%);
  font-family: var(--font-serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(242, 231, 207, .025) 1px, transparent 1px),
    linear-gradient(rgba(242, 231, 207, .02) 1px, transparent 1px);
  background-size: 8.333vw 13vh;
  opacity: .7;
  transform: rotate(-.6deg) scale(1.02);
  z-index: 3;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  background:
    radial-gradient(circle at 20% 30%, rgba(242,231,207,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(9,8,7,.35) 0 1px, transparent 1.3px),
    radial-gradient(circle at 40% 80%, rgba(184,165,106,.25) 0 1px, transparent 1.4px);
  background-size: 39px 41px, 29px 31px, 53px 47px;
  mix-blend-mode: overlay;
}

.room-plaques {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 10px;
}

.room-plaques a {
  width: 34px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--sumi);
  background: linear-gradient(90deg, #8b5b2f, var(--tatami), #6c3e25);
  border: 1px solid rgba(242,231,207,.25);
  font-family: var(--font-gothic);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  transition: transform .5s ease, background .5s ease, color .5s ease;
}

.room-plaques a:nth-child(2n) { transform: rotate(2deg); }
.room-plaques a:nth-child(odd) { transform: rotate(-1.2deg); }
.room-plaques a.is-current { background: var(--lacquer); color: var(--paper); }

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 7vh 8vw;
  isolation: isolate;
}

.room::before {
  content: "";
  position: absolute;
  inset: 3vh 4vw;
  border: 1px solid rgba(242,231,207,.13);
  background:
    linear-gradient(90deg, transparent 24.8%, rgba(242,231,207,.14) 25%, transparent 25.2%, transparent 49.8%, rgba(242,231,207,.11) 50%, transparent 50.2%, transparent 74.8%, rgba(242,231,207,.13) 75%, transparent 75.2%),
    linear-gradient(transparent 31.8%, rgba(242,231,207,.12) 32%, transparent 32.2%, transparent 65.8%, rgba(242,231,207,.09) 66%, transparent 66.2%);
  opacity: .42;
  pointer-events: none;
  z-index: -1;
}

.room-label,
.room-kicker,
.lintel,
.mono-note {
  font-family: var(--font-mono);
  letter-spacing: .08em;
}

.room-label {
  position: absolute;
  color: var(--tatami);
  font-family: var(--font-gothic);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .18em;
}
.high-right { top: 9vh; right: 9vw; }
.floor-left { bottom: 9vh; left: 8vw; }
.left-middle { top: 45%; left: 5vw; transform: rotate(-90deg); }
.high-left { top: 8vh; left: 9vw; }

.threshold { background: radial-gradient(circle at 12% 74%, rgba(240,163,58,.2), transparent 25vw); }

.lintel {
  position: absolute;
  top: 4vh;
  left: 10vw;
  right: 17vw;
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22px;
  color: var(--paper);
  background: linear-gradient(90deg, #422315, #8d5428 48%, #2e1a12);
  border-bottom: 2px solid rgba(9,8,7,.6);
  font-size: 13px;
  z-index: 4;
}
.lintel i { color: rgba(242,231,207,.55); font-style: normal; }

.shoji-wall {
  position: absolute;
  inset: 10vh 9vw 12vh 12vw;
  background:
    linear-gradient(90deg, rgba(9,8,7,.24) 0 1px, transparent 1px 18%, rgba(9,8,7,.28) 18.2% 18.8%, transparent 19%),
    linear-gradient(rgba(9,8,7,.18) 0 1px, transparent 1px 22%, rgba(9,8,7,.22) 22.2% 22.8%, transparent 23%),
    linear-gradient(108deg, rgba(242,231,207,.83), rgba(242,231,207,.52));
  background-size: 15vw 100%, 100% 18vh, auto;
  box-shadow: inset 0 0 60px rgba(9,8,7,.55), 0 25px 70px rgba(0,0,0,.48);
  opacity: .82;
}

.threshold-paper::after,
.alcove-paper::after,
.translucent-note::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(105deg, rgba(9,8,7,.04) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cropped-kanji {
  position: absolute;
  left: -7vw;
  top: -17vh;
  font-family: var(--font-display);
  font-size: clamp(170px, 31vw, 520px);
  font-weight: 800;
  line-height: .82;
  color: rgba(9,8,7,.6);
  letter-spacing: -.18em;
  filter: blur(.2px);
}

.cloud { position: absolute; border-radius: 50%; filter: blur(28px); background: rgba(242,231,207,.38); }
.cloud-one { width: 32vw; height: 16vh; left: 18%; top: 38%; animation: breathe 8s ease-in-out infinite; }
.cloud-two { width: 22vw; height: 13vh; right: 10%; top: 19%; animation: breathe 11s ease-in-out infinite reverse; }
.rare-pinhole { position: absolute; right: 24%; bottom: 35%; width: 3px; height: 3px; background: var(--violet); box-shadow: 0 0 22px 7px var(--violet); }

.lantern {
  position: absolute;
  left: 8vw;
  bottom: 12vh;
  width: 105px;
  height: 150px;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(circle at 45% 42%, #ffe0a0, var(--amber) 43%, rgba(200,58,45,.8) 72%, rgba(9,8,7,.15));
  box-shadow: 0 0 var(--flicker, 65px) rgba(240,163,58,.62), inset 0 -18px 30px rgba(9,8,7,.28);
  z-index: 5;
}
.lantern::before, .lantern::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: rgba(9,8,7,.45); }
.lantern::before { top: 30%; } .lantern::after { bottom: 26%; }

.shadow-stage {
  position: absolute;
  right: 10vw;
  bottom: 12vh;
  width: min(40vw, 540px);
  height: 34vh;
  z-index: 6;
}
.possible-shadow {
  position: absolute;
  border: 0;
  color: rgba(242,231,207,.7);
  background: rgba(9,8,7,.45);
  font-family: var(--font-gothic);
  padding: 18px 26px;
  clip-path: polygon(8% 8%, 100% 0, 92% 92%, 0 100%);
  cursor: pointer;
  transition: transform .7s ease, color .7s ease, background .7s ease, filter .7s ease;
}
.possible-shadow:nth-child(1) { left: 5%; top: 12%; transform: rotate(-7deg) skewX(-15deg); }
.possible-shadow:nth-child(2) { left: 38%; top: 42%; transform: rotate(4deg) skewX(12deg); }
.possible-shadow:nth-child(3) { right: 2%; top: 8%; transform: rotate(-2deg) skewX(20deg); }
.possible-shadow.is-observed { color: var(--sumi); background: rgba(240,163,58,.86); filter: blur(.1px); }

.threshold-caption {
  position: absolute;
  left: 14vw;
  bottom: 12vh;
  z-index: 7;
  max-width: 470px;
}
h1, h2 { font-family: var(--font-display); font-weight: 700; margin: 0; }
h1 { font-size: clamp(54px, 8vw, 124px); line-height: .9; }
h2 { font-size: clamp(36px, 5vw, 82px); line-height: 1.02; }
p { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.8; color: rgba(242,231,207,.78); }
.room-kicker { color: var(--amber); text-transform: uppercase; font-size: 12px; }
.mono-note { color: var(--moth); font-size: 12px; }

.branches { background: radial-gradient(circle at 78% 23%, rgba(126,91,239,.1), transparent 18vw), linear-gradient(160deg, var(--indigo), var(--sumi)); }
.split-kanji { position: absolute; left: 10vw; top: 15vh; display: flex; align-items: center; gap: 5vw; color: rgba(242,231,207,.18); font-family: var(--font-display); font-size: 21vw; }
.split-kanji i { width: 9px; height: 72vh; background: linear-gradient(var(--tatami), transparent, var(--lacquer)); transform: rotate(.7deg); }
.branch-screen { position: absolute; inset: 20vh 10vw 17vh 32vw; display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 12px; transform: rotate(.8deg); }
.panel { position: relative; background: rgba(242,231,207,.68); border: 13px solid rgba(9,8,7,.45); box-shadow: inset 0 0 35px rgba(9,8,7,.28); overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--x, 50%) var(--y, 50%), rgba(9,8,7,.46), transparent 30%), repeating-linear-gradient(90deg, transparent 0 26%, rgba(9,8,7,.32) 26.3% 27.5%, transparent 28%); transition: background 1s ease; }
.panel span { position: absolute; bottom: 18px; left: 16px; color: rgba(9,8,7,.8); font-family: var(--font-mono); font-size: 12px; writing-mode: vertical-rl; }
.hanging-strips { position: absolute; left: 14vw; bottom: 10vh; display: flex; gap: 12px; align-items: flex-start; }
.hanging-strips span { width: 42px; min-height: 190px; padding: 18px 8px; color: var(--sumi); background: var(--paper); font-family: var(--font-mono); font-size: 11px; writing-mode: vertical-rl; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.hanging-strips span:nth-child(2) { margin-top: 38px; background: #ead8ac; transform: rotate(2deg); }
.behind-paper { position: absolute; right: 12vw; bottom: 8vh; max-width: 390px; padding: 28px; color: var(--sumi); background: rgba(242,231,207,.58); backdrop-filter: blur(2px); }

.tea { background: radial-gradient(circle at 28% 62%, rgba(240,163,58,.16), transparent 22vw), var(--sumi); }
.tatami-grid { position: absolute; inset: 12vh 38vw 11vh 8vw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; transform: rotate(-1deg); }
.tatami-grid span { border: 1px solid rgba(184,165,106,.5); background: linear-gradient(45deg, rgba(184,165,106,.16), rgba(184,165,106,.04)); color: rgba(184,165,106,.72); font-family: var(--font-mono); padding: 14px; }
.tatami-grid span:nth-child(4) { transform: rotate(2deg); border-color: var(--lacquer); }
.tea-bowl { position: absolute; left: 31vw; top: 35vh; width: 260px; height: 130px; border-radius: 50%; background: radial-gradient(ellipse at center, #24120e 35%, var(--lacquer) 36% 64%, #260c09 65%); box-shadow: 0 45px 65px rgba(0,0,0,.55); }
.tea-surface { position: absolute; inset: 24px 36px 36px; border-radius: 50%; background: radial-gradient(ellipse at 45% 45%, rgba(166,215,123,.55), rgba(24,33,59,.88)); }
.steam { position: absolute; left: 45%; bottom: 80%; width: 220px; height: 260px; }
.steam i { position: absolute; bottom: 0; width: 2px; height: 180px; background: linear-gradient(transparent, rgba(242,231,207,.55), transparent); transform-origin: bottom; animation: steam 6s ease-in-out infinite; }
.steam i:nth-child(1) { left: 10%; transform: rotate(-18deg); }
.steam i:nth-child(2) { left: 28%; animation-delay: -1s; transform: rotate(10deg); }
.steam i:nth-child(3) { left: 45%; animation-delay: -2s; transform: rotate(-4deg); }
.steam i:nth-child(4) { left: 62%; animation-delay: -3s; transform: rotate(20deg); }
.steam i:nth-child(5) { left: 80%; animation-delay: -4s; transform: rotate(-11deg); }
.tea-text { position: absolute; right: 9vw; top: 19vh; width: min(42vw, 560px); padding: 42px; background: rgba(242,231,207,.16); border: 1px solid rgba(242,231,207,.28); box-shadow: inset 0 0 50px rgba(242,231,207,.08); }

.moths { background: radial-gradient(circle at 80% 28%, rgba(166,215,123,.13), transparent 20vw), linear-gradient(25deg, var(--sumi), #101710 60%, var(--indigo)); }
.moth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .78; }
.moth-moon { position: absolute; right: 13vw; top: 11vh; width: 24vw; height: 24vw; border-radius: 50%; background: radial-gradient(circle, rgba(242,231,207,.72), rgba(242,231,207,.08) 58%, transparent 68%); filter: blur(2px); }
.moth-copy { position: absolute; left: 13vw; bottom: 12vh; max-width: 520px; }
.moth-silhouette { position: absolute; width: 70px; height: 45px; background: var(--moth); opacity: .35; clip-path: polygon(50% 45%, 0 0, 14% 80%, 50% 55%, 86% 80%, 100% 0); filter: blur(.6px); animation: mothFloat 8s ease-in-out infinite; }
.moth-a { right: 30vw; top: 48vh; } .moth-b { right: 18vw; top: 36vh; animation-delay: -2s; } .moth-c { left: 30vw; top: 21vh; animation-delay: -4s; }

.coin { background: radial-gradient(circle at 50% 50%, rgba(126,91,239,.12), transparent 19vw), var(--sumi); }
.alcove-paper { position: absolute; inset: 15vh 12vw 11vh 41vw; background: linear-gradient(120deg, rgba(242,231,207,.74), rgba(242,231,207,.36)); border: 18px solid rgba(9,8,7,.54); box-shadow: inset 0 0 70px rgba(9,8,7,.28); }
.bell-cord { position: absolute; top: -18px; left: 55%; width: 5px; height: 44vh; background: linear-gradient(#51301d, var(--lacquer), #2c1711); transform-origin: top; animation: cordMaybe 9s steps(2, end) infinite; }
.bell-cord::after { content: ""; position: absolute; bottom: -28px; left: -15px; width: 35px; height: 35px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 24px rgba(240,163,58,.4); }
.edge-coin { position: absolute; left: 48%; top: 55%; width: 22px; height: 240px; border-radius: 50%; background: linear-gradient(90deg, var(--violet), var(--paper), var(--amber), var(--violet)); box-shadow: 0 0 18px var(--violet), 0 0 1px 1px var(--violet); transform-origin: 50% 88%; animation: coinWobble 4.8s ease-in-out infinite; }
.edge-coin span { position: absolute; inset: 8px 6px; border-left: 1px solid rgba(9,8,7,.28); border-right: 1px solid rgba(9,8,7,.18); }
.coin-shadow { position: absolute; left: 35%; bottom: 14%; width: 250px; height: 34px; border-radius: 50%; background: rgba(9,8,7,.45); filter: blur(13px); }
.final-mark { position: absolute; left: 9vw; top: 25vh; max-width: 540px; }

@keyframes breathe { 50% { transform: translate(2vw, -1vh) scale(1.12); opacity: .68; } }
@keyframes steam { 50% { height: 240px; filter: blur(2px); opacity: .25; } }
@keyframes mothFloat { 50% { transform: translate(28px, -44px) rotate(12deg); opacity: .58; } }
@keyframes cordMaybe { 0%, 65% { transform: rotate(0deg); } 66%, 80% { transform: rotate(2deg); } 81%, 100% { transform: rotate(-1deg); } }
@keyframes coinWobble { 0%, 100% { transform: rotate(-3deg) scaleX(1); } 45% { transform: rotate(4deg) scaleX(.72); } 70% { transform: rotate(-1deg) scaleX(1.15); } }

@media (max-width: 760px) {
  .room { padding: 8vh 7vw; }
  .room-plaques { right: 8px; }
  .lintel { left: 5vw; right: 10vw; font-size: 10px; }
  .shoji-wall { inset: 11vh 8vw 22vh; }
  .threshold-caption { left: 8vw; bottom: 7vh; max-width: 76vw; }
  .shadow-stage { right: 7vw; bottom: 34vh; width: 82vw; }
  .branch-screen, .tatami-grid, .alcove-paper { inset: 18vh 9vw 20vh 9vw; }
  .tea-text, .final-mark, .moth-copy { left: 8vw; right: 12vw; top: auto; bottom: 9vh; width: auto; }
  .tea-bowl { left: 18vw; top: 24vh; }
  .hanging-strips { left: 8vw; bottom: 32vh; }
}