/* World: immersive fixed background scenery. Decorative only. */
html{background:#03060d}
body{background:#03060d;overflow-x:hidden}
.world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;
 background:radial-gradient(ellipse 70% 50% at 78% 38%,rgba(30,144,255,.34),transparent 70%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(30,144,255,.28),transparent 70%),linear-gradient(180deg,#02040a 0%,#06122b 38%,#0b2a5c 72%,#0a1f44 100%)}
.world *{pointer-events:none}
body .decor-layer{display:none}
.w-l{position:absolute;left:-4%;right:-4%;will-change:transform;transform:translate3d(calc(var(--mx,0)*var(--d,0)*1px),calc(var(--my,0)*var(--d,0)*.5px),0)}
.w-l i{position:absolute;inset:0;display:block;background-repeat:no-repeat}
.w-landscape{top:-3%;bottom:-3%;--d:-12}
.w-landscape i{background:url(../assets/world/landscape.webp) 60% 62%/cover no-repeat}
.world .w-moon,.world .w-far,.world .w-castle,.world .w-near{display:none}
.w-stars{top:-4%;bottom:30%;--d:-4}
.w-stars i{background:url(../assets/world/stars.svg);background-size:700px 500px;opacity:.3}
.w-stars i+i{background-size:430px 310px;background-position:90px 60px;opacity:.5;animation:wTw 5s ease-in-out infinite alternate}
.w-moon{top:7%;right:12%;left:auto;width:clamp(90px,14vw,190px);aspect-ratio:1;--d:-7}
.w-moon i{border-radius:50%;background:radial-gradient(circle at 36% 34%,#fff,#d4ecff 40%,#6fb4ff 75%,#2a6fc9);box-shadow:0 0 0 14px rgba(120,190,255,.08),0 0 0 40px rgba(30,144,255,.06),0 0 90px 30px rgba(30,144,255,.35);opacity:.9}
.w-aurora{top:2%;height:60%;--d:-10}
.w-aurora i{background:url(../assets/world/aurora.svg);background-size:100% 100%;opacity:.14;mix-blend-mode:screen;animation:wSway 18s ease-in-out infinite alternate}
.w-aurora i+i{opacity:.08;transform:scaleX(-1);animation-duration:26s}
.w-beams{top:0;height:75%;--d:-6}
.w-beams i{background:repeating-conic-gradient(from 200deg at 78% -10%,rgba(120,200,255,.13) 0 2deg,transparent 2deg 9deg);-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%);animation:wPulse 9s ease-in-out infinite alternate}
.w-far{bottom:14%;height:46vh;min-height:260px;--d:-12}.w-far i{background:url(../assets/world/far.svg) center bottom/cover}
.w-castle{bottom:7%;height:48vh;min-height:280px;--d:-20}.w-castle i{background:url(../assets/world/castle.svg) center bottom/cover}
.w-rune{top:50%;left:68%;width:min(78vw,760px);aspect-ratio:1;margin:calc(min(78vw,760px)/-2) 0 0 calc(min(78vw,760px)/-2);right:auto;--d:14}
.w-rune i{background:url(../assets/world/rune.svg) center/contain;opacity:.55;animation:wSpin 120s linear infinite}
.w-rune i+i{inset:12%;opacity:.35;animation-duration:80s;animation-direction:reverse}
.w-mist{height:38vh;--d:-16}.w-mist.a{bottom:12%}.w-mist.b{bottom:0;--d:26}
.w-mist i{background:radial-gradient(ellipse 40% 50% at 20% 60%,rgba(120,190,255,.24),transparent 70%),radial-gradient(ellipse 45% 40% at 62% 70%,rgba(60,150,255,.22),transparent 70%),radial-gradient(ellipse 35% 45% at 92% 55%,rgba(150,215,255,.18),transparent 70%);animation:wDrift 40s ease-in-out infinite alternate}
.w-mist.b i{animation-duration:30s;animation-direction:alternate-reverse;opacity:.8}
.w-near{bottom:-1%;height:26vh;min-height:150px;--d:34}.w-near i{background:url(../assets/world/near.svg) center bottom/cover}
.w-motes{inset:0;--d:40}
.w-motes b{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);background:#9fd4ff;border-radius:50%;box-shadow:0 0 8px 2px rgba(60,160,255,.6);opacity:0;animation:wRise var(--t) var(--dl) linear infinite}
.w-shade{inset:0;--d:0;transform:none;left:0;right:0;background:linear-gradient(90deg,rgba(2,4,10,.65) 0%,rgba(2,4,10,.32) 42%,rgba(2,4,10,.08) 75%),linear-gradient(180deg,rgba(2,4,10,.55),transparent 22%,transparent 70%,rgba(2,4,10,.32))}
.w-grain{inset:0;left:0;right:0;--d:0;transform:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:soft-light}
@keyframes wTw{from{opacity:.15}to{opacity:.7}}
@keyframes wSway{from{transform:translate3d(-3%,0,0) scaleY(.9)}to{transform:translate3d(3%,-3%,0) scaleY(1.08)}}
@keyframes wPulse{from{opacity:.35}to{opacity:1}}
@keyframes wSpin{to{transform:rotate(360deg)}}
@keyframes wDrift{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(6%,-4%,0)}}
@keyframes wRise{0%{opacity:0;transform:translate3d(0,0,0)}12%{opacity:.9}100%{opacity:0;transform:translate3d(var(--dx),-105vh,0)}}

/* let the world show through the homepage stage */
#hero.stage{background:transparent}
#hero.stage::before,#hero.stage::after{display:none}
footer{background:linear-gradient(180deg,rgba(3,6,13,0),rgba(3,6,13,.82) 40%)}
.stage-sub,.kicker{text-shadow:0 2px 8px rgba(2,4,10,.7)}
.portals{background:rgba(3,6,13,.88)}

.world.is-paused *{animation-play-state:paused!important}
@media (max-width:760px){
 .w-landscape i{background-image:url(../assets/world/landscape-mobile.webp);background-position:78% center}
 .w-beams,.w-aurora i+i,.w-stars i+i,.w-mist.b{display:none}
 .w-moon{right:6%;top:9%}.w-rune{left:62%;top:34%}
 .w-motes b:nth-child(n+7){display:none}
 .w-shade{background:linear-gradient(180deg,rgba(2,4,10,.6),rgba(2,4,10,.35) 40%,rgba(2,4,10,.6))}
}
@media (prefers-reduced-motion:reduce){.world *{animation:none!important}.w-motes{display:none}.w-l{transform:none}}

/* ===== Public pages (body.world-public) ===== */
body.world-public{background:#03060d}
body.world-public .world{z-index:0}
body.world-public main,body.world-public footer{position:relative;z-index:1}
/* heroes show the landscape */
body.world-public .page-hero,body.world-public .phead,body.world-public .post-hero,body.world-public .stage{background:transparent!important}
body.world-public .page-hero.dc-head,body.world-public .page-hero{box-shadow:none}
body.world-public .phead::after{opacity:.55}
body.world-public .page-hero::before{opacity:.5}
body.world-public .page-hero h1,body.world-public .phead h1,body.world-public .post-title{text-shadow:0 2px 14px rgba(2,4,10,.85)}
body.world-public .hero-gradient{text-shadow:none}
body.world-public .page-hero p,body.world-public .phead p,body.world-public .page-sub{text-shadow:0 2px 8px rgba(2,4,10,.85)}
/* readable surfaces */
body.world-public .panel,body.world-public .about-card,body.world-public .feature-item,body.world-public .faq-item,body.world-public .contact-detail,body.world-public .game-hub-card,body.world-public .author-card,body.world-public .comment-form-wrap,body.world-public .signin-prompt,body.world-public main [class*="-card"]:not(.panel-head):not(.about-card):not(.game-hub-card):not(.author-card){background-color:rgba(3,8,20,.86)}
body.world-public .post-body,body.world-public .blog-article{background:rgba(3,8,20,.82);border-radius:14px}
body.world-public .post-hero .post-body{background:rgba(3,8,20,.7)}
body.world-public .comments-section{background:rgba(3,8,20,.82);border-radius:14px}
body.world-public section[style*="background:rgba(30,144,255,0.02)"]{background:transparent!important}
body.world-public .divider{opacity:.5}
body.world-public .marquee-wrap{background:rgba(3,8,20,.85)}
body.world-public footer{background:linear-gradient(180deg,rgba(3,6,13,.2),rgba(3,6,13,.92) 35%)}
body.world-public .w-shade{background:linear-gradient(180deg,rgba(2,4,10,.5),rgba(2,4,10,.3) 30%,rgba(2,4,10,.5)),linear-gradient(90deg,rgba(2,4,10,.4),rgba(2,4,10,.1) 60%)}
/* calmer layers on public pages */
body.world-public .w-rune,body.world-public .w-beams{opacity:.5}
/* per-theme crops */
body[data-world-theme=games] .w-landscape i{background-position:60% 62%}
body[data-world-theme=game] .w-landscape i{background-position:72% 55%}
body[data-world-theme=heroes] .w-landscape i{background-position:30% 50%}
body[data-world-theme=pets] .w-landscape i{background-position:45% 78%}
body[data-world-theme=monsters] .w-landscape i{background-position:85% 70%}
body[data-world-theme=about] .w-landscape i{background-position:50% 40%}
body[data-world-theme=contact] .w-landscape i{background-position:20% 60%}
body[data-world-theme=support] .w-landscape i{background-position:65% 35%}
body[data-world-theme=blog] .w-landscape i{background-position:40% 70%}
/* Quieter atmosphere around forms and long reading; catalogs retain the glow. */
body[data-world-theme=contact] .w-rune,body[data-world-theme=support] .w-rune,body[data-world-theme=blog] .w-rune{display:none}
body[data-world-theme=contact] .w-mist,body[data-world-theme=support] .w-mist,body[data-world-theme=blog] .w-mist{opacity:.4}
body[data-world-theme=pets] .w-aurora{opacity:.7}
body[data-world-theme=monsters] .w-aurora{opacity:.35}
@media (max-width:760px){
 body[data-world-theme] .w-landscape i{background-position:78% center}
 body[data-world-theme=heroes] .w-landscape i{background-position:55% center}
 body[data-world-theme=monsters] .w-landscape i{background-position:95% center}
}
/* motion pause */
body.world-motion-paused .world *,body.world-motion-paused .world *::before,body.world-motion-paused .world *::after,
body.world-motion-paused .decor-layer *,body.world-motion-paused .dc-flank img,body.world-motion-paused .dc-stripe,
body.world-motion-paused .hero-gradient,body.world-motion-paused .marquee-track,
body.world-motion-paused .btn::after,body.world-motion-paused .portal::after,body.world-motion-paused .store::after{animation-play-state:paused!important}
/* An entrance fade must not leave artwork invisible when pause was remembered. */
body.world-motion-paused .dc-flank img{opacity:1!important}
@media (prefers-reduced-motion:reduce){
  body .decor-layer{display:none!important}
  body .dc-flank img,body .dc-stripe,body .hero-gradient,body .marquee-track,body .btn::after,body .portal::after,body .store::after{animation:none!important}
 body.world-public .w-l{transform:none!important}
 body.world-public .panel:hover,body.world-public main [class*="card"]:hover,body.world-public main [class*="card"]:hover img,body.world-public .btn:hover,body.world-public .game-hub-card:hover,body.world-public .portal:hover{transform:none!important}
}