/* Weather lives behind the controls. The quiet centre preserves the big clock. */
body[data-weather] .landscape > .cloud,
body[data-weather] .landscape > #fog,
body[data-weather] .landscape > #weather-particles { display: none; }
.weather-effects {
  --wx-strength: 1; --wx-cloud: #5b7783; --wx-cloud-highlight: #a3b5bb;
  --wx-rain-size: 1; --wx-rain-opacity: .74;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  isolation: isolate; contain: layout paint;
}
.weather-effects[data-intensity="soft"] { --wx-strength: .57; --wx-rain-opacity: .49; --wx-rain-size: .8; }
.wx-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.25s ease; pointer-events: none; }
.weather-effects .wx-layer * { animation-play-state: paused; }
.wx-precip { mask-image: linear-gradient(90deg,#000 0%,#000 18%,#0009 35%,#0005 50%,#0009 65%,#000 82%,#000); }
.wx-readability { position: absolute; inset: 0; background: radial-gradient(ellipse 39% 29% at 50% 44%,#071d2c12,transparent 100%); }

/* Drifting, overlapping cloud silhouettes have distinct distant and near edges. */
.wx-clouds { top: -9%; left: -12%; right: -12%; bottom: auto; height: 58%; mask-image: linear-gradient(#000 0%,#000 54%,transparent 100%); }
.wx-cloud-sheet { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: wx-cloud-drift 42s ease-in-out infinite alternate; }
.wx-cloud-sheet path { fill: var(--wx-cloud); transition: fill 1.6s; }
.wx-cloud-back { opacity: .48; filter: blur(16px); transform: translateX(-2%); }
.wx-cloud-back path { fill: var(--wx-cloud-highlight); }
.wx-cloud-mid { opacity: .7; filter: blur(10px); animation-duration: 57s; animation-delay: -23s; }
.wx-cloud-front { opacity: .8; filter: blur(5px); animation-duration: 72s; animation-delay: -39s; }
.weather-effects[data-weather="cloudy"] .wx-clouds { opacity: calc(.9 * var(--wx-strength)); }
.weather-effects[data-weather="rain"] { --wx-cloud: #203b4e; --wx-cloud-highlight: #73939e; }
.weather-effects[data-weather="rain"] .wx-clouds { opacity: calc(.8 * var(--wx-strength)); }
.weather-effects[data-weather="snow"] { --wx-cloud: #7b929d; --wx-cloud-highlight: #bdcbd1; }
.weather-effects[data-weather="snow"] .wx-clouds { opacity: calc(.65 * var(--wx-strength)); }
.weather-effects[data-weather="storm"] { --wx-cloud: #081622; --wx-cloud-highlight: #3c566a; --wx-rain-size: 1.45; --wx-rain-opacity: .96; }
.weather-effects[data-weather="storm"] .wx-clouds { opacity: 1; height: 64%; }
.weather-effects:is([data-weather="cloudy"],[data-weather="rain"],[data-weather="snow"],[data-weather="storm"]) .wx-clouds * { animation-play-state: running; }

/* Two rainfall depths; delays spread every drop across the whole viewport. */
.wx-rain-far,.wx-rain-near { position: absolute; inset: 0; }
.wx-drop {
  position: absolute; display: block; left: var(--x); top: -14vh;
  width: 1px; height: calc(var(--length) * var(--wx-rain-size));
  opacity: calc(var(--alpha) * var(--wx-rain-opacity));
  background: linear-gradient(180deg,transparent,#dbf2ffb8 76%,#e5f5ff);
  transform: rotate(17deg); border-radius: 100%;
  animation: wx-rain-fall var(--fall) linear var(--delay) infinite;
}
.wx-rain-far { opacity: .54; }
.wx-rain-near .wx-drop { width: 1.35px; box-shadow: 0 0 2px #d3edff26; }
.weather-effects:is([data-weather="rain"],[data-weather="storm"]) .wx-rain { opacity: var(--wx-strength); }
.weather-effects:is([data-weather="rain"],[data-weather="storm"]) .wx-rain * { animation-play-state: running; }
.weather-effects[data-weather="storm"] .wx-rain-far { opacity: .69; }
.weather-effects[data-weather="storm"] .wx-rain-near .wx-drop { width: 1.7px; }
.wx-ground-haze { top: auto; height: 38%; background: radial-gradient(ellipse 80% 64% at 50% 92%,#bad9e838,transparent 80%); }
.weather-effects:is([data-weather="rain"],[data-weather="storm"]) .wx-ground-haze { opacity: calc(.8 * var(--wx-strength)); }
.wx-splashes { top: 77%; bottom: 3%; mask-image: linear-gradient(transparent,#000 28%,#000); }
.wx-splashes i { position: absolute; width: 24px; height: 5px; border: 1px solid #c9e5f264; border-top-color: transparent; border-radius: 50%; animation: wx-ripple var(--fall) ease-out var(--delay) infinite; }
.weather-effects:is([data-weather="rain"],[data-weather="storm"]) .wx-splashes { opacity: calc(.62 * var(--wx-strength)); }
.weather-effects:is([data-weather="rain"],[data-weather="storm"]) .wx-splashes * { animation-play-state: running; }

/* Near flakes are larger and softer; the far field stays sharp. */
.wx-flake {
  position: absolute; top: -12px; left: var(--x); width: var(--size); height: var(--size);
  border-radius: 50%; background: #f4fbff; opacity: var(--alpha);
  box-shadow: 0 0 3px #ecfaff69;
  animation: wx-snow-fall var(--fall) linear var(--delay) infinite;
}
.wx-flake:nth-child(5n) { filter: blur(.7px); }
.wx-flake:nth-child(7n) { border-radius: 1px; clip-path: polygon(42% 0,58% 0,58% 33%,88% 17%,96% 30%,66% 50%,96% 70%,88% 83%,58% 67%,58% 100%,42% 100%,42% 67%,12% 83%,4% 70%,34% 50%,4% 30%,12% 17%,42% 33%); scale: 1.7; }
.weather-effects[data-weather="snow"] .wx-snow { opacity: var(--wx-strength); }
.weather-effects[data-weather="snow"] .wx-snow * { animation-play-state: running; }
.weather-effects[data-weather="snow"] .wx-ground-haze { opacity: calc(.75 * var(--wx-strength)); background: linear-gradient(transparent 5%,#deebf51b 75%,#eaf6ff22); }

/* Fog consists of three different, moving banks; no opaque sheet over the time. */
.wx-mist { top: 18%; bottom: -15%; left: -20%; right: -20%; mask-image: radial-gradient(ellipse at center,#0006 0%,#000 70%); }
.wx-mist i { position: absolute; width: 110%; height: 55%; border-radius: 50%; background: radial-gradient(ellipse,#c8d9dd75,transparent 70%); filter: blur(19px); animation: wx-mist-drift 27s ease-in-out infinite alternate; }
.wx-mist i:nth-child(1) { left: -18%; top: 10%; }
.wx-mist i:nth-child(2) { right: -14%; top: 38%; opacity: .85; animation-duration: 39s; animation-delay: -18s; }
.wx-mist i:nth-child(3) { left: -4%; top: 64%; opacity: .7; animation-duration: 48s; animation-delay: -27s; }
.weather-effects[data-weather="fog"] .wx-mist { opacity: var(--wx-strength); }
.weather-effects[data-weather="fog"] .wx-mist * { animation-play-state: running; }
.weather-effects[data-weather="storm"] .wx-mist { opacity: calc(.13 * var(--wx-strength)); }
.weather-effects[data-weather="storm"] .wx-mist * { animation-play-state: running; }

/* Clear sky rays are visible only in daylight; root supplies data-light-phase. */
.wx-rays { left: -26%; top: -50%; right: -14%; bottom: -40%; background: conic-gradient(from 146deg at 38% 8%,transparent 0deg,#fff4cb18 6deg,transparent 12deg,#fff4cb10 19deg,transparent 29deg,#fff4cb18 37deg,transparent 46deg,#fff4cb0c 59deg,transparent 72deg); transform: rotate(-6deg); mask-image: linear-gradient(#000 0%,#000 45%,transparent 85%); }
.weather-effects[data-weather="clear"] .wx-rays { opacity: calc(.52 * var(--wx-strength) * var(--weather-daylight,1)); }
body:is([data-light-phase="night"],[data-light-phase="neutral"]) .weather-effects .wx-rays { opacity: 0; }
body:is([data-light-phase="dawn"],[data-light-phase="dusk"]) .weather-effects[data-weather="clear"] .wx-rays { opacity: calc(.24 * var(--wx-strength)); }

/* One soft lightning event every nine seconds, alternating sides. */
.wx-thunder { overflow: hidden; }
.weather-effects[data-weather="storm"] .wx-thunder { opacity: var(--wx-strength); }
.wx-lightning { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wx-lightning path { fill: none; stroke: #e8f1ff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: bevel; }
.wx-bolt-echo { opacity: .1; }
.wx-bolt-echo path { stroke-width: 1.1; }
.wx-bolt { opacity: 0; filter: drop-shadow(0 0 4px #9abef8) drop-shadow(0 0 13px #b2d7ff88); }
.wx-bolt-left { animation: wx-lightning-left 18s linear infinite; }
.wx-bolt-right { animation: wx-lightning-right 18s linear infinite; }
.wx-lightning-glow { position: absolute; top: 8%; width: 43%; height: 66%; opacity: 0; background: radial-gradient(ellipse at 45% 32%,#bed8f65c,transparent 68%); }
.wx-glow-left { left: -9%; animation: wx-glow-left 18s linear infinite; }
.wx-glow-right { right: -6%; animation: wx-glow-right 18s linear infinite; }
.weather-effects[data-weather="storm"] .wx-thunder * { animation-play-state: running; }
.weather-effects[data-intensity="soft"] .wx-bolt-echo { opacity: .07; }

@keyframes wx-cloud-drift { from { transform: translate3d(-2%,0,0) scaleX(1.04); } to { transform: translate3d(3%,2%,0) scaleX(1.08); } }
@keyframes wx-rain-fall { from { transform: translate3d(17vw,-4vh,0) rotate(17deg); } to { transform: translate3d(-17vw,128vh,0) rotate(17deg); } }
@keyframes wx-snow-fall { from { transform: translate3d(0,-3vh,0) rotate(0deg); } to { transform: translate3d(var(--drift),110vh,0) rotate(220deg); } }
@keyframes wx-ripple { 0% { opacity: .7; transform: scale(.2); } 80%,100% { opacity: 0; transform: scale(1.8); } }
@keyframes wx-mist-drift { from { transform: translate3d(-6%,2%,0) scale(1); } to { transform: translate3d(8%,-4%,0) scale(1.08); } }
@keyframes wx-lightning-left { 0%,7%,14%,100% { opacity: 0; } 8.7% { opacity: .92; } 10.5% { opacity: .22; } }
@keyframes wx-lightning-right { 0%,57%,64%,100% { opacity: 0; } 58.7% { opacity: .84; } 60.5% { opacity: .19; } }
@keyframes wx-glow-left { 0%,7%,16%,100% { opacity: 0; } 9.4% { opacity: .54; } }
@keyframes wx-glow-right { 0%,57%,66%,100% { opacity: 0; } 59.4% { opacity: .48; } }

/* Reduced mode leaves an informative static composition, including storm traces. */
.weather-effects:is([data-motion="reduced"],[data-motion="off"]) *,
body[data-page-hidden="true"] .weather-effects * { animation-play-state: paused !important; }
.weather-effects:is([data-motion="reduced"],[data-motion="off"]) .wx-bolt,
.weather-effects:is([data-motion="reduced"],[data-motion="off"]) .wx-lightning-glow { animation: none !important; opacity: 0; }
.weather-effects:is([data-motion="reduced"],[data-motion="off"]) .wx-bolt-echo { opacity: .18; }
.weather-effects[data-motion="reduced"] .wx-drop { animation: none !important; top: calc(var(--rest-y) * 1vh); transform: rotate(17deg); opacity: calc(var(--alpha) * .25); }
.weather-effects[data-motion="reduced"] .wx-flake { animation: none !important; top: calc(var(--rest-y) * 1vh); opacity: calc(var(--alpha) * .6); }
.weather-effects:is([data-motion="reduced"],[data-motion="off"]) .wx-splashes { display: none; }
.weather-effects[data-motion="off"] .wx-precip { display: none; }
@media (prefers-reduced-motion: reduce) {
  .weather-effects * { animation: none !important; transition: none !important; }
  .weather-effects .wx-bolt,.weather-effects .wx-lightning-glow { opacity: 0 !important; }
  .weather-effects .wx-bolt-echo { opacity: .18; }
  .weather-effects .wx-drop { top: calc(var(--rest-y) * 1vh); transform: rotate(17deg); opacity: calc(var(--alpha) * .25); }
  .weather-effects .wx-flake { top: calc(var(--rest-y) * 1vh); opacity: calc(var(--alpha) * .6); }
  .weather-effects .wx-splashes { display: none; }
}
@media (max-width: 720px) {
  .weather-effects .wx-drop:nth-child(3n),.weather-effects .wx-flake:nth-child(3n),.weather-effects .wx-splashes i:nth-child(2n) { display: none; }
  .wx-precip { mask-image: linear-gradient(90deg,#000,#0009 20%,#0005 50%,#0009 80%,#000); }
  .wx-rain-near .wx-drop { width: 1px; }
  .wx-clouds { height: 48%; }
  .weather-effects[data-weather="storm"] .wx-clouds { height: 55%; }
  .wx-lightning path { stroke-width: 4.6; }
  .wx-bolt-echo path { stroke-width: 2; }
  .wx-lightning-glow { width: 65%; }
}