:root {
  /* Design compliance tokens: Interactions ceremonial sensory—opening buds */
  --ink-night: #090B16;
  --jasmine-milk: #F6EEDC;
  --leaf-lacquer: #12352B;
  --brass-pollen: #C99A45;
  --plum-smoke: #3B2034;
  --condensation-blue: #9BB8C8;
  --blush-petal: #E9B7B0;
  --serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --poem: "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
  --gothic: "Zen Kaku Gothic New", Inter, system-ui, sans-serif;
  --accent: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--ink-night); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  color: var(--jasmine-milk);
  font-family: var(--poem);
  background:
    radial-gradient(circle at 83% 18%, rgba(201,154,69,.16), transparent 17rem),
    radial-gradient(circle at 12% 84%, rgba(59,32,52,.62), transparent 25rem),
    linear-gradient(130deg, var(--ink-night), #070912 62%, #0d0a16);
}

.paper-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .18;
  background-image:
    repeating-linear-gradient(95deg, rgba(246,238,220,.06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(4deg, rgba(246,238,220,.035) 0 1px, transparent 1px 11px);
  mix-blend-mode: screen;
}

.pollen-field { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.mote, .falling-petal {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--brass-pollen); opacity: .55; transform: translate3d(0,0,0);
  box-shadow: 0 0 10px rgba(201,154,69,.75);
}
.falling-petal { width: 12px; height: 8px; border-radius: 70% 30% 70% 30%; background: var(--jasmine-milk); opacity: .68; box-shadow: 0 0 13px rgba(246,238,220,.3); }

#scentRoute { height: 100vh; transition: transform 1s cubic-bezier(.7,0,.18,1); will-change: transform; }
.scene {
  position: relative; height: 100vh; width: 100vw; overflow: hidden; padding: clamp(28px, 6vw, 86px);
  isolation: isolate;
}
.scene::before {
  content: ""; position: absolute; inset: 4vmin; z-index: -1; opacity: .2;
  background-image:
    linear-gradient(30deg, transparent 47%, rgba(246,238,220,.22) 49%, transparent 51%),
    linear-gradient(150deg, transparent 47%, rgba(246,238,220,.16) 49%, transparent 51%);
  background-size: 86px 50px; mask-image: radial-gradient(ellipse at 55% 48%, #000 20%, transparent 68%);
}

.bud-nav { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 18px; }
.nav-bud { all: unset; display: flex; align-items: center; justify-content: flex-end; gap: 10px; cursor: pointer; font-family: var(--gothic); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,238,220,.45); }
.nav-bud span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s, color .5s; }
.nav-bud:hover span, .nav-bud.active span { max-width: 190px; color: var(--jasmine-milk); }
.nav-bud i { width: 12px; height: 20px; border: 1px solid rgba(246,238,220,.35); border-radius: 60% 60% 48% 48%; background: var(--leaf-lacquer); position: relative; transition: .6s; }
.nav-bud.active i { border-radius: 50%; width: 22px; height: 22px; border-color: var(--brass-pollen); background: radial-gradient(circle, var(--blush-petal) 0 15%, var(--jasmine-milk) 17% 62%, transparent 64%); box-shadow: 0 0 28px rgba(246,238,220,.35); }

.vine-path { position: fixed; inset: 0; z-index: 6; width: 100vw; height: 100vh; pointer-events: none; opacity: .9; }
#vineDraw { fill: none; stroke: var(--leaf-lacquer); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: 760; filter: drop-shadow(0 0 5px rgba(18,53,43,.9)); transition: stroke-dashoffset 1.1s cubic-bezier(.55,0,.2,1); }

.noren { position: fixed; inset: 0; z-index: 26; pointer-events: none; display: flex; transform: translateY(-104%); transition: transform 1s cubic-bezier(.8,0,.2,1); }
.noren.show { transform: translateY(0); }
.noren span { flex: 1; background: linear-gradient(#160f1c, var(--plum-smoke)); border-right: 1px solid rgba(246,238,220,.12); clip-path: polygon(0 0,100% 0,100% 86%,72% 100%,48% 89%,24% 100%,0 86%); }

.eyebrow { font-family: var(--gothic); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-pollen); }
h1, h2 { margin: 0; font-family: var(--serif-jp); font-weight: 400; line-height: .92; letter-spacing: .02em; }
h1 { font-size: clamp(58px, 11vw, 178px); opacity: 0; filter: blur(9px); clip-path: inset(0 100% 0 0); transition: opacity 1.4s, filter 1.4s, clip-path 1.7s; }
h2 { font-size: clamp(42px, 7vw, 116px); max-width: 9ch; }
p { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.8; color: rgba(246,238,220,.78); }

.threshold { display: grid; grid-template-columns: 1fr minmax(320px, 58vw); align-items: end; background: radial-gradient(circle at 16% 72%, rgba(233,183,176,.08), transparent 16rem); }
.threshold.awake h1 { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); }
.threshold.awake .lantern-core { opacity: 1; transform: scale(1); }
.threshold.awake .jasmine-bud span { transform: rotate(calc(var(--r) * 1deg)) translateY(-17px); border-radius: 80% 20% 80% 20%; }
.ink-title { z-index: 9; padding-bottom: 7vh; }
.ink-title p { width: min(620px, 75vw); }
.vertical-poem { position: absolute; left: clamp(24px, 8vw, 120px); top: 12vh; writing-mode: vertical-rl; font-family: var(--serif-jp); font-size: clamp(21px, 2.6vw, 42px); letter-spacing: .35em; color: rgba(246,238,220,.7); }
.bud-opener { position: absolute; left: 11vw; bottom: 10vh; z-index: 12; display: grid; place-items: center; gap: 18px; font-family: var(--gothic); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(246,238,220,.58); cursor: pointer; }
.jasmine-bud { width: 76px; height: 76px; position: relative; display: grid; place-items: center; filter: drop-shadow(0 0 24px rgba(246,238,220,.28)); }
.jasmine-bud span { position: absolute; width: 22px; height: 42px; transform-origin: 50% 38px; background: var(--jasmine-milk); border-radius: 80% 80% 45% 45%; transition: transform 1.15s cubic-bezier(.2,.8,.2,1), border-radius 1s; }
.jasmine-bud span:nth-child(1){ --r: 0; transform: rotate(0deg) translateY(-4px); }.jasmine-bud span:nth-child(2){ --r: 72; transform: rotate(72deg) translateY(-4px); }.jasmine-bud span:nth-child(3){ --r: 144; transform: rotate(144deg) translateY(-4px); }.jasmine-bud span:nth-child(4){ --r: 216; transform: rotate(216deg) translateY(-4px); }.jasmine-bud span:nth-child(5){ --r: 288; transform: rotate(288deg) translateY(-4px); }
.moon-window { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(246,238,220,.96), rgba(246,238,220,.55) 38%, rgba(155,184,200,.12) 65%, transparent 68%); box-shadow: inset 0 0 40px rgba(9,11,22,.15), 0 0 90px rgba(201,154,69,.2); }
.threshold-moon { right: 9vw; top: 9vh; width: min(38vw, 520px); aspect-ratio: 1; opacity: .36; }
.lantern-core { position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle, var(--brass-pollen), rgba(201,154,69,.3) 45%, transparent 68%); opacity: .05; transform: scale(.5); transition: 1.5s; }
.ritual-link { border: 1px solid rgba(201,154,69,.6); background: rgba(18,53,43,.45); color: var(--jasmine-milk); padding: 14px 22px; border-radius: 999px; font-family: var(--gothic); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .4s, transform .4s; }
.ritual-link:hover { background: rgba(201,154,69,.16); transform: translateY(-2px); }
.leaf-shadow { position: absolute; width: 38vw; height: 52vh; background: var(--leaf-lacquer); opacity: .28; filter: blur(2px); clip-path: ellipse(18% 42% at 50% 50%); transform: rotate(-34deg); }
.leaf-a { right: -8vw; bottom: -12vh; }

.shoji-panel { background: linear-gradient(135deg, rgba(246,238,220,.16), rgba(246,238,220,.055)); border: 1px solid rgba(246,238,220,.2); box-shadow: 0 30px 90px rgba(0,0,0,.25); backdrop-filter: blur(13px); }
.pressed-menu { background: radial-gradient(circle at 82% 28%, rgba(155,184,200,.13), transparent 18rem), radial-gradient(circle at 24% 75%, rgba(18,53,43,.55), transparent 25rem); }
.menu-slip { position: absolute; left: 8vw; top: 12vh; width: min(430px, 82vw); padding: clamp(24px,4vw,48px); clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%); }
.archive-scatter { position: absolute; right: 7vw; bottom: 10vh; width: min(680px, 72vw); height: 58vh; }
.specimen { position: absolute; width: 265px; min-height: 330px; padding: 22px; color: var(--ink-night); background: var(--jasmine-milk); box-shadow: 0 28px 50px rgba(0,0,0,.36); transform: rotate(var(--tilt)); transition: transform .7s, box-shadow .7s; cursor: pointer; }
.specimen:nth-child(1){ --tilt:-7deg; left:0; top:7%; }.specimen:nth-child(2){ --tilt:5deg; left:34%; top:21%; }.specimen:nth-child(3){ --tilt:-2deg; right:0; top:0; }
.specimen.open { transform: rotate(0) translateY(-24px) scale(1.04); box-shadow: 0 38px 80px rgba(0,0,0,.5); }
.specimen b { font-family: var(--gothic); color: var(--brass-pollen); }.specimen h3 { font-family: var(--serif-jp); font-size: 30px; margin: 38px 0 12px; color: var(--plum-smoke); }.specimen p { font-family: var(--gothic); font-size: 12px; color: rgba(9,11,22,.72); }
.pressed-flower, .pressed-leaf, .pressed-bud { position: absolute; right: 24px; bottom: 28px; width: 100px; height: 100px; opacity: .75; }
.pressed-flower { background: radial-gradient(circle, var(--blush-petal) 0 8%, transparent 9%), radial-gradient(ellipse at 50% 15%, var(--leaf-lacquer) 0 14%, transparent 15%), radial-gradient(ellipse at 85% 50%, var(--leaf-lacquer) 0 14%, transparent 15%), radial-gradient(ellipse at 50% 85%, var(--leaf-lacquer) 0 14%, transparent 15%), radial-gradient(ellipse at 15% 50%, var(--leaf-lacquer) 0 14%, transparent 15%); }
.pressed-leaf { background: var(--leaf-lacquer); clip-path: ellipse(24% 48% at 50% 50%); transform: rotate(35deg); }.pressed-bud { border: 2px solid var(--leaf-lacquer); border-radius: 70% 70% 45% 45%; width: 42px; right: 52px; }
.glimpse { right: 11vw; top: 10vh; width: 120px; height: 120px; display: grid; place-items: center; color: var(--ink-night); font-family: var(--gothic); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.moon-ice { background: radial-gradient(circle at 68% 28%, rgba(155,184,200,.18), transparent 21rem), linear-gradient(180deg, transparent 63%, rgba(18,53,43,.7) 64%); }
.counter-plane { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; background: linear-gradient(90deg, rgba(18,53,43,.75), rgba(59,32,52,.72)); border-top: 1px solid rgba(201,154,69,.25); box-shadow: 0 -20px 80px rgba(0,0,0,.35); }
.glass-coupe { position: absolute; left: 12vw; bottom: 20vh; width: 270px; height: 350px; }
.bowl { position: absolute; top: 0; width: 270px; height: 138px; border: 2px solid rgba(155,184,200,.7); border-top-width: 5px; border-radius: 16px 16px 120px 120px; background: linear-gradient(180deg, rgba(155,184,200,.18), rgba(246,238,220,.04)); overflow: hidden; }
.stem { position: absolute; left: 131px; top: 136px; width: 8px; height: 150px; background: rgba(155,184,200,.55); }.foot { position: absolute; left: 70px; bottom: 42px; width: 130px; height: 12px; border-radius: 50%; background: rgba(155,184,200,.48); }
.condensation { position: absolute; width: 7px; height: 11px; border-radius: 50%; background: var(--condensation-blue); box-shadow: 0 0 8px rgba(155,184,200,.8); animation: bead 5s infinite ease-in; }.c1{left:34%; top:18%;}.c2{left:60%; top:28%; animation-delay:1.4s}.c3{left:76%; top:15%; animation-delay:2.2s}
@keyframes bead { 0% { transform: translateY(0); opacity: .1;} 20%{opacity:.8} 100%{transform: translateY(82px); opacity:0;} }
.ice-spear { position: absolute; left: 35vw; bottom: 22vh; display: flex; gap: 14px; transform: rotate(-9deg); }.ice-spear i { width: 34px; height: 230px; background: linear-gradient(135deg, rgba(246,238,220,.22), rgba(155,184,200,.58), rgba(9,11,22,.12)); clip-path: polygon(50% 0, 100% 18%, 77% 100%, 19% 100%, 0 18%); border: 1px solid rgba(155,184,200,.55); }
.tokonoma-copy { position: absolute; right: 10vw; top: 18vh; width: min(520px, 70vw); }.accent-word { position: absolute; right: 4vw; bottom: 8vh; font-family: var(--accent); font-size: clamp(58px, 12vw, 210px); color: rgba(246,238,220,.06); font-style: italic; }

.steam-room { background: radial-gradient(circle at 52% 42%, rgba(246,238,220,.08), transparent 20rem), radial-gradient(circle at 17% 82%, rgba(233,183,176,.08), transparent 17rem); }
.steam-lines { position: absolute; inset: 0; opacity: .7; }.steam-lines path { fill: none; stroke: var(--condensation-blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; filter: blur(.2px); animation: steam 8s infinite ease-in-out; }.steam-lines path:nth-child(2){animation-delay:1.7s}.steam-lines path:nth-child(3){animation-delay:3.1s}
@keyframes steam { 0%{stroke-dashoffset:700; opacity:0} 35%{opacity:.75} 100%{stroke-dashoffset:0; opacity:0} }
.noren-frame { position: absolute; left: 9vw; top: 0; width: 28vw; height: 72vh; display: flex; filter: drop-shadow(0 30px 40px rgba(0,0,0,.3)); }.noren-frame span { flex: 1; background: linear-gradient(rgba(59,32,52,.9), rgba(59,32,52,.45)); margin-right: 4px; clip-path: polygon(0 0,100% 0,100% 88%,65% 100%,50% 90%,35% 100%,0 88%); }
.steam-card { position: absolute; right: 13vw; bottom: 13vh; width: min(510px, 76vw); padding: clamp(26px, 4vw, 54px); }.steam-room.clear .steam-card { backdrop-filter: blur(1px); background: rgba(246,238,220,.1); }

.courtyard { background: radial-gradient(circle at 74% 22%, rgba(246,238,220,.16), transparent 20rem), linear-gradient(180deg, var(--ink-night), #05070d); }
.courtyard-moon { right: 12vw; top: 9vh; width: min(32vw, 390px); aspect-ratio: 1; opacity: .5; }
.water-bowl { position: absolute; left: 10vw; bottom: 11vh; width: min(520px, 72vw); height: 190px; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, rgba(155,184,200,.18), rgba(9,11,22,.9) 62%); border: 1px solid rgba(155,184,200,.35); box-shadow: inset 0 0 60px rgba(0,0,0,.8), 0 20px 80px rgba(0,0,0,.5); overflow: hidden; }
.reflection { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%) scaleY(-1) skewX(-8deg); font-family: var(--serif-jp); font-size: clamp(30px, 7vw, 76px); color: rgba(246,238,220,.22); filter: blur(1px); animation: ripple 5s infinite ease-in-out; }.water-bowl i { position: absolute; width: 50px; height: 24px; border: 1px solid rgba(246,238,220,.12); border-radius: 50%; animation: rings 4s infinite; }.water-bowl i:nth-child(2){left:34%;top:38%}.water-bowl i:nth-child(3){left:57%;top:55%;animation-delay:1.3s}.water-bowl i:nth-child(4){left:46%;top:28%;animation-delay:2.2s}
@keyframes ripple { 50% { transform: translate(-50%,-50%) scaleY(-.9) skewX(6deg); opacity: .7; } }
@keyframes rings { 0%{transform:scale(.2);opacity:.5}100%{transform:scale(3.4);opacity:0} }
.last-copy { right: 9vw; top: 22vh; }

@media (max-width: 760px) {
  body { overflow: auto; }
  #scentRoute { height: auto; transform: none !important; }
  .scene { min-height: 100vh; height: auto; padding: 28px; }
  .bud-nav, .vine-path { display: none; }
  .threshold { display: block; }
  .bud-opener { left: 28px; bottom: 24px; }
  .ink-title { padding-top: 42vh; }
  .archive-scatter { position: relative; right: auto; bottom: auto; width: 100%; height: auto; margin-top: 42vh; display: grid; gap: 20px; }
  .specimen { position: relative; left: auto !important; right: auto !important; top: auto !important; width: 100%; transform: none; }
  .glass-coupe, .ice-spear, .tokonoma-copy, .steam-card, .water-bowl, .last-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 12vh 0 0; }
  .noren-frame { opacity: .35; width: 70vw; }
}