From 4c1d5a892cc35d27c3633900d143d0886cafa4b8 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 22 Mar 2026 00:01:09 +0300
Subject: [PATCH] fix: prevent stagger animation replay after card highlight
 ends

Use inline style.animation instead of CSS class to avoid triggering
stagger-children fadeSlideIn re-animation when highlight is removed.
Restores original inline styles on cleanup.
---
 frontend/src/app.css          |  6 ------
 frontend/src/lib/highlight.ts | 11 +++++++----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 4bbf0b5..ed66cf3 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -190,12 +190,6 @@ a:focus-visible {
 	25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
 }
 
-.card-highlight {
-	animation: cardHighlight 2s ease-in-out;
-	position: relative;
-	z-index: 11;
-}
-
 .nav-dim-overlay {
 	position: fixed;
 	inset: 0;
diff --git a/frontend/src/lib/highlight.ts b/frontend/src/lib/highlight.ts
index 5326ad6..4fa4a09 100644
--- a/frontend/src/lib/highlight.ts
+++ b/frontend/src/lib/highlight.ts
@@ -45,12 +45,15 @@ function _highlightCard(card: HTMLElement): void {
 	// Scroll to card
 	card.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-	// Apply highlight
-	card.classList.add('card-highlight');
+	// Apply highlight via inline style to avoid interfering with stagger animation
+	const saved = card.style.cssText;
+	card.style.animation = 'cardHighlight 2s ease-in-out';
+	card.style.position = 'relative';
+	card.style.zIndex = '11';
 
-	// Cleanup after duration
+	// Cleanup after duration — restore original inline styles
 	setTimeout(() => {
-		card.classList.remove('card-highlight');
+		card.style.cssText = saved;
 		overlay.classList.remove('active');
 		setTimeout(() => overlay.remove(), 300); // wait for fade-out
 	}, HIGHLIGHT_DURATION);