From 4b59f40fd55917a73adb29a5aa5d0f220b7e1088 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 22 Mar 2026 00:04:52 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20card=20highlight=20animation=20=E2=80=94?=
 =?UTF-8?q?=20kill=20stagger=20before=20highlight,=20keep=20animation:none?=
 =?UTF-8?q?=20on=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lib/highlight.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/highlight.ts b/frontend/src/lib/highlight.ts
index 4fa4a09..4848a4b 100644
--- a/frontend/src/lib/highlight.ts
+++ b/frontend/src/lib/highlight.ts
@@ -45,17 +45,23 @@ function _highlightCard(card: HTMLElement): void {
 	// Scroll to card
 	card.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-	// Apply highlight via inline style to avoid interfering with stagger animation
-	const saved = card.style.cssText;
+	// Kill the stagger animation first so it won't replay on cleanup
+	card.style.animation = 'none';
+	// Force reflow to commit the "none"
+	void card.offsetHeight;
+	// Now set the highlight animation + z-index above overlay
 	card.style.animation = 'cardHighlight 2s ease-in-out';
 	card.style.position = 'relative';
 	card.style.zIndex = '11';
 
-	// Cleanup after duration — restore original inline styles
+	// Cleanup after duration
 	setTimeout(() => {
-		card.style.cssText = saved;
+		// Set animation to "none" to prevent stagger replay, then remove inline overrides
+		card.style.animation = 'none';
+		card.style.removeProperty('position');
+		card.style.removeProperty('z-index');
 		overlay.classList.remove('active');
-		setTimeout(() => overlay.remove(), 300); // wait for fade-out
+		setTimeout(() => overlay.remove(), 300);
 	}, HIGHLIGHT_DURATION);
 }