feat: add atmospheric cloudy weather theme

components/weather/weather-effects.tsx

@@ -31,6 +31,22 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
 
   return (
     <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
+      {(mood === "cloudy" || mood === "rain") && (
+        <>
+          <motion.div
+            animate={reduceMotion ? undefined : { x: ["-4%", "5%", "-4%"], y: [0, 8, 0], scale: [1, 1.05, 1] }}
+            transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
+            className="absolute -left-24 -top-20 h-52 w-[78%] rounded-[50%] bg-slate-100/30 blur-3xl"
+          />
+          <motion.div
+            animate={reduceMotion ? undefined : { x: ["8%", "-5%", "8%"], y: [0, -6, 0], scale: [1.04, 1, 1.04] }}
+            transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
+            className="absolute -right-24 top-0 h-60 w-[82%] rounded-[50%] bg-slate-300/24 blur-3xl"
+          />
+          <div className="absolute inset-x-0 bottom-0 h-44 bg-gradient-to-t from-slate-100/25 via-slate-200/10 to-transparent" />
+          <div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-slate-950/15 to-transparent" />
+        </>
+      )}
       {mood === "warm" && (
         <motion.div
           animate={reduceMotion ? undefined : { scale: [1, 1.08, 1], opacity: [0.4, 0.58, 0.4] }}

components/weather/weather-icon.tsx

@@ -1,9 +1,10 @@
-import { CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
+import { Cloud, CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
 import type { WeatherMood } from "@/types/imgw";
 
 export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
   const Icon = {
     warm: ThermometerSun,
+    cloudy: Cloud,
     rain: CloudRain,
     wind: Wind,
     cold: Snowflake,