fix: refine thunderstorm weather effect

components/weather/weather-effects.tsx

@@ -17,8 +17,30 @@ const mistDrops = Array.from({ length: 18 }, (_, index) => ({
 }));
 
 const lightningBolts = [
-  "left-[68%] top-[12%] h-28 rotate-[12deg]",
+  {
-  "left-[78%] top-[22%] h-20 rotate-[18deg]",
+    className: "left-[18%] top-[4%] h-44 w-24",
+    path: "M62 0 L42 39 L56 36 L35 88 L48 84 L28 142",
+    delay: 0,
+    opacity: 0.78,
+  },
+  {
+    className: "left-[42%] top-[-4%] h-52 w-28",
+    path: "M38 0 L61 47 L45 43 L72 101 L57 96 L82 164",
+    delay: 0.34,
+    opacity: 0.86,
+  },
+  {
+    className: "right-[12%] top-[22%] h-48 w-24",
+    path: "M70 0 L48 52 L63 49 L36 108 L52 103 L24 170",
+    delay: 0.72,
+    opacity: 0.68,
+  },
+  {
+    className: "right-[34%] top-[44%] h-32 w-20",
+    path: "M28 0 L44 33 L33 31 L52 75 L41 72 L60 116",
+    delay: 1.08,
+    opacity: 0.5,
+  },
 ];
 
 export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) {
@@ -53,14 +75,46 @@ export function WeatherEffects({ precipitation10m, thunderstorm = false }: { pre
       )}
       {thunderstorm && (
         <>
-          {lightningBolts.map((className, index) => (
+          {lightningBolts.map((bolt, index) => (
-            <motion.span
+            <motion.svg
               key={`lightning-${index}`}
-              animate={reduceMotion ? { opacity: 0.2 } : { opacity: [0, 0, 0.82, 0, 0.38, 0] }}
+              viewBox="0 0 96 176"
-              transition={{ duration: 5.5, repeat: Infinity, repeatDelay: 2.2, delay: index * 0.05 }}
+              preserveAspectRatio="xMidYMid meet"
-              className={`absolute w-3 bg-warning/80 shadow-[0_0_24px_hsl(var(--warning)/0.42)] ${className}`}
+              animate={reduceMotion ? { opacity: bolt.opacity * 0.22 } : { opacity: [0, 0, bolt.opacity, bolt.opacity * 0.08, 0], scaleY: [0.98, 0.98, 1.02, 1, 0.99] }}
-              style={{ clipPath: "polygon(46% 0, 100% 0, 62% 38%, 100% 38%, 22% 100%, 44% 52%, 0 52%)" }}
+              transition={{ duration: 3.6, repeat: Infinity, repeatDelay: 2.4, delay: bolt.delay }}
-            />
+              className={`absolute text-white ${bolt.className}`}
+            >
+              <path
+                d={bolt.path}
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                vectorEffect="non-scaling-stroke"
+                opacity="0.06"
+              />
+              <path
+                d={bolt.path}
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.7"
+                vectorEffect="non-scaling-stroke"
+                opacity="0.22"
+              />
+              <path
+                d={bolt.path}
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0.95"
+                vectorEffect="non-scaling-stroke"
+                opacity="0.86"
+              />
+            </motion.svg>
           ))}
         </>
       )}