/* Continuous world. All artwork above the rim is the approved original. */
html,body{height:100%;overflow:hidden}
#world-window{position:relative;width:100%;height:100svh;overflow:hidden;background:#183955;touch-action:pan-x}
#world{position:relative;width:100%;height:var(--world-height);isolation:isolate;will-change:transform}
#journey{position:relative;height:100svh;min-height:0;z-index:3;overflow:visible}
#journey .viewport{min-height:0}
#journey.out-of-frame{visibility:hidden}
#journey.out-of-frame *{animation-play-state:paused!important}
.descent-painting{position:absolute;top:var(--mural-top);left:0;width:100%;height:var(--descent-height);overflow:hidden;z-index:-1}
.descent-painting>img,.descent-water{position:absolute;top:var(--crop-top);left:50%;width:var(--painting-width);height:var(--painting-height);max-width:none;transform:translateX(-50%);display:block}
.descent-painting>.demonic-painting{display:none;mask-image:linear-gradient(transparent 53%,#000 74%)}
.demonic-variant .descent-painting>.demonic-painting{display:block}
.descent-water{z-index:1;opacity:.8;mix-blend-mode:screen;pointer-events:none}
.fall-ribbons{animation:water-descend 1.1s linear infinite}
.depth-object{position:absolute;pointer-events:none;z-index:6;will-change:translate}
.depth-object>img{width:100%;display:block;user-select:none}
.forest-rim{top:100svh;left:-4%;width:108%;z-index:7;transform-origin:top center}
.abyss-root{top:calc(var(--abyss-stop) - 22svh);left:-13%;width:43%;z-index:5}
.abyss-root>img{animation:root-breathe 13s ease-in-out infinite alternate;transform-origin:top left}
.far-root{top:calc(var(--abyss-stop) + 17svh);right:-23%;width:37%;opacity:.55;scale:-1 1;z-index:2;filter:brightness(.8) saturate(.7)}
.cave-arch{top:var(--arch-top);left:-7%;width:114%;z-index:8}
.crystal-near{top:calc(var(--cave-stop) + 20svh);right:-8%;width:31%;z-index:6}
.crystal-far{top:calc(var(--cave-stop) + 29svh);left:-9%;width:23%;scale:-1 1;filter:brightness(.65) hue-rotate(12deg);z-index:2}
.crystal-near>img{animation:crystal-light 7s ease-in-out infinite alternate}
.demonic-variant .crystal-near,.demonic-variant .crystal-far,.demonic-variant .cave-arch{filter:hue-rotate(32deg) saturate(1.35) brightness(.85)}
.drift-mist{opacity:.15;z-index:4;filter:hue-rotate(145deg) saturate(.35);width:80%}
.drift-mist>img{animation:mist-drift 22s ease-in-out infinite alternate}
.mist-canyon{top:calc(var(--abyss-stop) + 64svh);left:-32%}
.mist-pool{top:calc(var(--cave-stop) + 64svh);right:-29%;scale:-1 1;filter:hue-rotate(290deg) saturate(.6);opacity:.12}
.shaft{position:absolute;top:calc(var(--mural-top) + 4svh);height:110svh;width:20%;left:24%;z-index:1;background:linear-gradient(174deg,#d4f8ff22,transparent 80%);clip-path:polygon(42% 0,64% 0,100% 100%,0 100%);transform:rotate(13deg);pointer-events:none;animation:light-breathe 11s ease-in-out infinite alternate}
.shaft-two{left:54%;width:8%;opacity:.5;animation-delay:-6s}
.depth-scene{height:100svh;position:absolute;left:0;width:100%;z-index:9;pointer-events:none}
.abyss-scene{top:var(--abyss-stop)}.cavern-scene{top:var(--cave-stop)}
.crystal-glow{position:absolute;width:35%;height:55%;top:22%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse,#eb377d29,transparent 65%);animation:light-breathe 6s ease-in-out infinite alternate}.glow-left{left:-11%}.glow-right{right:-10%;animation-duration:8s;animation-delay:-4s}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#c3ffe0;box-shadow:0 0 9px #a0ffcb;animation:mote-rise var(--time) ease-in-out infinite;animation-delay:var(--delay);opacity:0}
.ember-motes i{background:#ffbcaf;box-shadow:0 0 10px #f16ba2;width:2px;height:5px;animation-name:ember-rise}
.falling-leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none}.falling-leaves i{position:absolute;width:9px;height:4px;border-radius:1px 9px;background:#87b99b;opacity:.5;animation:leaf-fall var(--time) linear infinite;animation-delay:var(--delay)}
.pool-shimmer{position:absolute;bottom:2%;left:12%;width:76%;height:18%;pointer-events:none;opacity:.35;background:repeating-linear-gradient(176deg,transparent 0 12px,#eb99cc66 13px,transparent 15px 27px);mask-image:radial-gradient(ellipse,#000,transparent 70%);animation:pool-flow 7s linear infinite}
.demonic-variant .crystal-glow{background:radial-gradient(ellipse,#f3322138,transparent 65%)}.demonic-variant .ember-motes i{background:#ffc49d;box-shadow:0 0 10px #ff492b}.demonic-variant .pool-shimmer{filter:hue-rotate(32deg)}
@keyframes root-breathe{from{rotate:-.35deg}to{rotate:.55deg}}
@keyframes crystal-light{from{filter:brightness(.95)}to{filter:brightness(1.17)}}
@keyframes mist-drift{from{translate:-3% -2%}to{translate:7% 2%}}
@keyframes light-breathe{from{opacity:.35}to{opacity:.8}}
@keyframes water-descend{from{translate:0 0}to{translate:0 64px}}
@keyframes mote-rise{0%,100%{opacity:0;translate:0 25px}25%,65%{opacity:.65}90%{translate:24px -80px}}
@keyframes ember-rise{0%{opacity:0;translate:0 80px}25%,65%{opacity:.8}100%{opacity:0;translate:-28px -160px}}
@keyframes leaf-fall{from{translate:0 -80px;rotate:0deg}to{translate:90px 105svh;rotate:480deg}}
@keyframes pool-flow{from{background-position:0 0}to{background-position:80px 27px}}
@media(max-width:700px){
 .forest-rim{width:185%;left:-42%}.abyss-root{width:74%;left:-44%;top:calc(var(--abyss-stop) - 9svh)}.far-root{width:65%;right:-42%;top:calc(var(--abyss-stop) + 33svh)}
 .cave-arch{width:210%;left:-57%;top:calc(var(--arch-top) + 12svh)}.crystal-near{width:68%;right:-37%;top:calc(var(--cave-stop) + 31svh)}.crystal-far{width:48%;left:-28%;top:calc(var(--cave-stop) + 43svh)}
 .mist-canyon{width:120%;left:-70%}.mist-pool{width:120%;right:-65%}.shaft{left:8%;width:42%;opacity:.6}.shaft-two{left:54%;width:14%}
}
@media(prefers-reduced-motion:reduce){#world,.depth-object{will-change:auto}.motes,.falling-leaves,.descent-water{display:none}}
/* A camera owns vertical travel; browser focus must never scroll its container. */
html,body,#world-window{overflow:clip;overflow-anchor:none}
#journey .viewport{overflow:clip}
@media(max-width:700px){.abyss-root{left:-30%;width:80%}.far-root{right:-31%;width:69%}.cave-arch{top:calc(var(--arch-top) - 12svh)}.crystal-near{right:-20%;width:68%}.crystal-far{left:-23%;width:52%}}
body.mural-mode,body.mural-mode #world-window{height:auto;overflow:visible}
body.mural-mode #world{transform:none!important}
body.mural-mode #journey{visibility:visible}
body.mural-mode .corner-menu{display:none}
html:has(body.mural-mode){height:auto;overflow:visible}
body.mural-mode .forest-rim{top:94svh}
body.mural-mode #world{overflow:hidden}
/* The divider waits below the opening; the arrival hold protects the join. */
.forest-rim{top:var(--rim-top);width:114%;left:-7%}
.abyss-root{top:calc(100svh + 8svh);left:-3%;width:26%;z-index:5}
.abyss-root>img{transform-origin:top center;animation:pendant-sway 14s ease-in-out infinite alternate}
.far-root{top:calc(100svh + 19svh);right:-6%;width:22%;opacity:.65;z-index:2}
#atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}
.motes i{width:var(--mote-size,2px);height:var(--mote-size,2px);box-shadow:0 0 7px 1px #c6fff2b0}
.crystal-motes i{background:#f7dcff;box-shadow:0 0 9px 2px #e4afff9c;animation-name:crystal-drift}
.crystal-motes i:nth-child(7n){border-radius:0;rotate:45deg;box-shadow:0 0 11px 3px #e6bdff66}
.drift-mist{opacity:.23}.mist-pool{opacity:.22}
.atmosphere-label{color:#b8a7d1;font-size:12px}
@keyframes pendant-sway{from{rotate:-.4deg}to{rotate:.55deg}}
@keyframes crystal-drift{0%{opacity:0;translate:-12px 80px}25%,65%{opacity:.85}100%{opacity:0;translate:28px -130px}}
@media(max-width:700px){.forest-rim{width:205%;left:-52.5%}.abyss-root{width:52%;left:-13%;top:100svh}.far-root{width:46%;right:-21%;top:calc(100svh + 28svh)}}
body.mural-mode .forest-rim{top:calc(100svh - var(--rim-overlap));clip-path:none!important}
body.mural-mode #atmosphere{display:none}
@media(prefers-reduced-motion:reduce){#atmosphere{opacity:.5}}
/* Foreground art extends past the old rectangular viewport edge. */
#journey{z-index:auto}
#journey .viewport,#journey .art{overflow:visible}
#journey .art{isolation:auto}
.forest-rim{z-index:5;clip-path:none;height:var(--rim-height)}
.forest-rim>img{height:100%;object-fit:fill}
/* The ledge occludes the solid traveler platform on every screen size. */
#journey .foreground{clip-path:none;mask-image:none}
/* Side clouds overlap the ledge; distant haze stays behind the islands.
   The four lower puffs stay behind the traveler (style.css z-index 3), as on the
   approved title-card framing; the ledge then rises over them on the way down. */
#journey .cloud-middle{z-index:6}
#journey .curtain{z-index:7}
/* The old cloud canvases were designed for a clipped, stationary header.
   Feather only their lower edge while they leave sideways during descent. */
#journey .mist,#journey .cloud-middle,#journey .curtain{mask-image:linear-gradient(#000 86%,transparent 100%)}
/* Volumetric wisps carry the atmosphere; keep the painted cloud accents subtle. */
.drift-mist{opacity:.09}.mist-pool{opacity:.12}
/* The roots begin behind the ledge, so moving clouds cannot expose a canvas edge. */
.abyss-root,.far-root{z-index:1;mask-image:linear-gradient(transparent,#000 13%)}
.abyss-root{top:94svh}.far-root{top:110svh}
@media(max-width:700px){.abyss-root{top:88svh}.far-root{top:110svh}}