/* A living entrance and a cinematic path into the actual museum. */
.gate .gate-image { animation:gate-scenery-flow 24s ease-in-out infinite alternate!important; will-change:transform; }
@keyframes gate-scenery-flow { from { transform:translate3d(-.8%,.3%,0) scale(1.06); } to { transform:translate3d(.8%,-.8%,0) scale(1.10); } }
.gate .mist-a { opacity:.27; animation:gate-fog-flow 18s ease-in-out infinite alternate!important; }
.gate .mist-b { opacity:.18; animation:gate-fog-flow 23s ease-in-out -11s infinite alternate-reverse!important; }
@keyframes gate-fog-flow { from { translate:-6% 1%; } to { translate:9% -3%; } }
.gate-world::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 83% 53%,#ffc37421,transparent 23%),radial-gradient(ellipse at 24% 82%,#f7cb5b19,transparent 20%); mix-blend-mode:screen; animation:gate-lantern-breath 5s ease-in-out infinite alternate; }
@keyframes gate-lantern-breath { from { opacity:.25; } to { opacity:.85; } }
#enter.light-entry { position:relative; isolation:isolate; width:270px; height:178px; padding:27px 40px; gap:10px; color:#fff2ce; background:radial-gradient(ellipse at center,#173c34d9 0%,#12392d99 35%,transparent 66%); transition:filter .3s,transform .3s; }
#enter.light-entry::before { inset:0; border:0; border-radius:0; box-shadow:none; transform:none; background:url('assets/entry-ornament-v26.png') center/contain no-repeat; transition:filter .3s; }
#enter.light-entry::after { left:auto; right:39px; top:41px; width:4px; height:4px; }
#enter.light-entry span { position:relative; z-index:1; font-size:31px; letter-spacing:.14em; }
#enter.light-entry small { position:relative; z-index:1; font-size:11px; color:#e4c996; }
#enter.light-entry:hover { transform:translateY(-3px); filter:drop-shadow(0 0 13px #f6cc6b55); }
#enter.light-entry:hover::before { transform:none; filter:brightness(1.14); }
.gate-cinema { position:fixed; inset:0; z-index:85; isolation:isolate; background:linear-gradient(#102a2530,#0d222520),url('assets/theatre-courtyard-v18.png') center/cover; }
.gate-cinema .journey-stage { position:absolute; inset:0; }
#gate-cinema #mechanism-stage { position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:1; }
#gate-cinema #mechanism-stage canvas { pointer-events:none; }
.journey-title { position:absolute; left:50%; bottom:6%; transform:translateX(-50%); display:grid; justify-items:center; gap:13px; color:#ffe8b9; font:27px/1.4 var(--display); letter-spacing:.16em; text-shadow:0 2px 8px #112421; pointer-events:none; z-index:3; }
.journey-title i { width:110px; height:1px; background:linear-gradient(90deg,transparent,#e5c78c,transparent); }
.journey-actions { position:absolute; right:24px; top:23px; z-index:4; display:flex; gap:9px; }
.journey-actions button { min-height:44px; padding:9px 17px; color:#efdbb2; background:#16352bd9; border:1px solid #ba995f88; border-radius:24px; font:12px var(--serif); }
.journey-loading { position:absolute; left:50%; top:43%; transform:translateX(-50%); padding:18px 28px; color:#efd5a0; background:#13302bd9; border:1px solid #b1956255; font:18px var(--display); z-index:3; }
body[data-journey] .masthead { opacity:0; pointer-events:none; }
body[data-journey=running] .journey-loading { display:none; }
.theatre.arriving { animation:none!important; }
@media(max-width:600px) {
 #enter.light-entry { width:235px; height:155px; padding:25px 35px; }
 #enter.light-entry span { font-size:28px; }
 .gate .gate-entry { margin-top:12px; }
 .journey-actions { top:17px; right:16px; gap:7px; }
 .journey-actions button { padding:8px 13px; font-size:11px; }
 .journey-title { font-size:24px; bottom:6%; }
}
@media(prefers-reduced-motion:reduce) {
 .gate .gate-image,.gate .mist,.gate-world::after { animation:none!important; transform:none!important; translate:none!important; }
 #enter.light-entry:hover { transform:none; }
}