fix: Remove transform from animations - use brightness/glow only

The transform: scale() was causing markers to move across the screen
because Leaflet's coordinate system doesn't handle transforms well.

Changed approach for both Earthquake and Lightning plugins:
- REMOVED: transform: scale() animations
- ADDED: brightness and drop-shadow effects instead
- Earthquakes: Flash with brightness (3x → 1x) and glow
- Lightning: Flash with brightness (4x → 1x) and gold glow
- Updated timing: 0.8s for both plugins

Result:
- Markers stay in their exact location
- Visual 'explosion' effect at the point
- No movement across screen
- Clean brightness flash to highlight new events

src/plugins/layers/useEarthquakes.js

@@ -119,14 +119,14 @@ export function useLayer({ enabled = false, opacity = 0.9, map = null }) {
             if (circle._path) {
               circle._path.classList.add('earthquake-pulse-new');
               
-              // Remove animation class after it completes (0.6s)
+              // Remove animation class after it completes (0.8s)
               setTimeout(() => {
                 try {
                   if (circle._path) {
                     circle._path.classList.remove('earthquake-pulse-new');
                   }
                 } catch (e) {}
-              }, 600);
+              }, 800);
             }
           } catch (e) {
             console.warn('Could not animate earthquake marker:', e);

src/styles/main.css

@@ -739,7 +739,7 @@ body::before {
    EARTHQUAKE PLUGIN ANIMATIONS
    ============================================ */
 
-/* New earthquake pulse animation */
+/* New earthquake pulse animation - ring only */
 @keyframes earthquake-pulse {
   0% {
     transform: scale(0);
@@ -760,24 +760,28 @@ body::before {
   animation: earthquake-pulse 3s ease-out;
 }
 
-/* Growing dot animation for new earthquakes */
+/* Flash/fade animation for new earthquakes - no transform */
-@keyframes earthquake-grow {
+@keyframes earthquake-flash {
   0% {
-    transform: scale(0);
     opacity: 0;
+    filter: brightness(3) drop-shadow(0 0 8px currentColor);
   }
-  50% {
+  30% {
-    transform: scale(1.5);
     opacity: 1;
+    filter: brightness(2) drop-shadow(0 0 6px currentColor);
+  }
+  60% {
+    opacity: 1;
+    filter: brightness(1.5) drop-shadow(0 0 4px currentColor);
   }
   100% {
-    transform: scale(1);
     opacity: 1;
+    filter: brightness(1) drop-shadow(0 0 0px transparent);
   }
 }
 
 .earthquake-pulse-new {
-  animation: earthquake-grow 0.6s ease-out;
+  animation: earthquake-flash 0.8s ease-out;
 }
 
 /* No animation for regular earthquake markers */
@@ -806,27 +810,23 @@ body::before {
   animation: lightning-pulse 2s ease-out;
 }
 
-/* Flash animation for new lightning strikes */
+/* Flash animation for new lightning strikes - no transform */
 @keyframes lightning-flash {
   0% {
-    transform: scale(0);
     opacity: 0;
-    filter: brightness(2);
+    filter: brightness(3) drop-shadow(0 0 10px gold);
   }
-  30% {
+  20% {
-    transform: scale(1.8);
     opacity: 1;
-    filter: brightness(3);
+    filter: brightness(4) drop-shadow(0 0 12px gold);
   }
-  60% {
+  50% {
-    transform: scale(1.2);
+    opacity: 1;
-    opacity: 0.8;
+    filter: brightness(2.5) drop-shadow(0 0 8px gold);
-    filter: brightness(1.5);
   }
   100% {
-    transform: scale(1);
     opacity: 1;
-    filter: brightness(1);
+    filter: brightness(1) drop-shadow(0 0 0px transparent);
   }
 }