fix: keep thunderstorm effect visible in light theme

components/weather/weather-effects.tsx

@@ -2,34 +2,121 @@
 
 import { motion, useReducedMotion } from "framer-motion";
 
-const rainDrops = Array.from({ length: 12 }, (_, index) => ({
+const rainDrops = Array.from({ length: 32 }, (_, index) => ({
-  left: `${(index * 43 + 7) % 101}%`,
+  left: `${(index * 29 + 7) % 101}%`,
-  delay: (index % 9) * 0.18,
+  delay: (index % 16) * 0.08,
-  duration: 1.1 + (index % 4) * 0.18,
+  duration: 0.82 + (index % 5) * 0.1,
+  lengthClass: index % 3 === 0 ? "h-16" : index % 3 === 1 ? "h-12" : "h-9",
+  opacity: index % 3 === 0 ? 0.58 : index % 3 === 1 ? 0.48 : 0.36,
 }));
 
+const mistDrops = Array.from({ length: 18 }, (_, index) => ({
+  left: `${(index * 37 + 19) % 101}%`,
+  delay: (index % 9) * 0.16,
+  duration: 1.35 + (index % 4) * 0.12,
+}));
+
+const lightningBolts = [
+  {
+    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 }) {
   const reduceMotion = useReducedMotion();
   const isRaining = (precipitation10m ?? 0) > 0;
 
   return (
     <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
-      {isRaining && rainDrops.map((drop, index) => (
+      {isRaining && (
+        <>
+          {rainDrops.map((drop, index) => (
             <motion.span
               key={`rain-${index}`}
-          initial={{ y: "-12vh", opacity: 0 }}
+              initial={{ y: "-18vh", opacity: 0 }}
-          animate={reduceMotion ? { opacity: 0.18 } : { y: ["-12vh", "115vh"], opacity: [0, 0.22, 0] }}
+              animate={reduceMotion ? { y: `${(index % 8) * 14}vh`, opacity: 0.28 } : { y: ["-18vh", "118vh"], opacity: [0, drop.opacity, 0] }}
               transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
-          className="absolute -top-8 h-10 w-px rotate-[8deg] rounded-full bg-foreground/35"
+              className={`absolute -top-12 w-0.5 rotate-[10deg] rounded-full bg-foreground/70 shadow-[0_0_8px_hsl(var(--foreground)/0.18)] ${drop.lengthClass}`}
               style={{ left: drop.left }}
             />
           ))}
-      {thunderstorm && (
+          {mistDrops.map((drop, index) => (
-        <motion.div
+            <motion.span
-          animate={reduceMotion ? { opacity: 0.08 } : { opacity: [0, 0, 0.16, 0, 0.08, 0] }}
+              key={`mist-${index}`}
-          transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
+              initial={{ y: "-10vh", opacity: 0 }}
-          className="absolute inset-0 bg-foreground"
+              animate={reduceMotion ? { y: `${(index % 6) * 18}vh`, opacity: 0.16 } : { y: ["-10vh", "112vh"], opacity: [0, 0.26, 0] }}
+              transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
+              className="absolute -top-8 h-7 w-px rotate-[10deg] rounded-full bg-accent/55"
+              style={{ left: drop.left }}
             />
+          ))}
+        </>
+      )}
+      {thunderstorm && (
+        <>
+          {lightningBolts.map((bolt, index) => (
+            <motion.svg
+              key={`lightning-${index}`}
+              viewBox="0 0 96 176"
+              preserveAspectRatio="xMidYMid meet"
+              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] }}
+              transition={{ duration: 3.6, repeat: Infinity, repeatDelay: 2.4, delay: bolt.delay }}
+              className={`absolute text-foreground dark: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>
+          ))}
+        </>
       )}
     </div>
   );

components/weather/weather-hero.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { AlertTriangle, Droplets, Gauge, MapPin, Navigation, Umbrella, Wind } from "lucide-react";
 import {
@@ -19,6 +20,8 @@ import { WeatherIcon } from "@/components/weather/weather-icon";
 import { WeatherEffects } from "@/components/weather/weather-effects";
 import { useI18n } from "@/lib/i18n";
 
+type DevWeatherEffectOverride = "rain" | "thunderstorm" | "none";
+
 function moodAccentClass(mood: WeatherMood) {
   return {
     warm: "border-accent/25 bg-accent/10 text-accent",
@@ -30,8 +33,17 @@ function moodAccentClass(mood: WeatherMood) {
   }[mood];
 }
 
+function readDevWeatherEffectOverride(): DevWeatherEffectOverride | null {
+  if (process.env.NODE_ENV !== "development" || typeof window === "undefined") return null;
+  const effect = new URLSearchParams(window.location.search).get("effect");
+  if (effect === "rain" || effect === "thunderstorm" || effect === "none") return effect;
+  if (effect === "storm") return "thunderstorm";
+  return null;
+}
+
 export function WeatherHero({ station, currentWeather, currentWeatherLoading = false, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; currentWeatherLoading?: boolean; locationName?: string; distanceKm?: number }) {
   const { language, t } = useI18n();
+  const [devEffectOverride, setDevEffectOverride] = useState<DevWeatherEffectOverride | null>(null);
   const displayedLocationName = locationName ?? station.name;
   const hasFullHybridAnalysis = currentWeather?.coverage === "full" || currentWeather?.coverage === "hourly";
   const hasPartialHybridAnalysis = currentWeather?.coverage === "precipitation-only";
@@ -55,6 +67,24 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
     { icon: Umbrella, label: currentWeather?.precipitation10m !== null && currentWeather?.precipitation10m !== undefined ? t("weather.rainfall10m") : t("weather.rainfallTotal"), value: formatRainfall(displayedStation.rainfall, language) },
     { icon: Gauge, label: t("weather.pressure"), value: formatPressure(displayedStation.pressure, language) },
   ];
+  const effectPrecipitation10m = devEffectOverride === "rain" || devEffectOverride === "thunderstorm"
+    ? 0.1
+    : devEffectOverride === "none"
+      ? 0
+      : currentWeather?.precipitation10m;
+  const effectThunderstorm = devEffectOverride === "thunderstorm"
+    ? true
+    : devEffectOverride === "rain" || devEffectOverride === "none"
+      ? false
+      : currentWeather?.condition === "thunderstorm";
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+    const updateOverride = () => setDevEffectOverride(readDevWeatherEffectOverride());
+    updateOverride();
+    window.addEventListener("popstate", updateOverride);
+    return () => window.removeEventListener("popstate", updateOverride);
+  }, []);
 
   return (
     <motion.section
@@ -63,7 +93,7 @@ export function WeatherHero({ station, currentWeather, currentWeatherLoading = f
       transition={{ duration: 0.55, ease: "easeOut" }}
       className="relative isolate overflow-hidden rounded-panel border border-border/70 bg-surface-raised px-5 py-6 shadow-card sm:px-8 sm:py-8 lg:px-10"
     >
-      <WeatherEffects precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
+      <WeatherEffects precipitation10m={effectPrecipitation10m} thunderstorm={effectThunderstorm} />
       <div className="relative z-10">
         <div>
           <div className="flex flex-wrap items-center gap-2">

docs/weather-logic.md

@@ -93,3 +93,16 @@ Hero aktualnej pogody używa uproszczonego moodu do wyboru ikony, tekstu i małe
 | `mild` | pozostałe przypadki |
 
 Warstwa efektów wizualnych jest ograniczona do subtelnych efektów informacyjnych: kropli przy lokalnym opadzie oraz błysku przy burzy. Mood hero jest heurystyką, a nie pełną klasyfikacją sterowaną kodem warunków IMGW Hybrid.
+
+## Podgląd Efektów w Development
+
+W trybie deweloperskim można wymusić samą nakładkę efektu na karcie pogody przez parametr URL. Nie zmienia to danych pogodowych, temperatury, opisu ani ikon.
+
+```text
+/?effect=rain
+/?effect=thunderstorm
+/?effect=storm
+/?effect=none
+```
+
+Ten mechanizm działa tylko przy `NODE_ENV=development`, np. podczas `npm run dev`. Produkcyjny build ignoruje te parametry i używa wyłącznie rzeczywistych danych pogodowych.