/* A full-screen illustrated chamber. All animation belongs to drawn SVG layers. */
.drawn-gate{display:block;background:#34414d;cursor:pointer;min-height:0;outline:0;isolation:isolate;transition:opacity .8s .6s ease,visibility 1.4s;filter:none}
.drawn-gate::before,.drawn-gate::after{content:none}
#portal-drawing{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.portal-scene{display:block;width:100%;height:100%;overflow:hidden}
.portal-world{transform-origin:800px 354px;transition:transform 1.4s cubic-bezier(.55,.01,.23,1),filter 1.4s ease}
.gate-wordmark{position:absolute;z-index:3;top:26px;left:32px;display:flex;align-items:center;gap:10px;color:#e0d7e9;text-shadow:0 2px 6px #171622;font-family:var(--display);font-size:20px;letter-spacing:.12em;pointer-events:none;opacity:.8;transition:opacity .3s}
.gate-wordmark svg{width:32px;height:32px}
.gate-touch-hint{position:absolute;z-index:3;bottom:30px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:22px;font-family:var(--mono);font-size:9px;letter-spacing:.19em;color:#f1dcf3;text-shadow:0 2px 6px #171622,0 0 15px #171622;pointer-events:none;animation:portalHint 4s ease-in-out infinite;transition:opacity .3s}
.gate-touch-hint::before{content:'';position:absolute;inset:-30px 0 -40px;background:linear-gradient(transparent,#1b202c99);z-index:-1}
.hint-star{font-size:14px;color:#dec0ee}
.drawn-gate:focus-visible{outline:0}.drawn-gate:focus-visible .gate-touch-hint{color:#fff;text-decoration:underline;text-underline-offset:7px}
.portal-vortex-core{transform-origin:800px 354px;animation:drawnVortex 38s linear infinite}
.drawn-rune-ring{transform-origin:800px 354px;animation:drawnVortex 150s linear infinite reverse}
.portal-breath{animation:portalGlow 5s ease-in-out infinite}
.portal-fire{transform-box:fill-box;transform-origin:50% 100%;animation:portalFire 2.4s ease-in-out infinite alternate}
.fire-right{animation-delay:-1.2s;animation-duration:3s}
.candle-flame{transform-box:fill-box;transform-origin:50% 100%;animation:candleFlame .45s ease-in-out infinite alternate;animation-delay:var(--flame-delay,0s)}
.portal-ghost{animation:ghostDrift 7s ease-in-out infinite;animation-delay:var(--ghost-delay,0s)}
.levitating-stone{animation:stoneDrift 6s ease-in-out infinite;animation-delay:var(--stone-delay,0s)}
.rising-smoke{transform-box:fill-box;transform-origin:50% 100%;animation:smokeRise 8s ease-in-out infinite}
.smoke-lilac{animation-delay:-3s;animation-duration:11s}
.back-smoke{transform-box:fill-box;transform-origin:center;animation:sideSmoke 11s ease-in-out infinite}
.smoke-sway-right{animation-delay:-5s;animation-duration:14s}
.foreground-smoke{transform-box:fill-box;transform-origin:50% 100%;animation:frontSmoke 9s ease-in-out infinite}
.ground-runes{animation:drawnVortex 180s linear infinite reverse}
.floor-aura{animation:portalGlow 4s ease-in-out infinite reverse}
.owl-body-layer{transform-origin:800px 760px;animation:owlBreathe 4.5s ease-in-out infinite}
.owl-wing{transform-box:fill-box;animation:wingCast 5s ease-in-out infinite}
.wing-left{transform-origin:100% 70%}.wing-right{transform-origin:0% 70%;animation-name:wingCastRight}
.owl-eyes{transform-box:fill-box;transform-origin:50% 45%;animation:owlBlink 7.8s ease-in-out infinite}
.hat-chain{transform-box:fill-box;transform-origin:50% 0%;animation:chainSwing 3s ease-in-out infinite}
.chain-center{animation-delay:-.7s;animation-duration:3.4s}.chain-right{animation-delay:-1.8s;animation-duration:3.1s}
.portal-mote{animation:portalMote 8s ease-in-out infinite;animation-delay:var(--mote-delay,0s);transform-box:fill-box;transform-origin:center}
.drawn-gate.leaving{opacity:0;filter:none;pointer-events:auto}
.drawn-gate.leaving .portal-world{transform:scale(3.8);filter:brightness(1.85) blur(3px)}
.drawn-gate.leaving .portal-flash{animation:crossingFlash 1.4s ease-in-out both}
.drawn-gate.leaving .gate-wordmark,.drawn-gate.leaving .gate-touch-hint{opacity:0;animation:none}
@keyframes drawnVortex{to{transform:rotate(360deg)}}
@keyframes portalGlow{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes portalFire{0%{transform:skewX(-2deg) scaleY(.96);filter:brightness(.95)}50%{transform:skewX(1deg) scaleY(1.015);filter:brightness(1.15)}100%{transform:skewX(2deg) scaleY(1.05);filter:brightness(1.02)}}
@keyframes candleFlame{0%{transform:skewX(-4deg) scale(.96,1.02)}100%{transform:skewX(5deg) scale(1.04,.91);filter:brightness(1.15)}}
@keyframes ghostDrift{0%,100%{transform:translate(0,0) rotate(-2deg);opacity:.82}50%{transform:translate(6px,-19px) rotate(2deg);opacity:1}}
@keyframes stoneDrift{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-17px) rotate(4deg)}}
@keyframes smokeRise{0%,100%{transform:skewX(-2deg) translateY(5px)}50%{transform:skewX(3deg) translateY(-12px)}}
@keyframes sideSmoke{0%,100%{transform:translateX(-8px) scaleY(.98)}50%{transform:translateX(10px) scaleY(1.04)}}
@keyframes frontSmoke{0%,100%{transform:skewX(-4deg) translateX(-3px)}50%{transform:skewX(3deg) translateX(9px)}}
@keyframes owlBreathe{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-5px) rotate(.5deg)}}
@keyframes wingCast{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes wingCastRight{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes owlBlink{0%,39%,42%,79%,82%,100%{transform:scaleY(1)}40.5%,80.5%{transform:scaleY(.06)}}
@keyframes chainSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes portalHint{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes portalMote{0%,100%{transform:translate(0,0);opacity:0}20%,75%{opacity:.65}90%{transform:translate(13px,-65px);opacity:0}}
@keyframes crossingFlash{0%,25%{opacity:0}65%{opacity:.6}100%{opacity:.9}}
@media(max-width:700px){.gate-wordmark{top:20px;left:20px;font-size:17px;gap:7px}.gate-wordmark svg{width:28px;height:28px}.gate-touch-hint{bottom:max(28px,env(safe-area-inset-bottom));font-size:7px;letter-spacing:.08em;gap:12px}.hint-star{font-size:11px}.gate-wordmark{text-shadow:0 2px 8px #171622}.gate-touch-hint>span:nth-child(2){font-size:0}.gate-touch-hint>span:nth-child(2)::after{content:'TAP ANYWHERE TO CROSS THE VEIL';font-size:7px}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .drawn-gate,body:not(.motion-enabled) .portal-world{transition:none}.drawn-gate .portal-vortex-core,.drawn-gate .drawn-rune-ring{animation-duration:120s!important}}

@media(max-width:700px){.mobile-candle-placement{transform:translateX(var(--mobile-shift,0px))}}