/* ═════════════════════════════════════════════════════════════════
   SKY SCENE — core/sky-scene.css (18y). See core/sky-scene.js. Every size is in container units (cqw/cqh) of .skx, so the
   same rules draw the 120×30 top-bar chip and the world-clock home card. Unscoped, prefix .skx — it lives both inside
   and outside .dl-wclock (which redefines --panel/--ink, so nothing here reads those tokens).
   ═════════════════════════════════════════════════════════════════ */
.skx{position:absolute;inset:0;overflow:hidden;container-type:size;border-radius:inherit;pointer-events:none;isolation:isolate}
.skx>*{position:absolute}
.skx-sky,.skx-dusk{inset:0}

/* ── the sky (the chip draws its own; the home card keeps its own gradient behind) ── */
.skx--day .skx-sky{background:linear-gradient(180deg,#3d8fd8 0%,#79bdec 62%,#cfe6f2 100%)}
.skx--day.skx--clouds .skx-sky{background:linear-gradient(180deg,#7d9bb3,#c3d2dc)}
.skx--day.skx--rain .skx-sky{background:linear-gradient(180deg,#4b6a82,#8aa2b3)}
.skx--day.skx--snow .skx-sky{background:linear-gradient(180deg,#9cb4c7,#e3ecf2)}
.skx--day.skx--storm .skx-sky{background:linear-gradient(180deg,#36435e,#6c7c96)}
.skx--day.skx--fog .skx-sky{background:linear-gradient(180deg,#a2b1b9,#dbe2e4)}
.skx--night .skx-sky{background:linear-gradient(180deg,#081329 0%,#14284a 70%,#22385c 100%)}
.skx--night.skx--clouds .skx-sky{background:linear-gradient(180deg,#151f2e,#2a384a)}
.skx--night.skx--rain .skx-sky{background:linear-gradient(180deg,#101b2a,#243447)}
.skx--night.skx--snow .skx-sky{background:linear-gradient(180deg,#1f2c43,#3a4b64)}
.skx--night.skx--storm .skx-sky{background:linear-gradient(180deg,#0b101d,#212a40)}
.skx--night.skx--fog .skx-sky{background:linear-gradient(180deg,#262f39,#45515b)}
.skx--hero .skx-sky{display:none}
/* dawn / dusk: a warm band low in the sky while the sun (or moon) is near the horizon */
.skx-dusk{background:linear-gradient(0deg,rgba(255,150,80,.55),rgba(255,190,120,.18) 38%,transparent 62%);opacity:0;mix-blend-mode:soft-light}
.skx--day .skx-dusk{opacity:calc(var(--skx-low,0) * .9)}
.skx--night .skx-dusk{opacity:calc(var(--skx-low,0) * .25)}

/* ── stars: clear and lightly clouded nights ── */
.skx-stars{inset:0;opacity:0;transition:opacity .6s}
.skx--night.skx--clear .skx-stars{opacity:1}
.skx--night.skx--clouds .skx-stars{opacity:.35}
.skx-stars i{width:max(1px,.9cqw);max-width:2px;aspect-ratio:1;border-radius:50%;background:#fff;animation:skx-tw 5s ease-in-out infinite}
.skx--hero .skx-stars i{max-width:2.5px;width:2.5px}
@keyframes skx-tw{0%,100%{opacity:.25}50%{opacity:1}}

/* ── the sun and the moon ride an arc; low on it they sink behind the landmark ── */
.skx-sun,.skx-moon{left:calc(6% + var(--skx-x,.5) * 88%);top:calc(92% - var(--skx-alt,.8) * 74%);width:16cqh;max-width:64px;min-width:9px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:left 1.2s,top 1.2s,opacity .8s}
.skx--chip .skx-sun,.skx--chip .skx-moon{width:34cqh}
.skx--hero .skx-sun,.skx--hero .skx-moon{width:58px}
.skx-sun{background:radial-gradient(circle at 50% 50%,#fff7d6 0 34%,#ffd25a 52%,#ffb52e 68%,rgba(255,181,46,0) 70%);box-shadow:0 0 0 0 rgba(255,214,102,0),0 0 18cqh 6cqh rgba(255,206,92,.45)}
.skx--hero .skx-sun{box-shadow:0 0 60px 18px rgba(255,206,92,.38)}
.skx-moon{background:radial-gradient(circle at 38% 36%,#fffdf2 0 26%,#ece6cf 58%,#d5ceb0 69%,rgba(213,206,176,0) 71%);box-shadow:0 0 14cqh 4cqh rgba(220,225,255,.22)}
.skx--hero .skx-moon{box-shadow:0 0 50px 14px rgba(220,225,255,.18)}
.skx--day.skx--clear .skx-sun{opacity:1}
.skx--day.skx--clouds .skx-sun,.skx--day.skx--fog .skx-sun{opacity:.75}
.skx--day.skx--rain .skx-sun,.skx--day.skx--snow .skx-sun{opacity:.35}
.skx--night.skx--clear .skx-moon{opacity:1}
.skx--night.skx--clouds .skx-moon,.skx--night.skx--fog .skx-moon{opacity:.7}
.skx--night.skx--rain .skx-moon,.skx--night.skx--snow .skx-moon{opacity:.3}
.skx--storm .skx-sun,.skx--storm .skx-moon{opacity:.12}

/* ── clouds, far (small, pale, slow) and near (bigger, faster, in front of the landmark) ── */
.skx-cloud{width:21cqw;top:6%;color:#fff;opacity:0;animation:skx-drift 46s linear infinite;transition:opacity .8s}
/* every svg rule carries .skx — the top bar's .dlab-wx-ic svg {16px, outline stroke} must never reach inside the scene */
.skx .skx-cloud svg{display:block;width:100%;height:auto;fill:currentColor;stroke:none;filter:blur(.4px)}
.skx--hero .skx-cloud{width:10cqw}
.skx-cloud.c1{top:4%;animation-duration:58s;animation-delay:-12s}
.skx-cloud.c2{top:22%;width:15cqw;animation-duration:70s;animation-delay:-41s}
.skx-cloud.c3{top:30%;width:26cqw;animation-duration:30s;animation-delay:-6s}
.skx-cloud.c4{top:48%;width:19cqw;animation-duration:38s;animation-delay:-24s}
.skx--hero .skx-cloud.c2{width:8cqw}.skx--hero .skx-cloud.c3{width:13cqw;top:18%}.skx--hero .skx-cloud.c4{width:9cqw;top:34%}   /* 18zc (owner 10-21: "cloud sizes are big … we can make smaller"): every cloud about half its first size */
@keyframes skx-drift{from{transform:translateX(-62cqw)}to{transform:translateX(112cqw)}}
.skx--clear.skx--day .skx-cloud.c2{opacity:.45}
.skx--clouds .skx-far{opacity:.55}.skx--clouds .skx-cloud.skx-near{opacity:.9}
.skx--rain .skx-cloud.skx-far,.skx--snow .skx-cloud.skx-far,.skx--fog .skx-cloud.skx-far{opacity:.6}
.skx--rain .skx-cloud.skx-near,.skx--snow .skx-cloud.skx-near{opacity:.95}
.skx--storm .skx-cloud{opacity:.95}
.skx--rain .skx-cloud,.skx--storm .skx-cloud{color:#b5c3cf}
.skx--storm .skx-cloud{color:#7d8aa0}
.skx--night .skx-cloud{color:#55657a}
.skx--night.skx--clouds .skx-cloud,.skx--night.skx--snow .skx-cloud{color:#6b7a8e}
.skx--windy .skx-cloud{animation-duration:16s!important}

/* ── rain and snow: far drops thin and faint behind the landmark, near drops long and bright in front ── */
.skx-rain,.skx-snow{inset:0;display:none}
.skx--rain .skx-rain,.skx--storm .skx-rain{display:block}
.skx--snow .skx-snow{display:block}
.skx-rain i{position:absolute;top:0;width:1px;height:14cqh;background:linear-gradient(180deg,rgba(220,235,255,0),rgba(220,235,255,.85));border-radius:1px;animation:skx-rainf .7s linear infinite;animation-duration:calc(.7s * var(--s,1))}
.skx-rain.skx-far i{height:9cqh;opacity:.45;animation-duration:calc(.95s * var(--s,1))}
.skx-rain.skx-near i{width:1.4px;height:20cqh}
.skx--hero .skx-rain.skx-near i{width:2px;height:12cqh}
@keyframes skx-rainf{from{transform:translate(0,-25cqh) rotate(14deg)}to{transform:translate(-14cqw,112cqh) rotate(14deg)}}
.skx--windy .skx-rain i{animation-name:skx-rainw}
@keyframes skx-rainw{from{transform:translate(0,-25cqh) rotate(28deg)}to{transform:translate(-34cqw,112cqh) rotate(28deg)}}
.skx-snow i{position:absolute;top:0;width:4cqh;max-width:5px;min-width:2px;aspect-ratio:1;border-radius:50%;background:#fff;animation:skx-snowf 6s linear infinite;animation-duration:calc(6s * var(--s,1))}
.skx-snow.skx-far i{opacity:.55;width:2.6cqh;max-width:3px;animation-duration:calc(9s * var(--s,1))}
.skx--hero .skx-snow.skx-near i{max-width:7px;width:7px}
@keyframes skx-snowf{0%{transform:translate(0,-8cqh)}25%{transform:translate(3cqw,22cqh)}50%{transform:translate(-2cqw,50cqh)}75%{transform:translate(3cqw,78cqh)}100%{transform:translate(0,108cqh)}}

/* ── THE LANDMARK — a silhouette on the horizon; lit windows at night ── */
.skx-lm,.skx-art{left:0;right:0;bottom:0;height:100%}
.skx--chip .skx-lm,.skx--chip .skx-art{left:24%;right:2%;top:6%}
.skx--hero .skx-lm,.skx--hero .skx-art{left:0;right:0;bottom:0;height:170px}   /* 18zr (owner 10-22): 118 → 170px — the card's band grew with it (world-clock.css) */
.skx--hero .skx-lm{opacity:.85}   /* stands on the card's horizon band (world-clock.css .has-sky) — never behind the reading */
.skx--hero .skx-lm::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(0deg,rgba(0,0,0,.28),transparent)}
.skx .skx-lm-svg{display:block;width:100%;height:100%;fill:none;stroke:none}
.skx-lm-body{fill:rgba(16,27,45,.86)}
.skx-lm-far{fill:rgba(16,27,45,.32)}
.skx-lm-snow{fill:rgba(255,255,255,.62)}   /* 18za: a far mountain's snowcap (Fuji, the Lions) */
.skx-lm-line{fill:none;stroke:rgba(16,27,45,.86);stroke-width:1.6}
.skx--night .skx-lm-body{fill:#060b15}
.skx--night .skx-lm-far{fill:rgba(6,11,21,.45)}
.skx--night .skx-lm-snow{fill:rgba(205,218,240,.3)}
/* 18za: carved detail — light lines on the dark silhouette by day, engraved shadow lines on a floodlit monument at night; too fine for the pill */
.skx-lm-det{fill:rgba(255,255,255,.17)}
.skx--night .skx-lm-det{fill:rgba(150,175,220,.16)}
.skx--night .skx-lm-det-flood{fill:rgba(70,40,12,.42)}
.skx--chip .skx-lm-det{display:none}
.skx--night .skx-lm-line{stroke:#060b15}
.skx--snow.skx--day .skx-lm-body{fill:rgba(40,55,75,.8)}
.skx--fog .skx-lm-body,.skx--fog .skx-lm-line{opacity:.55}
.skx-lm-lights{opacity:0;transition:opacity .8s}
.skx--night .skx-lm-lights{opacity:1}
.skx-lm-lights rect{fill:#ffd27a;animation:skx-win 7s ease-in-out infinite;animation-delay:calc(var(--tw,0s) * -1)}
@keyframes skx-win{0%,100%{opacity:.95}46%{opacity:.95}50%{opacity:.25}54%{opacity:.95}}
.skx-lm-glow{fill:rgba(255,236,190,.55)}
.skx--night .skx-lm-glow{fill:#ffe39a;filter:drop-shadow(0 0 2px rgba(255,220,140,.9))}

/* ── wind: streaks racing across, in front ── */
.skx-wind{inset:0;opacity:0}
.skx--windy .skx-wind{opacity:1}
.skx-wind i{position:absolute;left:0;height:1px;width:26cqw;border-radius:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:skx-gust 2.6s linear infinite}
.skx--hero .skx-wind i{height:2px}
.skx-wind i:nth-child(1){top:24%;animation-delay:-.4s}
.skx-wind i:nth-child(2){top:46%;width:34cqw;animation-delay:-1.5s}
.skx-wind i:nth-child(3){top:63%;animation-delay:-2.1s}
.skx-wind i:nth-child(4){top:80%;width:20cqw;animation-delay:-.9s}
.skx--gale .skx-wind i{animation-duration:1.5s}
@keyframes skx-gust{from{transform:translateX(-40cqw)}to{transform:translateX(130cqw)}}

/* ── fog: two soft bands drifting across the landmark ── */
.skx-fog{inset:0;opacity:0}
.skx--fog .skx-fog{opacity:1}
.skx-fog i{position:absolute;left:-30%;width:160%;height:34%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(235,240,243,.75),rgba(235,240,243,0) 70%);animation:skx-fogd 24s ease-in-out infinite alternate}
.skx-fog i:nth-child(1){top:42%}
.skx-fog i:nth-child(2){top:66%;animation-duration:31s;animation-delay:-9s}
.skx--night .skx-fog i{background:radial-gradient(ellipse at center,rgba(150,165,180,.55),rgba(150,165,180,0) 70%)}
@keyframes skx-fogd{from{transform:translateX(-12cqw)}to{transform:translateX(12cqw)}}

/* ── lightning: a bolt and a flash, every few seconds, storms only ── */
.skx-bolt,.skx-flash{opacity:0}
.skx-bolt{left:30%;top:4%;width:7cqw;height:62%}
.skx--hero .skx-bolt{width:2.4cqw;left:52%}
.skx .skx-bolt svg{width:100%;height:100%;fill:#fff8d0;stroke:none;filter:drop-shadow(0 0 3px rgba(255,248,200,.95))}
.skx-flash{inset:0;background:rgba(235,240,255,.55)}
.skx--storm .skx-bolt{animation:skx-boltk 5.5s linear infinite}
.skx--storm .skx-flash{animation:skx-flashk 5.5s linear infinite}
@keyframes skx-boltk{0%,86%,100%{opacity:0}87%{opacity:1}88%{opacity:.2}89.5%{opacity:1}92%{opacity:0}}
@keyframes skx-flashk{0%,86%,100%{opacity:0}87%{opacity:.8}88%{opacity:.1}89.5%{opacity:.6}93%{opacity:0}}

/* z-order: sky, stars, sun/moon, dusk, far clouds, far rain/snow, landmark, near clouds, near rain/snow, wind, fog, lightning */
.skx-sky{z-index:0}.skx-stars{z-index:1}.skx-sun,.skx-moon{z-index:2}.skx-dusk{z-index:3}
.skx-cloud.skx-far{z-index:4}.skx-rain.skx-far,.skx-snow.skx-far{z-index:5}.skx-lm,.skx-art{z-index:6}
.skx-cloud.skx-near{z-index:7}.skx-rain.skx-near,.skx-snow.skx-near{z-index:8}.skx-wind{z-index:9}.skx-fog{z-index:10}
.skx-bolt{z-index:11}.skx-flash{z-index:12}

@media (prefers-reduced-motion:reduce){
  .skx *,.skx *::before{animation:none!important;transition:none!important}
  .skx-rain i,.skx-snow i{transform:translateY(40cqh)}
}

/* ── night: monuments FLOODLIT warm gold, buildings dark with a faint rim and lit windows, ground plain ── */
.skx-lm-plain{fill:rgba(16,27,45,.86)}
.skx--night .skx-lm-plain{fill:#070c17}
.skx--night .skx-lm-lit{fill:#0b1426;stroke:rgba(130,160,210,.35);stroke-width:.5}
.skx--night .skx-lm-flood{fill:var(--skx-flood,#a77a45);filter:drop-shadow(0 0 2px rgba(255,190,110,.55))}
.skx--night .skx-lm-flood-line{stroke:#c9924f}
.skx--night.skx--rain .skx-lm-flood,.skx--night.skx--fog .skx-lm-flood,.skx--night.skx--snow .skx-lm-flood{filter:drop-shadow(0 0 3px rgba(255,190,110,.4))}
.skx--hero.skx--night .skx-lm{opacity:.8}
.skx-lm-band{fill:rgba(255,236,190,.35)}
.skx--night .skx-lm-band{fill:#ffe7a8;filter:drop-shadow(0 0 1.5px rgba(255,220,140,.9))}

/* ═══ 18z (owner 10-20, after the all-cities gallery: "keep landmarks visible in cloud, rain, fog, snow and at night in the
   small pill") — the 120×30 pill only; the home card keeps its deeper sky. The landmark is the point of the pill. ═══ */
/* 1 · cloud and rain: the near clouds ride a thin band ABOVE the landmark (weather still reads, the silhouette stays whole),
       smaller and see-through; the far clouds stay behind it */
.skx--chip .skx-cloud.c3{top:4%;width:18cqw;animation-duration:26s}   /* 18zr (owner 10-22: "cloud shape is also sharp cut in top part"): −6% / 0 → 4% / 8%, wholly inside the pill */
.skx--chip .skx-cloud.c4{top:8%;width:14cqw;animation-duration:34s}
.skx--chip.skx--clouds .skx-cloud.skx-near,.skx--chip.skx--rain .skx-cloud.skx-near,.skx--chip.skx--snow .skx-cloud.skx-near,.skx--chip.skx--storm .skx-cloud.skx-near{opacity:.62}
.skx--chip .skx-cloud.skx-far{top:2%}
.skx--chip .skx-rain.skx-near i{opacity:.75}
/* 2 · fog and snow: greyer, thinner veils — the white wash flattened the picture */
.skx--chip.skx--fog .skx-fog{opacity:.5}
.skx--chip.skx--fog .skx-fog i:nth-child(1){top:58%}
.skx--chip.skx--fog .skx-lm-body,.skx--chip.skx--fog .skx-lm-line{opacity:.85}
.skx--chip.skx--day.skx--snow .skx-cloud,.skx--chip.skx--day.skx--fog .skx-cloud,.skx--chip.skx--day.skx--clouds .skx-cloud{color:#c4cfd9}
.skx--chip.skx--day .skx-lm-body,.skx--chip.skx--day .skx-lm-plain{fill:rgba(14,24,40,.9)}
/* 3 · night: hills, mountains and dark buildings get a faint moonlit rim so they never sink into the sky */
.skx--night .skx-lm-plain{stroke:rgba(170,190,230,.42);stroke-width:.7;stroke-linejoin:round}
.skx--chip.skx--night .skx-lm-plain{fill:#0e1828;stroke:rgba(180,200,240,.55);stroke-width:1}
.skx--chip.skx--night .skx-lm-lit{stroke:rgba(150,180,230,.55);stroke-width:.9}
.skx--chip.skx--night .skx-lm-far{fill:rgba(40,56,84,.75)}
/* 18zc: the full-colour picture (core/landmarks/) — once loaded it replaces the drawn silhouette; the weather still passes in front */
.skx-art{pointer-events:none}
.skx-art-img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.skx--art .skx-lm{visibility:hidden}
.skx--fog .skx-art-img{opacity:.68}
.skx--chip.skx--fog .skx-art-img{opacity:.85}
.skx--rain .skx-art-img,.skx--storm .skx-art-img{filter:saturate(.82) brightness(.94)}
.skx--snow.skx--day .skx-art-img{filter:saturate(.78) brightness(1.05)}