:root {
  --void: #07070A;
  --paper: #F3EAD2;
  --brass: #C99B42;
  --vermilion: #E34234;
  --cyan: #87F7E7;
  --indigo: #263E73;
  --serif-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --instrument: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --gothic: "Zen Kaku Gothic New", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 155, 66, .12), transparent 22rem),
    radial-gradient(circle at 15% 55%, rgba(38, 62, 115, .55), transparent 30rem),
    linear-gradient(180deg, #07070A 0%, #080910 45%, #07070A 100%);
  font-family: var(--gothic);
  overflow-x: hidden;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .27; mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 234, 210, .14) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(201, 155, 66, .12) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent, rgba(243, 234, 210, .025), transparent);
  background-size: 29px 31px, 43px 47px, 7px 100%;
}

.cursor-fork {
  position: fixed; width: 42px; height: 42px; left: 0; top: 0; z-index: 60; pointer-events: none;
  border: 1px solid rgba(135,247,231,.45); border-radius: 50%; transform: translate(-50%, -50%);
  opacity: .8; transition: width .25s ease, height .25s ease, border-color .25s ease;
}
.cursor-fork span, .cursor-fork:before, .cursor-fork:after { content: ""; position: absolute; background: var(--cyan); opacity: .75; }
.cursor-fork span { width: 1px; height: 26px; left: 50%; top: 8px; }
.cursor-fork:before, .cursor-fork:after { width: 1px; height: 13px; top: 5px; }
.cursor-fork:before { left: 17px; } .cursor-fork:after { right: 17px; }

.ritual-nav {
  position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: grid; gap: 14px; font-family: var(--serif-jp); writing-mode: vertical-rl;
}
.ritual-nav a { color: var(--paper); text-decoration: none; border: 1px solid rgba(201,155,66,.42); padding: 10px 5px; background: rgba(7,7,10,.55); transition: .35s; }
.ritual-nav a:hover, .ritual-nav a.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 25px rgba(135,247,231,.22); }

.chamber {
  min-height: 100vh; position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(32px, 6vw, 92px); display: grid; align-content: center;
  border-bottom: 1px solid rgba(201,155,66,.12);
}
.chamber:before { content: attr(data-chamber); position: absolute; left: 28px; top: 24px; font: 11px var(--mono); color: rgba(243,234,210,.52); letter-spacing: .34em; text-transform: uppercase; }
.chamber:after { content: "〜 ・・ 〜 ・・ 〜 ・・ 〜 ・・ 〜"; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(201,155,66,.42); font: 12px var(--mono); letter-spacing: .45em; white-space: nowrap; }

.first-bell { place-items: center; text-align: center; min-height: 112vh; }
.hanging-thread { position: absolute; top: 0; left: 50%; width: 1px; height: 25vh; background: linear-gradient(var(--paper), var(--brass)); opacity: .5; }
.bell-dot { position: absolute; top: 24vh; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--brass); box-shadow: 0 0 38px rgba(201,155,66,.75); cursor: pointer; z-index: 4; }
.bell-dot span { position: absolute; inset: -9px; border: 1px solid rgba(201,155,66,.55); border-radius: 50%; animation: smallPulse 2.8s infinite; }
.first-bell.struck .bell-dot { animation: strikeBell .75s cubic-bezier(.2,1.8,.4,1); }
.seal-flash { position: absolute; top: 31vh; left: 58%; width: 82px; height: 82px; display: grid; place-items: center; color: var(--paper); background: var(--vermilion); font: 42px var(--serif-jp); border-radius: 8px; opacity: 0; transform: rotate(-11deg) scale(.35); z-index: 5; }
.first-bell.struck .seal-flash { animation: seal .9s ease; }
.hero-rings { position: absolute; width: min(74vw, 760px); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: .88; }
.ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(201,155,66,.34); color: var(--brass); font-family: var(--mono); letter-spacing: .4em; text-transform: uppercase; opacity: 0; }
.ring-one { inset: 3%; font: clamp(15px, 2.4vw, 28px) var(--serif-jp); color: var(--paper); }
.ring-one span { margin: 0 .55em; filter: drop-shadow(0 0 8px rgba(135,247,231,.55)); }
.ring-two { inset: 14%; color: var(--cyan); animation-delay: .15s; }
.ring-three { inset: 28%; color: var(--brass); writing-mode: vertical-rl; animation-delay: .3s; }
.first-bell.struck .ring { animation: ringOpen 2.2s ease forwards, rotateRing 24s linear infinite; }
.domain-word { position: relative; z-index: 3; margin: 0; font-family: var(--serif-jp); font-size: clamp(54px, 12vw, 172px); font-weight: 500; letter-spacing: .08em; text-shadow: 2px 0 rgba(135,247,231,.28), -2px 0 rgba(227,66,52,.18); }
.domain-word span { display: inline-block; transition: transform .8s ease, letter-spacing .8s ease; }
.first-bell.struck .domain-word span:nth-child(1) { transform: translateX(-.18em) rotate(-2deg); }
.first-bell.struck .domain-word span:nth-child(2) { transform: translateY(-.08em); }
.first-bell.struck .domain-word span:nth-child(3) { transform: translateX(.14em) rotate(2deg); }
.domain-word i { color: var(--vermilion); font-style: normal; }
.lyric { font-family: var(--instrument); font-size: clamp(24px, 4vw, 58px); line-height: .98; color: rgba(243,234,210,.86); max-width: 900px; }
.intro-line { margin-top: 8vh; font-size: clamp(23px, 3vw, 44px); }
.micro-label { font: 10px var(--mono); color: rgba(135,247,231,.72); letter-spacing: .22em; text-transform: uppercase; }
.top-left { position: absolute; left: 8vw; top: 33vh; }
.scroll-cue { position: absolute; bottom: 8vh; font: 12px var(--mono); color: var(--brass); letter-spacing: .45em; text-transform: uppercase; }
.bell-shape { position: absolute; right: 11vw; bottom: 13vh; width: 120px; height: 90px; border: 1px solid rgba(201,155,66,.42); border-radius: 50% 50% 18% 18%; opacity: .45; }

.paper-wall { background: radial-gradient(circle at 75% 40%, rgba(243,234,210,.08), transparent 28rem), linear-gradient(100deg, rgba(38,62,115,.28), transparent 45%); }
.vertical-title { position: absolute; left: 7vw; top: 18vh; writing-mode: vertical-rl; font-family: var(--serif-jp); font-size: clamp(42px, 7vw, 102px); letter-spacing: .16em; color: var(--paper); }
.vertical-title em { color: var(--brass); font-style: normal; font-size: .45em; }
.shoji-field { margin-left: min(28vw, 360px); display: flex; min-height: 68vh; align-items: stretch; gap: clamp(12px, 2vw, 28px); }
.paper-panel { width: min(22vw, 245px); background: linear-gradient(180deg, rgba(243,234,210,.94), rgba(243,234,210,.74)); color: var(--void); padding: 32px 20px; border: 1px solid var(--brass); box-shadow: 0 0 60px rgba(201,155,66,.1); transform: translateY(80px); opacity: .35; transition: 1s ease; clip-path: polygon(3% 0, 100% 1%, 97% 100%, 0 98%); }
.paper-panel.visible { transform: translateY(0); opacity: 1; }
.paper-panel b { display: block; font-family: var(--serif-jp); font-size: clamp(44px, 7vw, 90px); color: var(--vermilion); }
.paper-panel small { display: block; font: 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--indigo); }
.paper-panel p { font-size: 16px; line-height: 1.7; }
.kana-rain { position: absolute; right: 8vw; top: 10vh; writing-mode: vertical-rl; color: rgba(135,247,231,.35); font: 32px var(--serif-jp); letter-spacing: .7em; animation: drift 12s ease-in-out infinite; }
.blank-scroll { position: absolute; right: 19vw; bottom: 9vh; width: 48px; height: 160px; border: 1px solid rgba(243,234,210,.28); }

.fork-bridge { background: radial-gradient(circle at 50% 50%, rgba(135,247,231,.08), transparent 34rem); }
h2 { margin: 0; font: 500 clamp(48px, 9vw, 140px)/.9 var(--serif-jp); letter-spacing: .07em; }
.bridge-line { max-width: 620px; margin: 24px 0 0 7vw; color: rgba(243,234,210,.78); }
.bridge-stage { position: relative; height: 45vh; margin-top: 4vh; }
.fork { position: absolute; width: 90px; height: 260px; border-bottom: 4px solid var(--brass); filter: drop-shadow(0 0 20px rgba(135,247,231,.22)); animation: forkHum 2.4s infinite alternate ease-in-out; }
.fork-a { left: 18%; top: 5%; transform: rotate(-18deg); } .fork-b { right: 18%; bottom: 0; transform: rotate(18deg); animation-delay: .6s; }
.fork i { position: absolute; top: 0; width: 18px; height: 180px; border: 2px solid var(--cyan); border-bottom: 0; }
.fork i:first-child { left: 15px; border-radius: 16px 16px 0 0; } .fork i:nth-child(2) { right: 15px; border-radius: 16px 16px 0 0; }
.fork span { position: absolute; left: 43px; top: 175px; width: 4px; height: 85px; background: var(--brass); }
.note-stems span { position: absolute; width: 1px; height: 42vh; background: linear-gradient(var(--cyan), transparent); transform: rotate(55deg); opacity: .46; }
.note-stems span:nth-child(1){left:15%;top:2%}.note-stems span:nth-child(2){left:27%;top:15%}.note-stems span:nth-child(3){left:39%;top:-5%}.note-stems span:nth-child(4){left:51%;top:12%}.note-stems span:nth-child(5){left:63%;top:-2%}.note-stems span:nth-child(6){left:75%;top:10%}.note-stems span:nth-child(7){left:87%;top:-8%}
.wave-svg { position: absolute; inset: auto 0 6vh 0; width: 100%; height: 46vh; overflow: visible; z-index: -1; }
.wave-svg path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 1600; stroke-dashoffset: 1600; opacity: .62; filter: drop-shadow(0 0 12px rgba(135,247,231,.4)); }
.wave-svg path:nth-child(2) { stroke: var(--brass); opacity: .42; }
.in-view .wave-svg path { animation: drawWave 3s ease forwards; }
.frequency-orbit { position: absolute; right: 12vw; top: 20vh; width: 210px; aspect-ratio: 1; border: 1px solid rgba(201,155,66,.35); border-radius: 50%; animation: rotateRing 18s linear infinite; }
.frequency-orbit span { position: absolute; font: 10px var(--mono); color: var(--cyan); text-transform: uppercase; }
.frequency-orbit span:nth-child(1){top:-8px;left:40%}.frequency-orbit span:nth-child(2){right:-12px;top:48%}.frequency-orbit span:nth-child(3){bottom:-8px;left:40%}.frequency-orbit span:nth-child(4){left:-12px;top:48%}

.rain-drum { text-align: center; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(38,62,115,.62), transparent 34rem); }
.rain-drum .lyric { font-size: clamp(24px, 3.4vw, 48px); }
.water-basin { position: relative; width: min(82vw, 720px); aspect-ratio: 1.85; margin-top: 4vh; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(38,62,115,.88), #050507 68%); border: 1px solid rgba(201,155,66,.34); box-shadow: inset 0 0 80px #000, 0 0 60px rgba(38,62,115,.44); overflow: hidden; }
.drum-skin { position: absolute; inset: 13%; border-radius: 50%; border: 1px solid rgba(243,234,210,.22); }
.rain-ring { position: absolute; border: 1px solid rgba(135,247,231,.65); border-radius: 50%; width: 70px; height: 28px; animation: rainPulse 3.5s infinite ease-out; }
.r1{left:18%;top:38%}.r2{left:48%;top:18%;animation-delay:.8s}.r3{left:68%;top:52%;animation-delay:1.4s}.r4{left:34%;top:63%;animation-delay:2.1s}
.hanko { position: absolute; right: 16%; bottom: 22%; width: 74px; height: 74px; display: grid; place-items: center; border: 4px solid var(--vermilion); color: var(--vermilion); font-family: var(--serif-jp); transform: rotate(8deg); }
.onomatopoeia { margin-top: 26px; color: rgba(201,155,66,.75); font: 18px var(--serif-jp); letter-spacing: .8em; }

.lantern-archive { background: linear-gradient(180deg, transparent, rgba(201,155,66,.06), transparent); }
.archive-header { max-width: 950px; }
.archive-header p { font: clamp(22px, 3vw, 42px) var(--instrument); color: rgba(243,234,210,.72); }
.lantern-stream { display: flex; gap: clamp(18px, 4vw, 58px); margin-top: 7vh; align-items: flex-start; min-height: 270px; }
.lantern { width: clamp(110px, 15vw, 190px); height: clamp(160px, 22vw, 260px); border-radius: 50% 50% 46% 46%; border: 1px solid rgba(201,155,66,.62); color: var(--paper); background: radial-gradient(ellipse at 50% 25%, rgba(243,234,210,.24), rgba(201,155,66,.15) 38%, rgba(7,7,10,.55) 70%); font: 17px var(--serif-jp); cursor: pointer; animation: bob 5s infinite ease-in-out; transition: .35s; }
.lantern:nth-child(2){animation-delay:.7s}.lantern:nth-child(3){animation-delay:1.4s}.lantern:nth-child(4){animation-delay:2.1s}
.lantern.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 54px rgba(135,247,231,.22), inset 0 0 40px rgba(135,247,231,.08); transform: translateY(-18px); }
.archive-score { position: absolute; right: 9vw; bottom: 18vh; width: 34vw; height: 90px; }
.archive-score span { display: block; height: 1px; background: rgba(243,234,210,.2); margin: 18px 0; transform-origin: left; }
.archive-score span:after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--brass); margin-left: var(--note, 25%); transform: translateY(-6px); box-shadow: 0 0 16px var(--brass); }
.selected-tone { font: 12px var(--mono); color: var(--cyan); letter-spacing: .24em; text-transform: uppercase; }
.still-lantern { position: absolute; left: 9vw; bottom: 11vh; width: 80px; height: 120px; border: 1px solid rgba(243,234,210,.3); border-radius: 50%; opacity: .35; }

.last-note { place-items: center; text-align: center; min-height: 112vh; background: radial-gradient(circle at 50% 48%, rgba(201,155,66,.14), transparent 22rem); }
.final-line { max-width: 760px; }
.return-glyph { position: relative; width: min(72vw, 620px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(201,155,66,.34); border-radius: 50%; margin: 4vh 0; }
.return-glyph:before, .return-glyph:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(135,247,231,.28); inset: 12%; animation: ringOpen 4s infinite ease; }
.return-glyph:after { inset: 26%; animation-delay: 1s; border-color: rgba(227,66,52,.28); }
.return-glyph span { font: clamp(28px, 6vw, 82px) var(--serif-jp); letter-spacing: .14em; }
.final-wave { bottom: 10vh; opacity: .4; }
.ritual-button { position: relative; z-index: 2; color: var(--void); background: var(--paper); border: 1px solid var(--brass); padding: 16px 26px; text-decoration: none; font: 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; transition: .35s; }
.ritual-button:hover { background: var(--cyan); box-shadow: 0 0 36px rgba(135,247,231,.28); }

@keyframes smallPulse { 0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.8);opacity:.05} }
@keyframes strikeBell { 0%,100%{transform:translate(-50%,-50%)} 25%{transform:translate(-65%,-50%) scale(1.6)} 55%{transform:translate(-38%,-50%) scale(.8)} }
@keyframes seal { 0%{opacity:0;transform:rotate(-20deg) scale(.2)} 25%{opacity:1;transform:rotate(-8deg) scale(1)} 100%{opacity:0;transform:rotate(-2deg) scale(1.25)} }
@keyframes ringOpen { 0%{transform:scale(.2);opacity:0} 30%{opacity:.95} 100%{transform:scale(1);opacity:.35} }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes drift { 50% { transform: translateY(60px); } }
@keyframes forkHum { to { filter: drop-shadow(0 0 32px rgba(135,247,231,.52)); } }
@keyframes drawWave { to { stroke-dashoffset: 0; } }
@keyframes rainPulse { 0%{transform:scale(.2);opacity:0} 20%{opacity:1} 100%{transform:scale(4.8);opacity:0} }
@keyframes bob { 50% { transform: translateY(22px) rotate(1.5deg); } }

@media (max-width: 820px) {
  .ritual-nav { right: 8px; gap: 8px; }
  .shoji-field { margin-left: 0; overflow-x: auto; padding-top: 22vh; }
  .paper-panel { min-width: 210px; }
  .vertical-title { top: 7vh; left: 12vw; writing-mode: horizontal-tb; font-size: 44px; }
  .lantern-stream { overflow-x: auto; }
  .archive-score { position: relative; right: auto; bottom: auto; width: 82vw; }
  .cursor-fork { display: none; }
}