/* 映像の世界 */
#world{position:fixed;inset:0;z-index:1;background:#050505;overflow:hidden}
#stills .st,#videos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;will-change:opacity,transform}
#stills .st{background-size:cover;background-position:50% 50%}
#stills .st.on,#videos video.on{opacity:1}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%),
  linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 46%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%)}
#spacer{position:relative;z-index:0}

/* 駅の言葉 */
#hud{position:fixed;left:clamp(16px,6vw,96px);bottom:clamp(88px,14vh,150px);z-index:20;max-width:min(560px,calc(100vw - 32px));pointer-events:none}
.cap{position:absolute;left:0;bottom:0;width:min(560px,calc(100vw - 32px));opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);visibility:hidden}
.cap.on{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.cap>*{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.cap.on>*{opacity:1;transform:none}
.cap.on>:nth-child(1){transition-delay:.15s}.cap.on>:nth-child(2){transition-delay:.3s}.cap.on>:nth-child(3){transition-delay:.55s}.cap.on>:nth-child(4){transition-delay:.75s}
body.intro #hud .cap,body.intro #hint,body.intro #rail,body.intro .topbar{opacity:0!important}
/* 冒頭: 闇に行灯の位置から光の穴が広がり、門が見えてから題字 */
@property --ir{syntax:'<length-percentage>';inherits:false;initial-value:0%}
#intro{position:fixed;inset:0;z-index:70;pointer-events:none;background:#000;--ir:0%;
  -webkit-mask-image:radial-gradient(circle at var(--ix,35%) var(--iy,37%),transparent calc(var(--ir) - 6%),#000 var(--ir));
  mask-image:radial-gradient(circle at var(--ix,35%) var(--iy,37%),transparent calc(var(--ir) - 6%),#000 var(--ir));
  transition:--ir 1.9s cubic-bezier(.55,.05,.35,1),opacity .6s ease 1.7s}
#intro.open{--ir:160%;opacity:0}
#intro.gone{display:none}
.topbar,#rail,#hint{transition:opacity .9s ease}
.cap h1,.cap h2{font-weight:300;font-size:clamp(40px,6.2vw,84px);line-height:1.02;letter-spacing:-.01em;margin:18px 0 18px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
html[data-lang="ja"] .cap h1,html[data-lang="ja"] .cap h2{font-weight:400;font-size:clamp(32px,4.6vw,60px);line-height:1.32;letter-spacing:.04em}
.cap .sub{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:rgba(236,229,214,.86);max-width:30em;text-shadow:0 1px 16px rgba(0,0,0,.7)}
html[data-lang="ja"] .cap .sub{font-size:clamp(15px,1.25vw,17px);line-height:1.9;letter-spacing:.04em}
.cap .skip{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.cap .skip:hover{color:var(--paper)}
.rooms{list-style:none;margin-top:26px;border-top:1px solid var(--line);max-width:420px}
.rooms li{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:18px;color:rgba(236,229,214,.72)}
html[data-lang="ja"] .rooms li{font-size:15px;letter-spacing:.06em}
.rooms li em{font-style:normal;font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.rooms li.open{color:var(--paper)}
.rooms li.open em{color:var(--ember)}

/* 右のレール */
#rail{position:fixed;right:clamp(10px,2.2vw,30px);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:6px}
#rail button{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;min-width:44px;color:rgba(236,229,214,.4);transition:color .4s}
#rail b{font-family:var(--jserif);font-weight:400;font-size:15px;width:24px;text-align:center}
#rail span{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:.4s}
#rail button:hover span,#rail button.on span{opacity:1;transform:none}
#rail button.on{color:var(--paper)}
#rail button.on b{color:var(--gold)}
@media (max-width:600px){#rail span{display:none}#rail{right:4px;gap:0}#rail b{font-size:13px}}

/* 下のヒント */
#hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:20;font-family:var(--sans);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .6s}
#hint i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
body.moved #hint{opacity:0}
#loading{position:fixed;left:16px;bottom:8px;z-index:20;opacity:.5;font-size:10px}

/* 展示(駅6) */
#exhibit{position:fixed;inset:0;z-index:25;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s;padding:80px 16px 40px}
#exhibit.on{opacity:1;visibility:visible;transition:opacity .9s ease}
#exhibit .stage{position:absolute;left:50%;transform:translateX(-50%);top:18vh;width:min(1180px,calc(100% - 200px));display:flex;align-items:center;justify-content:center}
#exhibit .pieces{position:relative;width:min(1040px,92vw,112vh);aspect-ratio:2/1}
/* 光が先、刃が後: 光柱が強まり、刃が下から闇を抜けて現れ、最後に一筋の光が刃を走る */
@property --rv{syntax:'<percentage>';inherits:false;initial-value:0%}
#exhibit .beam{position:absolute;left:50%;bottom:30%;width:min(820px,84vw);height:120vh;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 46% 100% at 50% 0%,rgba(255,214,160,.16),rgba(255,214,160,.05) 50%,transparent 80%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:0;transition:opacity 1.1s ease}
#exhibit.lit .beam{opacity:1}
#exhibit .piece{position:absolute;inset:0;opacity:0;visibility:hidden;margin:0}
#exhibit .piece.on{opacity:1;visibility:visible}
#exhibit .piece img{width:100%;height:100%;object-fit:cover;--rv:0%;mix-blend-mode:lighten;
  -webkit-mask-image:linear-gradient(to top,#000 calc(var(--rv) - 22%),transparent var(--rv)),radial-gradient(ellipse 60% 64% at 50% 50%,#000 62%,transparent 100%);
  mask-image:linear-gradient(to top,#000 calc(var(--rv) - 22%),transparent var(--rv)),radial-gradient(ellipse 60% 64% at 50% 50%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  filter:blur(5px) brightness(.55);transition:none}
#exhibit .piece.shown img{--rv:124%;filter:blur(0) brightness(1.04) contrast(1.06);transition:--rv 1.6s cubic-bezier(.3,.6,.2,1),filter 1.6s ease}
#exhibit .piece[data-id="dragon"].shown img{filter:blur(0) brightness(.9) contrast(1.2)}
#exhibit .piece[data-id="dragon"] img{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--rv) - 22%),transparent var(--rv)),radial-gradient(ellipse 58% 36% at 50% 53%,#000 55%,transparent 100%);mask-image:linear-gradient(to top,#000 calc(var(--rv) - 22%),transparent var(--rv)),radial-gradient(ellipse 58% 36% at 50% 53%,#000 55%,transparent 100%)}
#exhibit .piece[data-id="aurora"].shown img{filter:blur(0) brightness(.95) contrast(1.15)}
#exhibit .sweep{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,246,228,.6) 50%,transparent 58%) 0 0/300% 100% no-repeat;background-position:120% 0;
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;mask-mode:luminance}
#exhibit .piece.shown .sweep{animation:sweep 1.7s 1.5s ease-out 1 both}
@keyframes sweep{0%{opacity:0;background-position:120% 0}18%{opacity:1}80%{opacity:1}100%{opacity:0;background-position:-20% 0}}
#exhibit .info>*{opacity:0;transform:translateY(10px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
#exhibit.shown .info>*{opacity:1;transform:none}
#exhibit.shown .info>:nth-child(1){transition-delay:.9s}#exhibit.shown .info>:nth-child(2){transition-delay:1.05s}#exhibit.shown .info>:nth-child(3){transition-delay:1.2s}
#exhibit.shown .info>:nth-child(4){transition-delay:1.35s}#exhibit.shown .info>:nth-child(5){transition-delay:1.6s}#exhibit.shown .info>:nth-child(6){transition-delay:1.75s}
#exhibit.switching .piece.on,#exhibit.switching .info>*{opacity:0!important;transition:opacity .35s ease!important;transition-delay:0s!important}
#exhibit .nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;z-index:2;background:rgba(5,5,6,.3);transition:border-color .3s}
#exhibit .nav:hover{border-color:var(--gold)}
#exhibit .nav span{width:10px;height:10px;border-top:1px solid var(--paper);border-left:1px solid var(--paper)}
#exhibit .prev{left:0}#exhibit .prev span{transform:translateX(2px) rotate(-45deg)}
#exhibit .next{right:0}#exhibit .next span{transform:translateX(-2px) rotate(135deg)}
#exhibit .info{position:absolute;left:50%;transform:translateX(-50%);top:60vh;width:min(720px,calc(100% - 32px));text-align:center;display:flex;flex-direction:column;align-items:center}
#exhibit .name{font-weight:300;font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:.02em;margin:12px 0 12px}
#exhibit .maker{font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
html[data-lang="ja"] #exhibit .maker{text-transform:none;letter-spacing:.12em;font-size:13px}
#exhibit .line{font-size:clamp(19px,1.7vw,24px);font-style:italic;margin:16px 0 28px;color:rgba(236,229,214,.9)}
html[data-lang="ja"] #exhibit .line{font-style:normal;font-size:clamp(16px,1.3vw,19px);letter-spacing:.1em}
#exhibit .dots{display:flex;align-items:center;gap:4px;margin-top:22px}
#exhibit .dots .step{width:44px;height:44px;display:grid;place-items:center;font-family:var(--sans);font-size:14px;color:var(--mute)}
#exhibit .dots .step::after{display:none}
#exhibit .dots .step:hover{color:var(--paper)}
#exhibit .dots button{width:44px;height:44px;display:grid;place-items:center}
#exhibit .dots button::after{content:"";width:22px;height:1px;background:rgba(236,229,214,.3);transition:background .3s,width .3s}
#exhibit .dots button[aria-selected="true"]::after{background:var(--gold);width:34px}
@media (max-width:700px){
  #exhibit .stage{width:100%}
  #exhibit .pieces{width:100vw}
  #exhibit .stage .nav{display:none}
  #exhibit .line{margin:10px 0 20px}
  #exhibit .dots{margin-top:10px}
}
@media (max-height:640px) and (min-width:701px){#exhibit .pieces{width:min(780px,80vw)}#exhibit .line{margin:10px 0 16px}}
body.at-exhibit #hud{opacity:0}
body.at-exhibit #rail{opacity:.45}
body.at-exhibit #rail span{display:none}
#rail{transition:opacity .6s}
.noscript-list{position:relative;z-index:5;list-style:none;padding:120px 24px;font-size:24px;line-height:2.2}

@media (prefers-reduced-motion:reduce){
  .cap,#exhibit .piece,#stills .st{transition:opacity .2s linear!important;transform:none!important}
  #exhibit .piece img{--rv:124%!important;filter:none!important;transition:none!important}
  #exhibit .sweep{display:none}#exhibit .info>*{opacity:1;transform:none;transition:none}
  #intro{display:none}.cap>*{transition:none!important}
  #hint i{animation:none}
}

@media (max-width:700px){
  .vignette{background:radial-gradient(ellipse 140% 90% at 50% 40%,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%),
    linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.25) 52%,rgba(0,0,0,0) 66%)}
  #hud{bottom:96px}
}

/* 生成の部屋の札と運営者の一行(10/9 Fable 9.5 の道筋 4) */
#hud .imp{margin-top:14px;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,236,226,.62)}
html[data-lang="ja"] #hud .imp{letter-spacing:.06em;text-transform:none}
#hud .house{margin-top:18px;font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:rgba(242,236,226,.66)}
html[data-lang="ja"] #hud .house{letter-spacing:.04em}
#hud .house a{display:inline-flex;min-height:44px;align-items:center;border-bottom:1px solid rgba(242,236,226,.3);pointer-events:auto}
#exhibit .hist{margin:-6px 0 18px;font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:rgba(201,165,108,.85)}
html[data-lang="ja"] #exhibit .hist{letter-spacing:.04em}
#exhibit .piece[data-id="dragon"].shown img{filter:blur(0) brightness(1.02) contrast(1.06)}
/* 火の部屋: 実写の炉を重ねる(10/9 Fable 9.5 の道筋) */
#real{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
#real.on{opacity:1}
#real img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:brightness(.7) saturate(.92)}

/* The navigation remains readable in every room. */
#rail button{color:#b9b0a0}body.at-exhibit #rail{opacity:1}
#loading{font:12px/1.5 var(--sans);opacity:1;color:var(--mute)}
.sr:focus{width:auto;height:auto;clip:auto;white-space:normal;padding:12px;background:var(--paper);color:var(--ink);z-index:100;left:12px;top:12px}