From 6cdd0f18b8f59d499c6f2a1777b61045626b9480 Mon Sep 17 00:00:00 2001
From: trancen <genspark_dev@genspark.ai>
Date: Tue, 3 Feb 2026 17:42:08 +0000
Subject: [PATCH] fix: Remove transform from animations - use brightness/glow
 only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  4 +--
 src/styles/main.css                  | 40 ++++++++++++++--------------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/plugins/layers/useEarthquakes.js b/src/plugins/layers/useEarthquakes.js
index 8321f6d..68c6ca3 100644
--- a/src/plugins/layers/useEarthquakes.js
+++ b/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);
diff --git a/src/styles/main.css b/src/styles/main.css
index 99a8b4f..6db4714 100644
--- a/src/styles/main.css
+++ b/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 */
-@keyframes earthquake-grow {
+/* Flash/fade animation for new earthquakes - no transform */
+@keyframes earthquake-flash {
   0% {
-    transform: scale(0);
     opacity: 0;
+    filter: brightness(3) drop-shadow(0 0 8px currentColor);
   }
-  50% {
-    transform: scale(1.5);
+  30% {
     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% {
-    transform: scale(1.8);
+  20% {
     opacity: 1;
-    filter: brightness(3);
+    filter: brightness(4) drop-shadow(0 0 12px gold);
   }
-  60% {
-    transform: scale(1.2);
-    opacity: 0.8;
-    filter: brightness(1.5);
+  50% {
+    opacity: 1;
+    filter: brightness(2.5) drop-shadow(0 0 8px gold);
   }
   100% {
-    transform: scale(1);
     opacity: 1;
-    filter: brightness(1);
+    filter: brightness(1) drop-shadow(0 0 0px transparent);
   }
 }