/* Weather sits behind the interface; each time band has matching foreground contrast. */
.ambient-sky {
  --sky-light: 193, 207, 227;
  --cloud-opacity: 0;
  --cloud-speed: 90s;
  --tone-opacity: 1;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #080b10;
}
.sky-tone, .sky-shade, .sky-stars, .sky-glow, .sky-fog, .sky-mist, .sky-haze,
.sky-warmth, .sky-cold, .sky-humidity, .sky-dry, .sky-wind, .sky-rain, .sky-rain-mist, .sky-lightning {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 5s ease;
}
.sky-tone { transition: none; } /* Switch sky and foreground contrast together. */
.sky-dawn { background: radial-gradient(ellipse at 78% 30%, #ffe0b5 0%, #f5e5d3 38%, #f2ece4 75%, #f8f5ef 100%); }
.sky-morning { background: radial-gradient(ellipse at 76% 12%, #fff4d9 0%, #faf7ef 42%, #f0ece5 80%, #f7f4ee 100%); }
.sky-day { background: radial-gradient(ellipse at 75% 18%, #ffecc6 0%, #f8f1e3 35%, #edece6 72%, #f7f4ee 100%); }
.sky-dusk, .sky-night { background: radial-gradient(ellipse at 73% 8%, #2d3b51 0%, #162133 32%, #0c121e 64%, #070a10 100%); }
/* One weather opacity for the entire sunset/magic/night stack avoids a dark dip
   between layers. The final blue-hour frame matches the night sky exactly. */
.sky-dusk::before, .sky-dusk::after { content: ''; position: absolute; inset: 0; }
.sky-dusk::before {
  background: radial-gradient(ellipse at 74% 43%, #b07d9b 0%, #795780 25%, #424468 52%, #18243d 76%, #0b1728 100%);
  opacity: calc(1 - var(--dusk-night, 0));
}
.sky-dusk::after {
  background: radial-gradient(ellipse 45% 26% at 74% 47%, #e6925099, transparent 100%),
    linear-gradient(180deg, #25334b 0%, #523d65 28%, #a36971 48%, #684b65 62%, #101626 100%);
  opacity: calc(1 - var(--dusk-magic, 0));
}
[data-period="dawn"] .sky-dawn, [data-period="morning"] .sky-morning, [data-period="day"] .sky-day,
[data-period="dusk"] .sky-dusk, [data-period="night"] .sky-night { opacity: var(--tone-opacity); }
[data-period="dawn"] .ambient-sky { --sky-light: 241, 191, 143; }
[data-period="dusk"] .ambient-sky { --sky-light: var(--dusk-light, 241, 191, 143); }
[data-period="day"] .ambient-sky { --sky-light: 239, 225, 193; }
[data-period="morning"] .ambient-sky { --sky-light: 255, 230, 182; }

/* Soft backlight sits behind the clouds, rather than a flat floating disc. */
.sky-glow {
  background: radial-gradient(ellipse at 74% 17%, rgba(var(--sky-light), .18), transparent 44%);
  opacity: .45;
}
.sky-orb {
  position: absolute;
  top: 16%; left: 74%;
  width: clamp(42px, 5vw, 72px); aspect-ratio: 1;
  border-radius: 50%;
  background: #f7e8c7;
  box-shadow: 0 0 35px 12px #eacb9740, 0 0 150px 60px #eacb9715;
  opacity: 0;
  transition: opacity 6s;
}
[data-sunlight="full"] .sky-orb { opacity: .64; }
[data-sunlight="partial"] .sky-orb { opacity: .38; }
[data-period="night"] .sky-orb {
  width: clamp(32px, 3.2vw, 46px);
  background: #e5e9ee;
  box-shadow: inset -11px -5px 0 0 #72839b, 0 0 32px 10px #dbe8ff18, 0 0 130px 50px #aacfff0c;
}
[data-sunlight="full"][data-period="night"] .sky-orb { opacity: .7; }
[data-sunlight="full"] .sky-glow { opacity: 1; }
[data-sunlight="partial"] .sky-glow { opacity: .7; }
.sky-stars {
  background-image: radial-gradient(1px 1px at 12% 15%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 28% 32%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 43% 9%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 57% 24%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 65% 44%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 88% 35%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 93% 9%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 6% 48%, #d3dcea 90%, transparent), radial-gradient(1.3px 1.3px at 38% 21%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 51% 43%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 82% 6%, #d3dcea 90%, transparent), radial-gradient(1px 1px at 20% 6%, #d3dcea 90%, transparent);
}
[data-period="night"][data-sunlight="full"] .sky-stars { opacity: .65; }
[data-period="night"][data-sunlight="partial"] .sky-stars { opacity: .25; }
[data-period="dusk"][data-sunlight="full"] .sky-stars { opacity: calc(.65 * var(--dusk-night, 0)); }
[data-period="dusk"][data-sunlight="partial"] .sky-stars { opacity: calc(.25 * var(--dusk-night, 0)); }

/* The textured SVG is rasterized once; only the two layer transforms move. */
.sky-clouds {
  position: absolute;
  left: -20%; width: 140%; height: 78%; top: -20%;
  background: url('sky-clouds.svg?v=weather-design-2') center / 100% 100% no-repeat;
  opacity: var(--cloud-opacity);
  transition: opacity 6s;
  animation: cloud-crossing var(--cloud-speed) ease-in-out infinite alternate;
  animation-play-state: paused;
}
.sky-clouds-near { top: -7%; left: -28%; width: 155%; height: 79%; transform: scaleX(-1); animation-name: cloud-return; animation-duration: calc(var(--cloud-speed) * 1.3); animation-delay: -28s; }
[data-weather="cloud"] .ambient-sky { --cloud-opacity: .48; }
[data-weather="rain"] .ambient-sky { --cloud-opacity: .55; --tone-opacity: .4; }
[data-weather="storm"] .ambient-sky { --cloud-opacity: .72; --tone-opacity: .15; }
[data-weather="rain"] .sky-clouds { filter: brightness(.75); }
[data-weather="storm"] .sky-clouds { filter: brightness(.55); }
[data-cloud-cover="none"]:not([data-weather="wind"])[data-weather-leaving="rain"] .sky-clouds { filter: brightness(.75); }
[data-cloud-cover="none"]:not([data-weather="wind"])[data-weather-leaving="storm"] .sky-clouds { filter: brightness(.55); }
[data-weather="wind"] .ambient-sky { --cloud-opacity: .35; }
[data-cloud-cover="broken"] .sky-clouds, [data-cloud-cover="normal"] .sky-clouds,
[data-cloud-cover="overcast"] .sky-clouds, [data-weather="wind"] .sky-clouds,
[data-cloud-leaving="broken"] .sky-clouds, [data-cloud-leaving="normal"] .sky-clouds,
[data-cloud-leaving="overcast"] .sky-clouds, [data-weather-leaving="wind"] .sky-clouds { animation-play-state: running; }
[data-weather="storm"] .sky-glow { background: radial-gradient(ellipse at 75% 25%, #b3c6de26, transparent 45%); opacity: .7; }

.sky-rain { opacity: 1; overflow: hidden; --rain-rgb: 188, 210, 237; }
.rain-layer {
  --rain-travel: 8vh; --rain-angle: 3deg; --rain-width: 1px;
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(100% + var(--rain-travel));
  opacity: 0;
  transition: opacity 5s ease;
}
.rain-layer[data-kind="moderate"] { --rain-travel: 24vh; --rain-angle: 12deg; --rain-width: 1.1px; }
.rain-layer[data-kind="heavy"] { --rain-travel: 44vh; --rain-angle: 23deg; --rain-width: 1.35px; }
.rain-layer[data-kind="storm"] { --rain-travel: 60vh; --rain-angle: 30deg; --rain-width: 1.5px; }
.rain-layer i {
  position: absolute; top: -170px;
  width: var(--rain-width); height: var(--drop-length, 40px);
  border-radius: 1px;
  background: linear-gradient(transparent, rgba(var(--rain-rgb), .35) 35%, rgba(var(--rain-rgb), .9));
  animation: rainfall var(--drop-speed, 2s) linear var(--drop-delay, 0s) infinite;
  animation-play-state: paused;
}
[data-rain-kind="light"] .rain-layer[data-kind="light"] { opacity: .42; }
[data-rain-kind="moderate"] .rain-layer[data-kind="moderate"] { opacity: .62; }
[data-rain-kind="heavy"] .rain-layer[data-kind="heavy"] { opacity: .82; }
[data-rain-kind="storm"] .rain-layer[data-kind="storm"] { opacity: .95; }
/* Each strength keeps a fixed trajectory. Crossfade whole layers so changing
   weather never restarts, speeds up or shortens a drop already on screen. */
:is([data-rain-kind="light"], [data-rain-leaving="light"]) .rain-layer[data-kind="light"] i,
:is([data-rain-kind="moderate"], [data-rain-leaving="moderate"]) .rain-layer[data-kind="moderate"] i,
:is([data-rain-kind="heavy"], [data-rain-leaving="heavy"]) .rain-layer[data-kind="heavy"] i,
:is([data-rain-kind="storm"], [data-rain-leaving="storm"]) .rain-layer[data-kind="storm"] i { animation-play-state: running; }
.sky-rain-mist {
  inset: 24% -15% -10%;
  background: radial-gradient(ellipse 75% 12% at 55% 48%, #a9c1d550, transparent), radial-gradient(ellipse 90% 16% at 25% 67%, #b3c9df38, transparent);
  animation: fog-flow 12s ease-in-out infinite alternate; animation-play-state: paused;
}
[data-rain-kind="heavy"] .sky-rain-mist { opacity: .55; }
[data-rain-kind="storm"] .sky-rain-mist { opacity: .9; }
:is([data-rain-kind="heavy"], [data-rain-kind="storm"], [data-rain-leaving="heavy"], [data-rain-leaving="storm"]) .sky-rain-mist { animation-play-state: running; }

/* Local cloud illumination and a faint fork distinguish thunderstorms. No
   full-screen white flash; the slow pulse is completely disabled for reduced motion. */
.sky-lightning { transition: opacity .8s ease; }
.storm-glow, .storm-bolt { position: absolute; inset: 0; width: 100%; height: 100%; }
.storm-glow { background: radial-gradient(ellipse 28% 25% at 75% 12%, #d9e8ff8c, transparent 100%); animation: storm-illumination 22s ease-out -3s infinite; animation-play-state: paused; }
.storm-bolt { stroke: #d7e9ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #bad9ff88); animation: storm-lightning 22s ease-out -3s infinite; animation-play-state: paused; }
[data-weather="storm"] .sky-lightning { opacity: 1; }
[data-weather="storm"] :is(.storm-glow, .storm-bolt) { animation-play-state: running; }

.sky-fog {
  inset: -10%;
  background: linear-gradient(180deg, #b6c9da16, #9cafc03a 35%, transparent 85%), radial-gradient(ellipse 90% 16% at 20% 27%, #c3d0db80, transparent), radial-gradient(ellipse 75% 20% at 85% 45%, #b6c8d977, transparent), radial-gradient(ellipse 100% 12% at 35% 62%, #c2cbd35c, transparent);
  animation: fog-flow 35s ease-in-out infinite alternate;
  animation-play-state: paused;
}
[data-atmosphere="fog"] .sky-fog { opacity: 1; animation-play-state: running; }
[data-atmosphere-leaving="fog"] .sky-fog { animation-play-state: running; }
[data-atmosphere="fog"] .sky-glow { opacity: .1; }
.sky-mist {
  inset: -5%;
  background: radial-gradient(ellipse 100% 6% at 25% 39%, #cedae480, transparent), radial-gradient(ellipse 85% 8% at 80% 58%, #b7c9db70, transparent);
  animation: fog-flow 42s ease-in-out infinite alternate; animation-play-state: paused;
}
[data-atmosphere="mist"] .sky-mist { opacity: .9; animation-play-state: running; }
[data-atmosphere-leaving="mist"] .sky-mist { animation-play-state: running; }
.sky-haze { background: linear-gradient(180deg, #b7a48632, #b6a18b66 36%, #9e938d38 63%, transparent 88%); }
[data-atmosphere="haze"] .sky-haze { opacity: .8; }
[data-atmosphere="haze"] .sky-glow { opacity: .15; }
.sky-warmth { inset: -8%; background: radial-gradient(ellipse at 68% 18%, #e6a15680, #c3773f22 46%, transparent 72%); animation: heat-drift 16s ease-in-out infinite alternate; animation-play-state: paused; }
[data-atmosphere="warm"] .sky-warmth { opacity: .45; }
[data-atmosphere="hot"] .sky-warmth { opacity: .85; animation-play-state: running; }
[data-atmosphere-leaving="hot"] .sky-warmth { animation-play-state: running; }
.sky-cold { background: radial-gradient(ellipse at 20% 12%, #8bb9e775, transparent 62%), linear-gradient(180deg, #608ab520, transparent 75%); }
[data-atmosphere="cool"] .sky-cold { opacity: .45; }
[data-atmosphere="cold"] .sky-cold { opacity: .85; }
.sky-humidity { inset: -5%; background: radial-gradient(ellipse 100% 16% at 15% 23%, #c5e0e766, transparent), radial-gradient(ellipse 90% 12% at 85% 50%, #cde3e64d, transparent); animation: fog-flow 55s ease-in-out infinite alternate; animation-play-state: paused; }
[data-atmosphere="humid"] .sky-humidity { opacity: .72; animation-play-state: running; }
[data-atmosphere-leaving="humid"] .sky-humidity { animation-play-state: running; }
.sky-dry { background: radial-gradient(ellipse at 80% 24%, #d7b47f55, #baa98c20 55%, transparent 80%); }
[data-atmosphere="dry"] .sky-dry { opacity: .6; }
.sky-wind::before, .sky-wind::after {
  content: ''; position: absolute; left: -60%; top: 20%; width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, #bcd6ef99, transparent);
  box-shadow: 80px 85px 0 #adbdce32, -40px 220px 0 #adbdce28;
  animation: wind-pass 6s linear infinite;
  animation-play-state: paused;
}
.sky-wind::after { top: 37%; animation-delay: -3s; animation-duration: 9s; }
[data-weather="wind"] .sky-wind { opacity: 1; }
[data-weather="storm"] .sky-wind { opacity: .5; }
[data-weather="wind"] .sky-wind::before, [data-weather="wind"] .sky-wind::after,
[data-weather="storm"] .sky-wind::before, [data-weather="storm"] .sky-wind::after,
[data-weather-leaving="wind"] .sky-wind::before, [data-weather-leaving="wind"] .sky-wind::after,
[data-weather-leaving="storm"] .sky-wind::before, [data-weather-leaving="storm"] .sky-wind::after { animation-play-state: running; }

.sky-shade {
  opacity: 1;
  background: linear-gradient(180deg, #05070b18 0%, transparent 24%, #070a1052 48%, #07090edb 80%, #07090ef5 100%), radial-gradient(ellipse at 50% 25%, transparent 30%, #06090e7a 100%);
}

/* Daylight remains light even when HKO reports rain or the API is unavailable. */
[data-theme="light"] .ambient-sky { background: #deddd8; }
[data-theme="light"] .sky-shade {
  background: linear-gradient(180deg, #fffaf208, transparent 35%, #f8f4ec55 74%, #f8f4ecdd 100%);
}
[data-theme="light"] .sky-orb { background: #fff9e9; box-shadow: 0 0 35px 12px #fff9dd80, 0 0 150px 60px #ffcc7a30; }
[data-theme="light"] .sky-glow { background: radial-gradient(ellipse at 74% 17%, #ffd79c42, transparent 48%); }
[data-theme="light"][data-weather="cloud"] .ambient-sky { --cloud-opacity: .32; }
[data-theme="light"][data-weather="rain"] .ambient-sky { --tone-opacity: .55; --cloud-opacity: .4; }
[data-theme="light"][data-weather="storm"] .ambient-sky { --tone-opacity: .2; --cloud-opacity: .55; }
[data-theme="light"][data-weather="storm"] .sky-glow { background: radial-gradient(ellipse at 75% 25%, #a4b8d142, transparent 45%); }
/* Sunny intervals retain a sun/moon behind broken clouds, including brief showers. */
[data-cloud-cover="broken"] .ambient-sky { --cloud-opacity: .28; --tone-opacity: .8; }
[data-theme="light"][data-cloud-cover="broken"] .ambient-sky { --cloud-opacity: .2; --tone-opacity: .85; }
[data-cloud-cover="overcast"][data-weather="cloud"] .ambient-sky { --cloud-opacity: .66; --tone-opacity: .6; }
[data-theme="light"][data-cloud-cover="overcast"][data-weather="cloud"] .ambient-sky { --cloud-opacity: .48; --tone-opacity: .55; }
[data-theme="light"] .sky-rain { --rain-rgb: 76, 97, 121; }
[data-theme="light"] .sky-fog { background: linear-gradient(180deg, #c5d0d633, #e6edf0aa 40%, transparent 85%), radial-gradient(ellipse 90% 16% at 20% 27%, #ffffffe6, transparent), radial-gradient(ellipse 75% 20% at 85% 45%, #d1dce5bb, transparent), radial-gradient(ellipse 100% 12% at 35% 62%, #ffffffc4, transparent); }
[data-theme="light"] .sky-mist { background: radial-gradient(ellipse 100% 6% at 25% 39%, #ffffffed, transparent), radial-gradient(ellipse 85% 8% at 80% 58%, #b1c4d073, transparent); }
[data-theme="light"] .sky-rain-mist { background: radial-gradient(ellipse 75% 12% at 55% 48%, #869caf55, transparent), radial-gradient(ellipse 90% 16% at 25% 67%, #aebfcf44, transparent); }
[data-theme="light"] .sky-wind::before, [data-theme="light"] .sky-wind::after { background: linear-gradient(90deg, transparent, #506a8599, transparent); box-shadow: 80px 85px 0 #71869c40, -40px 220px 0 #71869c35; }
[data-theme="light"] .storm-bolt { stroke: #f6fbff; filter: drop-shadow(0 0 5px #698bbca8); }
[data-theme="light"] .sky-humidity { background: radial-gradient(ellipse 100% 16% at 15% 23%, #a8c7d066, transparent), radial-gradient(ellipse 90% 12% at 85% 50%, #dceaf099, transparent); }
/* Cloud density and ambient light also respond to the rain strength. Sunny
   showers retain their broken-cloud treatment above. */
[data-rain-kind="light"][data-cloud-cover="normal"] .ambient-sky { --cloud-opacity: .34; --tone-opacity: .72; }
[data-rain-kind="heavy"] .ambient-sky { --cloud-opacity: .7; --tone-opacity: .28; }
[data-rain-kind="storm"] .ambient-sky { --cloud-opacity: .85; --tone-opacity: .12; }
[data-theme="light"][data-rain-kind="light"][data-cloud-cover="normal"] .ambient-sky { --cloud-opacity: .25; --tone-opacity: .8; }
[data-theme="light"][data-rain-kind="heavy"] .ambient-sky { --cloud-opacity: .52; --tone-opacity: .35; }
[data-theme="light"][data-rain-kind="storm"] .ambient-sky { --cloud-opacity: .64; --tone-opacity: .18; }
.sky-paused .ambient-sky *, .sky-paused .ambient-sky *::before, .sky-paused .ambient-sky *::after { animation-play-state: paused !important; }
@keyframes cloud-crossing { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(4%, 2%, 0); } }
@keyframes cloud-return { from { transform: translate3d(4%, 0, 0) scaleX(-1); } to { transform: translate3d(-3%, -2%, 0) scaleX(-1); } }
@keyframes rainfall { from { transform: translate3d(0, 0, 0) rotate(var(--rain-angle)); } to { transform: translate3d(calc(-1 * var(--rain-travel)), calc(100vh + 340px), 0) rotate(var(--rain-angle)); } }
@keyframes fog-flow { from { transform: translate3d(-4%, -1%, 0); } to { transform: translate3d(4%, 1%, 0); } }
@keyframes wind-pass { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translate3d(200%, -16px, 0); opacity: 0; } }
@keyframes heat-drift { from { transform: translate3d(-1%, 0, 0) scale(1); } to { transform: translate3d(1%, -2%, 0) scale(1.04); } }
@keyframes storm-illumination { 0%, 12%, 100% { opacity: .03; } 3% { opacity: .38; } 7% { opacity: .08; } }
@keyframes storm-lightning { 0%, 12%, 100% { opacity: .12; } 3% { opacity: .9; } 7% { opacity: .18; } }
@media (max-width: 620px) {
  .sky-clouds { width: 220%; left: -60%; height: 62%; top: -10%; }
  .sky-clouds-near { left: -72%; top: 5%; }
  .sky-orb { left: 72%; top: 13%; }
  .rain-layer i:nth-child(2n) { display: none; }
}
/* The low evening sun stays weather-dependent on both desktop and mobile. */
[data-period="dusk"] .sky-orb {
  top: var(--dusk-sun-top, 43.3333%); left: 74%;
  width: clamp(44px, 5.5vw, 78px);
  background: #ffdc9d;
  box-shadow: 0 0 35px 12px #f5a96965, 0 0 130px 55px #ee8d6328;
}
[data-period="dusk"][data-sunlight="full"] .sky-orb { opacity: calc(.78 * var(--dusk-sun, 1)); }
[data-period="dusk"][data-sunlight="partial"] .sky-orb { opacity: calc(.46 * var(--dusk-sun, 1)); }
@media (prefers-reduced-motion: reduce) {
  .ambient-sky *, .ambient-sky *::before, .ambient-sky *::after { animation: none !important; transition: none !important; }
  .sky-rain, .sky-wind, .sky-lightning { display: none; }
}