/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 48%,var(--s3) 100%);
  transition:--s1 1.4s ease,--s2 1.4s ease,--s3 1.4s ease}
.scene{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.scene>*{position:absolute;transition:opacity 1.2s ease,transform .6s var(--ease)}
.sun{width:min(46vw,300px);aspect-ratio:1;inset-block-start:6%;inset-inline-end:8%;opacity:0}
.sun::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff6c9 0%,#ffd76a 34%,rgba(255,200,80,.0) 70%);animation:pulse 6s ease-in-out infinite}
.sun::after{content:"";position:absolute;inset:30%;border-radius:50%;background:linear-gradient(160deg,#fff3b0,#ffb830);box-shadow:0 10px 30px rgba(255,170,40,.55),inset 0 -8px 14px rgba(255,140,0,.35)}
.sun i{position:absolute;inset:0;animation:spin 60s linear infinite}
.sun i::before{content:"";position:absolute;inset:8%;border-radius:50%;border:2px dashed rgba(255,244,190,.5)}
.moon{width:min(30vw,170px);aspect-ratio:1;inset-block-start:9%;inset-inline-end:12%;opacity:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fffef4,#dfe6ff 60%,#b9c4f2);box-shadow:0 0 60px 10px rgba(190,205,255,.35),inset -14px -10px 0 rgba(120,135,200,.25);animation:float 9s ease-in-out infinite}
.stars{inset:0;opacity:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 42%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 44% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 30%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 38%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 8% 60%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 54% 52%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 84% 66%,#fff 50%,transparent 51%);animation:twinkle 5s ease-in-out infinite}
.cloud{opacity:0;width:340px;height:120px;filter:drop-shadow(0 18px 18px rgba(10,20,50,.14))}
.cloud svg{width:100%;height:100%;display:block}
.c1{inset-block-start:14%;animation:drift 70s linear infinite}
.c2{inset-block-start:30%;scale:.72;animation:drift 95s linear infinite -40s}
.c3{inset-block-start:52%;scale:1.25;animation:drift 120s linear infinite -80s}
.c4{inset-block-start:7%;scale:.6;animation:drift 85s linear infinite -20s}
@keyframes drift{from{transform:translateX(-420px)}to{transform:translateX(calc(100vw + 120px))}}
html[dir=rtl] .cloud{animation-direction:normal}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.08);opacity:.85}}
@keyframes twinkle{50%{opacity:.55}}
@keyframes float{50%{transform:translateY(-10px)}}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.flash{position:fixed;inset:0;z-index:-1;background:#dfe6ff;opacity:0;pointer-events:none}
body[data-theme=storm] .flash{animation:flash 7s infinite}
@keyframes flash{0%,90%,100%{opacity:0}91%{opacity:.35}92%{opacity:.05}93%{opacity:.45}96%{opacity:0}}
body[data-theme=clear-day] .sun,body[data-theme=cloud-day] .sun{opacity:1}
body[data-theme=cloud-day] .sun{opacity:.55}
body[data-theme=clear-night] .moon,body[data-theme=cloud-night] .moon{opacity:1}
body[data-theme=cloud-night] .moon{opacity:.6}
body[data-theme=clear-night] .stars{opacity:1}
body[data-theme=clear-day] .c1,body[data-theme=clear-day] .c4,body[data-theme=clear-night] .c4{opacity:.5}
body[data-theme=cloud-day] .cloud,body[data-theme=cloud-night] .cloud,body[data-theme=rain] .cloud,body[data-theme=storm] .cloud,body[data-theme=fog] .cloud,body[data-theme=snow] .cloud{opacity:.8}
body[data-theme=cloud-night] .cloud,body[data-theme=storm] .cloud,body[data-theme=clear-night] .cloud{filter:brightness(.55) drop-shadow(0 18px 18px rgba(0,0,0,.2))}
body[data-theme=rain] .cloud{filter:brightness(.8) drop-shadow(0 18px 18px rgba(10,20,50,.2))}