From 238c56eba4a2076d0a7b7bf9defbdeadcda07f8d Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 10:17:35 -0300
Subject: [PATCH] Fix meteor animation: animate transform instead of static
 translate

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 plugin/contents/ui/dancer.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index 90756d9..cf53be8 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -122,10 +122,10 @@ html, body {
   animation: meteorFall linear forwards;
 }
 @keyframes meteorFall {
-  0%   { opacity: 0; }
+  0%   { opacity: 0; transform: rotate(var(--rot)) translateY(0); }
   5%   { opacity: 1; }
   85%  { opacity: 1; }
-  100% { opacity: 0; }
+  100% { opacity: 0; transform: rotate(var(--rot)) translateY(var(--dist)); }
 }
 
 /* ============================================================
@@ -911,13 +911,13 @@ function spawnMeteor() {
   const dur   = 1.2 + Math.random() * 1.8;          // seconds
   const color = `rgba(${180+Math.random()*75|0},${180+Math.random()*75|0},255,0.9)`;
   el.style.cssText = `
+    --rot:${angle}deg;
+    --dist:${(window.innerHeight + len * 2)}px;
     left:${x}%; top:${-len}px;
     height:${len}px;
     background:linear-gradient(to bottom, transparent, ${color});
-    transform:rotate(${angle}deg);
     animation-duration:${dur}s;
     animation-name:meteorFall;
-    translate:0 ${(window.innerHeight + len) * 1.3}px;
   `;
   document.querySelector('.scene').appendChild(el);
   setTimeout(() => el.remove(), dur * 1000);