/* A clear, continuous breeze. Each original cloud crosses the sky independently.
   Linear timing avoids the long, nearly frozen ends of the former tiny sways. */
.background-elements.clouds-animated .cloud{
 --cloud-width:clamp(220px,30vw,470px);
 width:var(--cloud-width);height:auto;left:0;right:auto;bottom:auto;
 translate:none;opacity:var(--cloud-opacity,.8);transform-origin:center;
 animation:heaven-cloud-travel var(--cloud-time,200s) linear infinite;
 animation-delay:var(--cloud-delay,-80s);pointer-events:none;
}
.clouds-animated .cloud-one{--cloud-width:clamp(180px,24vw,370px);top:24%;--cloud-time:174s;--cloud-delay:-24s;--cloud-lift:-12px;--cloud-opacity:.75}
.clouds-animated .cloud-two{--cloud-width:clamp(240px,34vw,540px);top:13%;--cloud-time:218s;--cloud-delay:-163s;--cloud-lift:16px;--cloud-opacity:.8}
.clouds-animated .cloud-three{--cloud-width:clamp(200px,27vw,430px);top:48%;--cloud-time:190s;--cloud-delay:-145s;--cloud-lift:-18px;--cloud-opacity:.82}
.clouds-animated .cloud-four{--cloud-width:clamp(260px,36vw,570px);top:68%;--cloud-time:202s;--cloud-delay:-48s;--cloud-lift:12px;--cloud-opacity:.9}
.clouds-animated .cloud-five{--cloud-width:clamp(230px,31vw,500px);top:81%;--cloud-time:165s;--cloud-delay:-116s;--cloud-lift:-15px;--cloud-opacity:.88}
@keyframes heaven-cloud-travel{
 from{transform:translate3d(calc(-1 * var(--cloud-width) - 36px),0,0)}
 to{transform:translate3d(calc(100vw + 36px),var(--cloud-lift,-12px),0)}
}
.cloud-atmosphere,.cloud-banks{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:layout paint}
/* Three lighter, distant wisps leave open air above the island. */
.sky-wisp{position:absolute;display:block;left:0;background:center/contain no-repeat;pointer-events:none;opacity:.2;animation:heaven-wisp-pass var(--wisp-time,200s) linear infinite;animation-delay:var(--wisp-delay,-40s)}
.sky-wisp-1{top:3%;width:34vw;max-width:520px;height:19vh;background-image:url('/assets/background/cloud-two.webp');--wisp-time:210s;--wisp-delay:-92s}
.sky-wisp-2{top:31%;width:24vw;max-width:380px;height:18vh;background-image:url('/assets/background/cloud-three.webp');--wisp-time:180s;--wisp-delay:-24s;opacity:.16}
.sky-wisp-3{top:58%;width:37vw;max-width:600px;height:20vh;background-image:url('/assets/background/cloud-four.webp');--wisp-time:230s;--wisp-delay:-166s;opacity:.18}
@keyframes heaven-wisp-pass{from{transform:translate3d(-60vw,0,0)}to{transform:translate3d(110vw,-2vh,0)}}
/* Edge banks frame the garden. Their staggered courses stay visibly in motion
   without piling repeated silhouettes into the center or touching game picking. */
.sky-cloud-bank{position:absolute;display:block;background:center/contain no-repeat;opacity:var(--bank-opacity,.5);pointer-events:none;animation:heaven-bank-drift var(--bank-time,40s) linear infinite alternate;animation-delay:var(--bank-delay,-12s)}
.bank-1{width:clamp(220px,29vw,520px);height:24vh;left:-17%;top:8%;background-image:url('/assets/background/cloud-two.webp');--bank-time:43s;--bank-delay:-9s;--bank-x:140px;--bank-y:12px;--bank-opacity:.4}
.bank-2{width:clamp(220px,28vw,500px);height:25vh;right:-17%;top:29%;background-image:url('/assets/background/cloud-four.webp');--bank-time:38s;--bank-delay:-20s;--bank-x:-145px;--bank-y:-10px;--bank-opacity:.52}
.bank-3{width:clamp(260px,33vw,590px);height:30vh;left:-20%;top:45%;background-image:url('/assets/background/cloud-three.webp');--bank-time:37s;--bank-delay:-26s;--bank-x:150px;--bank-y:-14px;--bank-opacity:.6}
.bank-4{width:clamp(240px,30vw,540px);height:27vh;right:-19%;top:60%;background-image:url('/assets/background/cloud-two.webp');--bank-time:46s;--bank-delay:-13s;--bank-x:-160px;--bank-y:10px;--bank-opacity:.58}
.bank-5{width:clamp(330px,41vw,740px);height:30vh;left:-10%;bottom:-14%;background-image:url('/assets/background/cloud-five.webp');--bank-time:41s;--bank-delay:-28s;--bank-x:180px;--bank-y:-14px;--bank-opacity:.75}
.bank-6{width:clamp(330px,40vw,720px);height:28vh;right:-8%;bottom:-13%;background-image:url('/assets/background/cloud-four.webp');--bank-time:47s;--bank-delay:-9s;--bank-x:-190px;--bank-y:-10px;--bank-opacity:.7}
.bank-7{width:clamp(160px,20vw,350px);height:15vh;left:15%;top:0;background-image:url('/assets/background/cloud-three.webp');--bank-time:39s;--bank-delay:-17s;--bank-x:130px;--bank-y:10px;--bank-opacity:.28}
.bank-8{width:clamp(160px,19vw,340px);height:15vh;right:20%;top:0;background-image:url('/assets/background/cloud-one.webp');--bank-time:44s;--bank-delay:-31s;--bank-x:140px;--bank-y:-8px;--bank-opacity:.25}
@keyframes heaven-bank-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--bank-x,150px),var(--bank-y,-12px),0)}}
body[data-theme=sunset] .cloud-banks{opacity:.86}body[data-theme=night] .cloud-banks{opacity:.55}
body[data-scenery=waterfalls] .cloud-banks{opacity:.48}body[data-scenery=stars] .cloud-banks{opacity:.4}
body[data-theme=sunset] .sky-wisp{opacity:.23}body[data-theme=night] .sky-wisp{opacity:.11}
body[data-scenery=waterfalls] .sky-wisp{opacity:.12}body[data-scenery=stars] .sky-wisp{opacity:.08}
body[data-scenery=waterfalls] .background-elements.clouds-animated .cloud{opacity:.32}
body[data-scenery=stars] .background-elements.clouds-animated .cloud{opacity:.3}
body[data-scenery=clouds] .background-elements.clouds-animated .cloud{width:var(--cloud-width);opacity:.94}
/* Static positions keep the complete composition when motion is turned off. */
.sky-paused .cloud,.sky-paused .sky-wisp{animation-play-state:paused!important}
body.reduced-motion .cloud-atmosphere,body[data-effects=off] .cloud-atmosphere,body[data-graphics-level=battery] .cloud-atmosphere{display:none}
body[data-graphics-level=balanced] .sky-wisp-2,body[data-graphics-level=balanced] .sky-wisp-3,
body[data-graphics-level=balanced] .bank-7,body[data-graphics-level=balanced] .bank-8,
body[data-graphics-level=battery] .bank-7,body[data-graphics-level=battery] .bank-8{display:none}
body:is(.reduced-motion,[data-effects=off],[data-graphics-level=battery]) .cloud-one{left:-9%}
body:is(.reduced-motion,[data-effects=off],[data-graphics-level=battery]) .cloud-two{left:auto;right:-8%}
body:is(.reduced-motion,[data-effects=off],[data-graphics-level=battery]) .cloud-three{left:auto;right:-9%}
body:is(.reduced-motion,[data-effects=off],[data-graphics-level=battery]) .cloud-four{left:-8%}
body:is(.reduced-motion,[data-effects=off],[data-graphics-level=battery]) .cloud-five{left:53%}
@media(max-width:700px){
 .clouds-animated .cloud-one{--cloud-width:51vw;--cloud-time:118s;top:23%}
 .clouds-animated .cloud-two{--cloud-width:70vw;--cloud-time:146s;top:12%}
 .clouds-animated .cloud-three{--cloud-width:59vw;--cloud-time:132s;top:47%}
 .clouds-animated .cloud-four{--cloud-width:78vw;--cloud-time:139s;top:70%}
 .clouds-animated .cloud-five{--cloud-width:66vw;--cloud-time:124s;top:82%}
 .sky-wisp-1{width:72vw;height:20vh;--wisp-time:150s;opacity:.16}
 .sky-wisp-2,.sky-wisp-3,.bank-1,.bank-2,.bank-7,.bank-8{display:none}
 .bank-3{left:-56%;top:36%;width:76vw;--bank-x:100px;--bank-time:33s;opacity:.48}
 .bank-4{right:-54%;top:58%;width:78vw;--bank-x:-105px;--bank-time:38s;opacity:.46}
 .bank-5{width:91vw;left:-36%;bottom:-13%;--bank-x:110px;--bank-time:35s;opacity:.62}
 .bank-6{width:90vw;right:-40%;bottom:-10%;--bank-x:-120px;--bank-time:39s;opacity:.58}
}
/* Short landscape phones need fewer banks, not a crowded desktop sky. */
@media(min-width:701px) and (max-height:500px){
 .sky-wisp-2,.sky-wisp-3,.bank-1,.bank-2,.bank-7,.bank-8{display:none}
 .clouds-animated .cloud-one{--cloud-width:22vw}.clouds-animated .cloud-two{--cloud-width:29vw}
 .clouds-animated .cloud-three{--cloud-width:23vw}.clouds-animated .cloud-four{--cloud-width:32vw}
 .clouds-animated .cloud-five{--cloud-width:27vw}
 .bank-3,.bank-4{width:28vw}.bank-5,.bank-6{width:35vw}
}
@media(prefers-reduced-motion:reduce){
 .cloud-atmosphere{display:none}
 .clouds-animated .cloud-one{left:-9%}.clouds-animated .cloud-two{left:auto;right:-8%}
 .clouds-animated .cloud-three{left:auto;right:-9%}.clouds-animated .cloud-four{left:-8%}.clouds-animated .cloud-five{left:53%}
}

/* The whole distant world shares a breeze, with different rhythms for depth.
   Only decorative transforms move: the playable islands and picking stay fixed. */
.background-elements.clouds-animated :is(.distant-island,.tree-island,.floating-rock){
 transform-origin:50% 65%;
 animation:heaven-island-hover var(--hover-time,19s) ease-in-out infinite;
 animation-delay:var(--hover-delay,-7s);
}
.clouds-animated .distant-island{--hover-time:23s;--hover-delay:-8s;--drift-x:7px;--drift-y:-12px;--drift-tilt:-.6deg}
.clouds-animated .tree-island{--hover-time:19s;--hover-delay:-14s;--drift-x:-8px;--drift-y:-16px;--drift-tilt:.75deg}
.clouds-animated .floating-rock{--hover-time:15s;--hover-delay:-3s;--drift-x:5px;--drift-y:-18px;--drift-tilt:-1.5deg}
.background-elements.clouds-animated .sun-rays{transform-origin:50% 20%;animation:heaven-sun-breathe 38s ease-in-out -13s infinite alternate}
/* Overscan keeps every viewport edge covered throughout the gentle panorama drift. */
.background-elements.clouds-animated .scenery-panorama:not([hidden]){animation:heaven-horizon-drift 76s ease-in-out -24s infinite alternate}
.background-elements.clouds-animated .scenery-stars:not([hidden]){animation:heaven-starlight-drift 92s ease-in-out -37s infinite alternate}
@keyframes heaven-island-hover{
 0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
 50%{transform:translate3d(var(--drift-x,6px),var(--drift-y,-12px),0) rotate(var(--drift-tilt,.6deg))}
}
@keyframes heaven-sun-breathe{from{transform:rotate(-2deg) scale(1.01)}to{transform:rotate(2deg) scale(1.06)}}
@keyframes heaven-horizon-drift{from{transform:translate3d(-.65%,.3%,0) scale(1.035)}to{transform:translate3d(.65%,-.3%,0) scale(1.05)}}
@keyframes heaven-starlight-drift{from{transform:translate3d(-.35%,.25%,0) scale(1.02)}to{transform:translate3d(.35%,-.25%,0) scale(1.035)}}
/* Pause every background layer together, including alternate scenery. */
.background-elements.sky-paused *{animation-play-state:paused!important}
body.reduced-motion .background-elements *,
body[data-effects=off] .background-elements *,
body[data-graphics-level=battery] .background-elements *{animation:none!important;transform:none!important;translate:none!important}
body[data-effects=subtle] .background-elements :is(.distant-island,.tree-island,.floating-rock),
body[data-graphics-level=balanced] .background-elements :is(.distant-island,.tree-island,.floating-rock){--drift-x:4px;--drift-y:-8px;--drift-tilt:.4deg}
@media(max-width:700px){
 .background-elements.clouds-animated :is(.distant-island,.tree-island,.floating-rock){--drift-x:3px;--drift-y:-8px;--drift-tilt:.4deg}
 .clouds-animated .distant-island{--hover-time:29s}.clouds-animated .tree-island{--hover-time:25s}.clouds-animated .floating-rock{--hover-time:21s}
 .background-elements.clouds-animated .sun-rays{animation-duration:50s}
}
@media(prefers-reduced-motion:reduce){.background-elements *{animation:none!important;transform:none!important;translate:none!important}}