From ef852839cd0c0b78ff2abba711ade2947a148cad Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Tue, 14 Apr 2026 10:48:37 +0700
Subject: [PATCH] fix: use separate CSS translate/scale properties for smooth
 animations

Tile pop and merge @keyframes were setting transform: scale() which
overrode transform: translate() used for tile positioning, causing
tiles to jump to (0,0) during animation. Fix by using individual CSS
properties: translate for positioning, scale in keyframes.
---
 bmad/src/app.css                | 10 +++++-----
 bmad/src/components/Grid.svelte |  2 +-
 bmad/src/components/Tile.svelte |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/bmad/src/app.css b/bmad/src/app.css
index a8ba3f3..8b50cf6 100644
--- a/bmad/src/app.css
+++ b/bmad/src/app.css
@@ -55,8 +55,8 @@ body {
 }
 
 @keyframes tile-pop {
-  0% { transform: scale(0); }
-  100% { transform: scale(1); }
+  0% { scale: 0; }
+  100% { scale: 1; }
 }
 
 @keyframes overlay-fade {
@@ -70,9 +70,9 @@ body {
 }
 
 @keyframes tile-merge {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.2); }
-  100% { transform: scale(1); }
+  0% { scale: 1; }
+  50% { scale: 1.2; }
+  100% { scale: 1; }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/bmad/src/components/Grid.svelte b/bmad/src/components/Grid.svelte
index 5dac8a7..8fa4e64 100644
--- a/bmad/src/components/Grid.svelte
+++ b/bmad/src/components/Grid.svelte
@@ -25,7 +25,7 @@
       style="
         width: var(--cell-size);
         height: var(--cell-size);
-        transform: translate(calc({col} * (var(--cell-size) + var(--grid-gap))), calc({row} * (var(--cell-size) + var(--grid-gap))));
+        translate: calc({col} * (var(--cell-size) + var(--grid-gap))) calc({row} * (var(--cell-size) + var(--grid-gap)));
         background: #cdc1b4;
       "
     ></div>
diff --git a/bmad/src/components/Tile.svelte b/bmad/src/components/Tile.svelte
index f0f7c3e..e054284 100644
--- a/bmad/src/components/Tile.svelte
+++ b/bmad/src/components/Tile.svelte
@@ -28,8 +28,8 @@
   style="
     width: var(--cell-size);
     height: var(--cell-size);
-    transform: translate(calc({col} * (var(--cell-size) + var(--grid-gap))), calc({row} * (var(--cell-size) + var(--grid-gap))));
-    transition: transform 100ms ease-in-out;
+    translate: calc({col} * (var(--cell-size) + var(--grid-gap))) calc({row} * (var(--cell-size) + var(--grid-gap)));
+    transition: translate 100ms ease-in-out;
     animation: {animation};
     background: {colors.bg};
     color: {colors.text};