/* ============================================================
   WEATHER EFFECTS
   Controlled by body classes:
     .adaptive-weather  – master switch (future "Adaptive interface" setting)
     .weather-rain      – enable rain, clouds, wet-screen effect
   All layers are pointer-events: none so UI stays fully interactive.
============================================================ */

:root {
  --we-pixel-size: 1px;
}

@media (min-width: 700px), (min-height: 700px) {
  :root { --we-pixel-size: 2px; }
}

/* ---- CLOUD ZONES ----------------------------------------- */

.cloud-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 35vh;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

body.adaptive-weather.weather-rain .cloud-zone { opacity: 1; }

.cloud-zone-back  { z-index: 9; }
.cloud-zone-front { z-index: 50; }

.cloud-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  display: flex;
  will-change: transform;
}

.cloud-track-slow { animation: weCloudLoop 34s linear infinite; }
.cloud-track-fast { animation: weCloudLoop 22s linear infinite; }

.cloud-set {
  position: relative;
  width: 50%;
  height: 100%;
  flex: 0 0 50%;
}

.cloud {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(118, 142, 182, .18), rgba(66, 92, 130, .34));
  filter: blur(12px);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: inherit;
}

.cloud::before { width: 58%; height: 95%; left: 8%;  bottom: 30%; }
.cloud::after  { width: 42%; height: 78%; right: 12%; bottom: 38%; }

.cloud-zone-front .cloud {
  background: linear-gradient(180deg, rgba(158, 182, 215, .16), rgba(82, 108, 146, .28));
  filter: blur(10px);
}

/* back-layer cloud positions */
.cloud-a { top: 11%; left: 2%;  width: 34%; height: 13%; opacity: .34; }
.cloud-b { top: 19%; left: 36%; width: 26%; height: 11%; opacity: .28; }
.cloud-c { top: 6%;  left: 64%; width: 30%; height: 12%; opacity: .22; }
.cloud-d { top: 24%; left: 76%; width: 22%; height: 10%; opacity: .24; }

/* front-layer cloud positions */
.cloud-e { top: 15%; left: -2%; width: 38%; height: 15%; opacity: .18; }
.cloud-f { top: 5%;  left: 42%; width: 24%; height: 10%; opacity: .14; }
.cloud-g { top: 20%; left: 68%; width: 34%; height: 13%; opacity: .20; }


/* ---- RAIN LAYERS ----------------------------------------- */

.rain-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -120%;
  bottom: auto;
  height: 240%;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.rain-back {
  z-index: 55;
  background-image:
    radial-gradient(ellipse 1px 5px   at  14px  22px, rgba(155,210,255,.24) 0 60%, transparent 72%),
    radial-gradient(ellipse 1px 4px   at  92px  74px, rgba(155,210,255,.18) 0 60%, transparent 72%),
    radial-gradient(ellipse 1px 6px   at 166px 132px, rgba(155,210,255,.16) 0 60%, transparent 72%),
    radial-gradient(ellipse 1px 5px   at 204px 198px, rgba(155,210,255,.15) 0 60%, transparent 72%),
    radial-gradient(ellipse 1px 4px   at  58px 211px, rgba(155,210,255,.14) 0 60%, transparent 72%);
  background-size: 190px 230px;
  animation: weRainFallBack 1.47s linear infinite;
  filter: blur(.15px);
}

.rain-front {
  z-index: 57;
  background-image:
    radial-gradient(ellipse 1.2px 7px at  36px  28px, rgba(225,245,255,.44) 0 58%, transparent 72%),
    radial-gradient(ellipse 1px   5px at 142px  86px, rgba(225,245,255,.32) 0 58%, transparent 72%),
    radial-gradient(ellipse 1px   4px at 238px 184px, rgba(225,245,255,.26) 0 58%, transparent 72%),
    radial-gradient(ellipse 1.1px 6px at 288px  64px, rgba(225,245,255,.28) 0 58%, transparent 72%),
    radial-gradient(ellipse 1px   5px at  78px 232px, rgba(225,245,255,.24) 0 58%, transparent 72%),
    radial-gradient(ellipse 1px   4px at 188px 292px, rgba(225,245,255,.22) 0 58%, transparent 72%);
  background-size: 250px 300px;
  animation: weRainFallFront 1.13s linear infinite;
  filter: blur(.22px);
}

body.adaptive-weather.weather-rain .rain-back  { opacity: .72; }
body.adaptive-weather.weather-rain .rain-front { opacity: .70; }
body.adaptive-weather.weather-rain .cloud-m { opacity: .28; }
body.adaptive-weather.weather-rain .cloud-n { opacity: .26; }
body.adaptive-weather.weather-rain .cloud-o { opacity: .14; }


/* ---- WET SCREEN (bottom 20%) ----------------------------- */

.wet-glass-layer {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  bottom: 0;
  height: 20vh;
  pointer-events: none;
  z-index: 44;
  opacity: 0;
  overflow: hidden;
  image-rendering: pixelated;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(77, 142, 196, .035) 34%,
    rgba(113, 187, 240, .075) 100%
  );
  backdrop-filter: blur(.18px) saturate(115%);
  -webkit-backdrop-filter: blur(.18px) saturate(115%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 18%, black 46%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 18%, black 46%, black 100%);
  transition: opacity 0.8s ease;
}

body.adaptive-weather.weather-rain .wet-glass-layer { opacity: .82; }

/* Sparse square pixel groups — group A */
.wet-glass-layer::before,
.wet-glass-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  pointer-events: none;
}

.wet-glass-layer::before {
  background:
    linear-gradient(rgba(235,248,255,.22) 0 0)  6%   14%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.18) 0 0)  8%   14%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.18) 0 0)  15%  34%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.18) 0 0)  16.5% 35.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.20) 0 0)  24%  18%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.15) 0 0)  25.5% 18%  / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.16) 0 0)  31%  54%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.16) 0 0)  31%  55.8% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.24) 0 0)  38%  27%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.18) 0 0)  39.4% 28.4% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.18) 0 0)  46%  43%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.16) 0 0)  47.4% 43%  / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.20) 0 0)  55%  22%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.16) 0 0)  55%  23.8% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.18) 0 0)  63%  61%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.18) 0 0)  64.5% 61%  / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.22) 0 0)  71%  30%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.18) 0 0)  72.4% 31.4% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.16) 0 0)  79%  47%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.16) 0 0)  79%  48.8% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.18) 0 0)  86%  21%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.14) 0 0)  87.5% 21%  / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.15) 0 0)  92%  56%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.15) 0 0)  93.5% 57.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.16) 0 0)  10%  74%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.14) 0 0)  11.5% 75.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.14) 0 0)  27%  82%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.14) 0 0)  43%  78%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.18) 0 0)  58%  86%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.14) 0 0)  74%  80%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.14) 0 0)  89%  88%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat;
  opacity: .52;
  animation: wePixelGroupPulseA 3.6s ease-in-out infinite;
}

/* Sparse square pixel groups — group B (offset phase) */
.wet-glass-layer::after {
  background:
    linear-gradient(rgba(235,248,255,.16) 0 0)  4%   42%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.14) 0 0)  5.5% 43.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.14) 0 0)  13%  20%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.16) 0 0)  20%  62%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.14) 0 0)  21.5% 62%  / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.14) 0 0)  29%  28%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.14) 0 0)  35%  70%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.16) 0 0)  36.5% 71.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.12) 0 0)  44%  16%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.12) 0 0)  51%  52%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.16) 0 0)  52.5% 53.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.13) 0 0)  60%  32%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.12) 0 0)  68%  74%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.15) 0 0)  69.5% 75.5% / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.12) 0 0)  78%  24%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.12) 0 0)  84%  63%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.14) 0 0)  85.5% 63%  / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.12) 0 0)  94%  36%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.12) 0 0)  11%  90%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.14) 0 0)  33%  90%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(255,231,148,.12) 0 0)  50%  84%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(125,210,255,.12) 0 0)  66%  92%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat,
    linear-gradient(rgba(235,248,255,.14) 0 0)  82%  86%   / var(--we-pixel-size) var(--we-pixel-size) no-repeat;
  opacity: .30;
  filter: blur(.08px);
  animation: wePixelGroupPulseB 3.6s ease-in-out infinite;
}


/* ---- SPLASH + BOUNCE DROPS ------------------------------- */

.splash-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 180;
}

.we-rebound-drop,
.we-falling-drop {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 10px;
  border-radius: 999px 999px 999px 999px / 70% 70% 100% 100%;
  background: linear-gradient(180deg,
    rgba(240,250,255,.98),
    rgba(160,220,255,.72) 55%,
    rgba(90,170,235,.26));
  box-shadow: 0 0 6px rgba(135, 205, 255, .28);
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
}

.we-rebound-drop {
  width: 3px;
  height: 8px;
  opacity: .94;
}

.we-impact-splash {
  position: absolute;
  width: 12px;
  height: 8px;
  border-top: 1px solid rgba(220, 245, 255, .9);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 -1px 8px rgba(135, 205, 255, .22);
  pointer-events: none;
  animation: weImpactSplash .46s ease-out forwards;
}

.we-impact-splash::before,
.we-impact-splash::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 2px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240,250,255,.95), rgba(160,220,255,.25));
}

.we-impact-splash::before { left: 1px;  transform: rotate(-32deg); }
.we-impact-splash::after  { right: 1px; transform: rotate(32deg); }


/* ---- KEYFRAMES ------------------------------------------- */

@keyframes weRainFallBack  { from { transform: translateY(0); } to { transform: translateY(58%); } }
@keyframes weRainFallFront { from { transform: translateY(0); } to { transform: translateY(58%); } }
@keyframes weCloudLoop     { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes wePixelGroupPulseA {
  0%,  16% { opacity: .18; filter: brightness(.95) saturate(1)    hue-rotate(0deg)   drop-shadow(0 0 0   rgba(255,255,255,0)); }
  24%      { opacity: .34; filter: brightness(1.28) saturate(1.55) hue-rotate(-18deg) drop-shadow(0 0 1px rgba(255,226,120,.18)); }
  34%      { opacity: .56; filter: brightness(1.72) saturate(2.0)  hue-rotate(-34deg) drop-shadow(0 0 1px rgba(255,226,120,.34)); }
  46%      { opacity: .62; filter: brightness(1.88) saturate(2.12) hue-rotate(118deg) drop-shadow(0 0 1px rgba(120,196,255,.34)); }
  58%      { opacity: .72; filter: brightness(2.1)  saturate(.72)  hue-rotate(180deg) drop-shadow(0 0 1px rgba(255,255,255,.46)); }
  70%      { opacity: .46; filter: brightness(1.54) saturate(1.22) hue-rotate(150deg) drop-shadow(0 0 1px rgba(255,255,255,.18)); }
  84%,100% { opacity: .20; filter: brightness(1)    saturate(1)    hue-rotate(0deg)   drop-shadow(0 0 0   rgba(255,255,255,0)); }
}

@keyframes wePixelGroupPulseB {
  0%,  34% { opacity: .14; filter: brightness(.95) saturate(1)    hue-rotate(0deg)   drop-shadow(0 0 0   rgba(255,255,255,0)); }
  42%      { opacity: .28; filter: brightness(1.22) saturate(1.45) hue-rotate(-16deg) drop-shadow(0 0 1px rgba(255,226,120,.16)); }
  52%      { opacity: .46; filter: brightness(1.58) saturate(1.9)  hue-rotate(-32deg) drop-shadow(0 0 1px rgba(255,226,120,.28)); }
  64%      { opacity: .54; filter: brightness(1.78) saturate(2.0)  hue-rotate(118deg) drop-shadow(0 0 1px rgba(120,196,255,.3)); }
  76%      { opacity: .66; filter: brightness(1.98) saturate(.68)  hue-rotate(180deg) drop-shadow(0 0 1px rgba(255,255,255,.42)); }
  88%      { opacity: .34; filter: brightness(1.36) saturate(1.12) hue-rotate(150deg) drop-shadow(0 0 1px rgba(255,255,255,.14)); }
  100%     { opacity: .16; filter: brightness(1)    saturate(1)    hue-rotate(0deg)   drop-shadow(0 0 0   rgba(255,255,255,0)); }
}

@keyframes weImpactSplash {
  0%   { opacity: .92; transform: translate(-50%, -50%) scale(.45); }
  100% { opacity: 0;   transform: translate(-50%, -65%) scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-track,
  .rain-back,
  .rain-front,
  .wet-glass-layer::before,
  .wet-glass-layer::after {
    animation: none !important;
  }
}

/* ---- FOG LAYERS ------------------------------------------ */

.fog-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Hide rain / clouds when fog is active */
body.adaptive-weather.weather-fog .cloud-zone    { opacity: 0; }
body.adaptive-weather.weather-fog .rain-back     { opacity: 0 !important; animation-play-state: paused !important; }
body.adaptive-weather.weather-fog .rain-front    { opacity: 0 !important; animation-play-state: paused !important; }
body.adaptive-weather.weather-fog .wet-glass-layer { opacity: 0 !important; }

/* Show fog layers at their intended opacities */
body.adaptive-weather.weather-fog .fog-back  { opacity: 1; }
body.adaptive-weather.weather-fog .fog-road  { opacity: .66; }
body.adaptive-weather.weather-fog .fog-front { opacity: .36; }

.fog-back {
  z-index: 4;
  background:
    radial-gradient(ellipse at 18% 42%, rgba(190, 220, 240, .153), transparent 36%),
    radial-gradient(ellipse at 82% 32%, rgba(165, 205, 235, .119), transparent 34%),
    linear-gradient(180deg, transparent 0%, rgba(135, 175, 205, .068) 50%, transparent 100%);
  filter: blur(18px);
  animation: fogDriftBack 34s ease-in-out infinite alternate;
}

.fog-road {
  z-index: 16;
  inset: 42% -18% -8%;
  background:
    radial-gradient(ellipse at 20% 72%, rgba(210, 230, 240, .187), transparent 38%),
    radial-gradient(ellipse at 70% 64%, rgba(170, 210, 235, .153), transparent 42%),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(210, 230, 245, .038) 34px 52px, transparent 52px 92px);
  filter: blur(22px);
  animation: fogDriftRoad 18s ease-in-out infinite alternate;
}

.fog-front {
  z-index: 60;
  background:
    radial-gradient(ellipse at 12% 48%, rgba(230, 242, 250, .11), transparent 32%),
    radial-gradient(ellipse at 82% 58%, rgba(185, 220, 245, .085), transparent 36%),
    linear-gradient(180deg, transparent 0%, rgba(210, 230, 245, .03) 28%, rgba(210, 230, 245, .076) 80%, transparent 100%);
  filter: blur(12px);
  animation: fogDriftFront 24s ease-in-out infinite alternate;
}

@keyframes fogDriftBack {
  from { transform: translateX(-5%) translateY(-1%); }
  to   { transform: translateX(5%)  translateY(1%); }
}

@keyframes fogDriftRoad {
  from { transform: translateX(6%)  scale(1.03); }
  to   { transform: translateX(-7%) scale(1.08); }
}

@keyframes fogDriftFront {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}


/* ---- STORM ----------------------------------------------- */

/* Extra storm cloud spans — hidden by default, shown only in storm */
.cloud-h { top: 34%; left: 4%;  width: 36%; height: 14%; opacity: 0; transition: opacity 0.8s ease; }
.cloud-i { top: 39%; left: 36%; width: 32%; height: 13%; opacity: 0; transition: opacity 0.8s ease; }
.cloud-j { top: 33%; left: 70%; width: 28%; height: 12%; opacity: 0; transition: opacity 0.8s ease; }
.cloud-k { top: 36%; left: 10%; width: 30%; height: 12%; opacity: 0; transition: opacity 0.8s ease; }
.cloud-l { top: 32%; left: 56%; width: 28%; height: 11%; opacity: 0; transition: opacity 0.8s ease; }

/* Extra cloudy/rain cloud spans — lower row, hidden by default */
.cloud-m { top: 32%; left: 10%; width: 36%; height: 12%; opacity: 0; transition: opacity 0.8s ease; }
.cloud-n { top: 34%; left: 58%; width: 30%; height: 11%; opacity: 0; transition: opacity 0.8s ease; }
.cloud-o { top: 30%; left: 28%; width: 32%; height: 10%; opacity: 0; transition: opacity 0.8s ease; }

/* Storm: show clouds + expand zone height for lower coverage */
body.adaptive-weather.weather-storm .cloud-zone { opacity: 1; height: 45vh; }

/* Storm: darker, heavier cloud colors */
body.adaptive-weather.weather-storm .cloud-zone-back .cloud {
  background: linear-gradient(180deg, rgba(58, 70, 94, .88), rgba(26, 34, 48, .94));
  filter: blur(15px);
}
body.adaptive-weather.weather-storm .cloud-zone-front .cloud {
  background: linear-gradient(180deg, rgba(78, 92, 118, .34), rgba(32, 42, 58, .48));
  filter: blur(10px);
}

/* Storm: reveal extra cloud spans */
body.adaptive-weather.weather-storm .cloud-h { opacity: .78; }
body.adaptive-weather.weather-storm .cloud-i { opacity: .80; }
body.adaptive-weather.weather-storm .cloud-j { opacity: .72; }
body.adaptive-weather.weather-storm .cloud-k { opacity: .16; }
body.adaptive-weather.weather-storm .cloud-l { opacity: .18; }

/* Storm: heavier faster rain */
body.adaptive-weather.weather-storm .rain-back  {
  opacity: .82;
  animation: weRainFallBack .96s linear infinite;
}
body.adaptive-weather.weather-storm .rain-front {
  opacity: .86;
  animation: weRainFallFront .74s linear infinite;
}

/* Storm: show wet-glass */
body.adaptive-weather.weather-storm .wet-glass-layer { opacity: .82; }

/* Storm: hide fog layers */
body.adaptive-weather.weather-storm .fog-layer { opacity: 0 !important; transition: none; }

/* Storm flash — full-screen ambient light burst */
.storm-flash {
  position: absolute;
  inset: 0;
  z-index: 62;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(235, 244, 255, .24), rgba(160, 205, 255, .10));
  opacity: 0;
  mix-blend-mode: screen;
}

body.is-lightning .storm-flash {
  animation: stormFlash .72s linear 1;
}

/* Lightning bolt layer */
.lightning-layer {
  position: absolute;
  inset: 0;
  z-index: 64;
  pointer-events: none;
}

.lightning-bolt {
  position: absolute;
  width: 52px;
  height: 148px;
  opacity: 0;
  filter:
    blur(4.6px)
    drop-shadow(0 0 16px rgba(235, 245, 255, .95))
    drop-shadow(0 0 34px rgba(175, 220, 255, .82))
    drop-shadow(0 0 58px rgba(145, 195, 255, .55));
  mix-blend-mode: screen;
  pointer-events: none;
}

.lightning-bolt path { fill: rgba(240, 248, 255, .68); }

/* Bolt positions — varied x/y so each strike looks different */
.bolt-1 { top: 36px;  right: 72px; }
.bolt-2 { top: 104px; left: 56px;  width: 42px; height: 122px; }
.bolt-3 { top: 68px;  left: 46%;   width: 48px; height: 136px; }
.bolt-4 { top: 122px; right: 18%;  width: 38px; height: 112px; }

.lightning-bolt.active {
  animation: lightningBolt .94s linear 1;
}

@keyframes stormFlash {
  0%   { opacity: 0; }
  8%   { opacity: .88; }
  16%  { opacity: .18; }
  22%  { opacity: .74; }
  32%  { opacity: .08; }
  100% { opacity: 0; }
}

@keyframes lightningBolt {
  0%   { opacity: 0; }
  8%   { opacity: .72; }
  18%  { opacity: .18; }
  28%  { opacity: .62; }
  40%  { opacity: .08; }
  100% { opacity: 0; }
}


/* ---- SNOW ------------------------------------------------ */

.snow-layer,
.frost-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Snow cloud zone: show at softer opacity (lighter winter clouds) */
body.adaptive-weather.weather-snow .cloud-zone-back  { opacity: .5; }
body.adaptive-weather.weather-snow .cloud-zone-front { opacity: .3; }

/* Hide rain, wet-glass, fog, storm when snow active */
body.adaptive-weather.weather-snow .rain-back,
body.adaptive-weather.weather-snow .rain-front      { opacity: 0 !important; animation-play-state: paused !important; }
body.adaptive-weather.weather-snow .wet-glass-layer  { opacity: 0 !important; }
body.adaptive-weather.weather-snow .fog-layer        { opacity: 0 !important; transition: none; }
body.adaptive-weather.weather-snow .storm-flash,
body.adaptive-weather.weather-snow .lightning-bolt   { opacity: 0 !important; }

.snow-back {
  z-index: 28;
  top: -120%;
  bottom: auto;
  height: 240%;
  will-change: transform;
  background-image:
    radial-gradient(circle at 22px  18px,  rgba(255,255,255,.50) 0 1px,   transparent 1.8px),
    radial-gradient(circle at 94px  78px,  rgba(230,245,255,.42) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 166px 142px, rgba(255,255,255,.38) 0 1px,   transparent 1.8px),
    radial-gradient(circle at 204px 198px, rgba(220,240,255,.30) 0 1.2px, transparent 2px),
    radial-gradient(circle at 58px  211px, rgba(255,255,255,.34) 0 1px,   transparent 1.8px),
    radial-gradient(circle at 148px 252px, rgba(230,245,255,.28) 0 1.1px, transparent 2px);
  background-size: 180px 240px;
  animation: snowFallBack 8.8s linear infinite, snowDriftBack 4.8s ease-in-out infinite alternate;
  filter: blur(.25px);
}

body.adaptive-weather.weather-snow .snow-back { opacity: .76; }

.snow-front {
  z-index: 29;
  top: -120%;
  bottom: auto;
  height: 240%;
  will-change: transform;
  background-image:
    radial-gradient(circle at 36px  28px,  rgba(255,255,255,.88) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 142px 86px,  rgba(245,250,255,.78) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 238px 184px, rgba(255,255,255,.70) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 288px 64px,  rgba(245,250,255,.72) 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 78px  232px, rgba(255,255,255,.66) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 188px 292px, rgba(245,250,255,.62) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 312px 248px, rgba(255,255,255,.58) 0 1.1px, transparent 2.1px);
  background-size: 230px 300px;
  animation: snowFallFront 6.4s linear infinite, snowDriftFront 3.6s ease-in-out infinite alternate;
  filter: blur(.1px);
}

body.adaptive-weather.weather-snow .snow-front { opacity: .92; }

.frost-edge {
  z-index: 32;
  background:
    radial-gradient(ellipse at top left,    rgba(235,245,255,.16), transparent 36%),
    radial-gradient(ellipse at top right,   rgba(235,245,255,.14), transparent 34%),
    radial-gradient(ellipse at bottom left, rgba(245,250,255,.22), transparent 34%),
    radial-gradient(ellipse at bottom right,rgba(245,250,255,.22), transparent 34%),
    radial-gradient(ellipse at 8%  100%,    rgba(235,245,255,.24), transparent 24%),
    radial-gradient(ellipse at 92% 100%,    rgba(235,245,255,.24), transparent 24%),
    linear-gradient(180deg, transparent 0 78%, rgba(235,245,255,.05) 88%, rgba(235,245,255,.14) 100%);
  filter: blur(14px);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 60%, black 82%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 60%, black 82%, black 100%);
}

.frost-edge::before,
.frost-edge::after {
  content: "";
  position: absolute;
  bottom: -2%;
  width: 34%;
  height: 22%;
  pointer-events: none;
  filter: blur(8px);
}

.frost-edge::before {
  left: -4%;
  background:
    radial-gradient(circle at 18% 92%, rgba(255,255,255,.34) 0 2px,   transparent 5px),
    radial-gradient(circle at 42% 82%, rgba(235,245,255,.26) 0 1.5px, transparent 4px),
    radial-gradient(circle at 30% 100%, rgba(235,245,255,.20) 0 14%,  transparent 44%),
    linear-gradient(135deg, rgba(235,245,255,.16), transparent 58%);
  opacity: .9;
}

.frost-edge::after {
  right: -4%;
  background:
    radial-gradient(circle at 82% 92%, rgba(255,255,255,.34) 0 2px,   transparent 5px),
    radial-gradient(circle at 58% 82%, rgba(235,245,255,.26) 0 1.5px, transparent 4px),
    radial-gradient(circle at 70% 100%, rgba(235,245,255,.20) 0 14%,  transparent 44%),
    linear-gradient(225deg, rgba(235,245,255,.16), transparent 58%);
  opacity: .9;
}

body.adaptive-weather.weather-snow .frost-edge { opacity: 1; }

@keyframes snowFallBack  { from { transform: translateY(0); } to { transform: translateY(58%); } }
@keyframes snowFallFront { from { transform: translateY(0); } to { transform: translateY(58%); } }
@keyframes snowDriftBack  { from { margin-left: -10px; } to { margin-left:  10px; } }
@keyframes snowDriftFront { from { margin-left: -14px; } to { margin-left:  14px; } }


/* ---- CLOUDY ---------------------------------------------- */

body.adaptive-weather.weather-cloudy .cloud-zone { opacity: 1; }

body.adaptive-weather.weather-cloudy .cloud-zone-back .cloud {
  background: linear-gradient(180deg, rgba(110, 132, 165, .52), rgba(72, 96, 124, .68));
  filter: blur(14px);
}

body.adaptive-weather.weather-cloudy .cloud-zone-front .cloud {
  background: linear-gradient(180deg, rgba(148, 172, 205, .22), rgba(90, 114, 142, .36));
  filter: blur(11px);
}

body.adaptive-weather.weather-cloudy .cloud-a { opacity: .58; }
body.adaptive-weather.weather-cloudy .cloud-b { opacity: .56; }
body.adaptive-weather.weather-cloudy .cloud-c { opacity: .52; }
body.adaptive-weather.weather-cloudy .cloud-d { opacity: .50; }
body.adaptive-weather.weather-cloudy .cloud-e { opacity: .44; }
body.adaptive-weather.weather-cloudy .cloud-f { opacity: .24; }
body.adaptive-weather.weather-cloudy .cloud-g { opacity: .22; }
body.adaptive-weather.weather-cloudy .cloud-m { opacity: .38; }
body.adaptive-weather.weather-cloudy .cloud-n { opacity: .34; }
body.adaptive-weather.weather-cloudy .cloud-o { opacity: .18; }

body.adaptive-weather.weather-cloudy .rain-back,
body.adaptive-weather.weather-cloudy .rain-front     { opacity: 0 !important; animation-play-state: paused !important; }
body.adaptive-weather.weather-cloudy .wet-glass-layer { opacity: 0 !important; }
body.adaptive-weather.weather-cloudy .fog-layer       { opacity: 0 !important; transition: none; }
body.adaptive-weather.weather-cloudy .storm-flash,
body.adaptive-weather.weather-cloudy .lightning-bolt  { opacity: 0 !important; }
body.adaptive-weather.weather-cloudy .snow-back,
body.adaptive-weather.weather-cloudy .snow-front      { opacity: 0 !important; animation-play-state: paused !important; }
body.adaptive-weather.weather-cloudy .frost-edge      { opacity: 0 !important; }


/* ---- WEATHER ANIMATIONS DISABLED -------------------------
   Applied via body.weather-animations-disabled when the
   "Weather animation" setting is turned OFF.
   Weather data/widget/classes remain untouched.
------------------------------------------------------------- */

body.weather-animations-disabled .cloud-zone {
  opacity: 0 !important;
  transition: none !important;
}

body.weather-animations-disabled .cloud-track {
  animation-play-state: paused !important;
}

body.weather-animations-disabled .rain-back,
body.weather-animations-disabled .rain-front {
  opacity: 0 !important;
  transition: none !important;
  animation-play-state: paused !important;
}

body.weather-animations-disabled .wet-glass-layer {
  opacity: 0 !important;
  transition: none !important;
}

body.weather-animations-disabled .wet-glass-layer::before,
body.weather-animations-disabled .wet-glass-layer::after {
  animation-play-state: paused !important;
}

body.weather-animations-disabled .we-impact-splash {
  animation-play-state: paused !important;
}

body.weather-animations-disabled .fog-layer {
  animation-play-state: paused !important;
}

body.weather-animations-disabled .storm-flash,
body.weather-animations-disabled .lightning-bolt {
  opacity: 0 !important;
  animation: none !important;
}

body.weather-animations-disabled .snow-back,
body.weather-animations-disabled .snow-front {
  opacity: 0 !important;
  animation-play-state: paused !important;
}

body.weather-animations-disabled .frost-edge {
  opacity: 0 !important;
}