/* Atmospheric precipitation stays behind the weather labels. */
.weather-precipitation {
 position:absolute; inset:0; z-index:3; overflow:hidden;
 border-radius:inherit; pointer-events:none; contain:paint;
}
.weather-precipitation__haze {
 position:absolute; inset:0;
 background:radial-gradient(ellipse at 70% -20%,rgba(188,209,225,.18),transparent 65%);
}
.weather-precipitation__particles { position:absolute; inset:-24px -20px 0; }
.weather-particle {
 position:absolute; top:0; height:100%; width:1px;
 animation:weather-fall calc(var(--fall-duration) * var(--weather-speed,1.65)) var(--fall-delay) linear infinite;
 will-change:transform; backface-visibility:hidden;
 opacity:var(--particle-opacity);
}
.weather-particle i { position:absolute; display:block; top:0; }
.weather-precipitation--rain .weather-particle i {
 width:1.5px; height:32px; border-radius:999px;
 background:linear-gradient(to bottom,transparent,rgba(201,220,238,.65),rgba(240,247,255,.85));
 transform:rotate(14deg); box-shadow:0 2px 4px rgba(204,228,255,.08);
}
.weather-precipitation--rain .weather-particle:nth-child(3n) i { height:22px; width:2px; }
.weather-precipitation--snow .weather-particle i {
 width:var(--flake-size); height:var(--flake-size); border-radius:50%;
 background:rgba(248,251,255,.95); box-shadow:0 0 5px rgba(224,238,255,.35);
 animation:weather-sway 3.6s var(--fall-delay) ease-in-out infinite alternate;
}
.weather-precipitation--snow .weather-particle:nth-child(3n) i { filter:blur(.8px); }
.weather-precipitation__floor {
 position:absolute; inset:auto 0 0; height:26%;
 background:linear-gradient(to top,rgba(184,207,229,.09),transparent);
}
.weather-precipitation--snow .weather-precipitation__floor {
 height:35%; background:linear-gradient(to top,rgba(224,237,250,.16),transparent);
}
@keyframes weather-fall {
 0% { transform:translate3d(0,-25%,0); }
 100% { transform:translate3d(-18px,125%,0); }
}
@keyframes weather-sway {
 from { transform:translateX(calc(var(--drift) * -1)); }
 to { transform:translateX(var(--drift)); }
}
@media (max-width:767px) {
 .weather-particle:nth-child(3n) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 .weather-precipitation { --weather-speed:3; }
 .weather-precipitation--snow .weather-particle i { animation-duration:7s; }
}

:root:root .glass-card[data-glass-variant=immersive] > .weather-precipitation { filter:none; }

.weather-precipitation--snow { --weather-speed:1.25; }
.weather-precipitation--snow .weather-particle i { will-change:transform; animation-duration:4.8s; }
@media (prefers-reduced-motion:reduce) {
 .weather-precipitation--snow { --weather-speed:2; }
 .weather-precipitation--snow .weather-particle i { animation-duration:7s; }
}