From de1ee42956edc557421d40b36e9b0b9c731e8d29 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 11:03:14 +0000
Subject: [PATCH] Refine animation sequence

Adjusted the animation sequence to first sort the columns, and then fade the all-red tower to black.
---
 src/components/BulgarianSolitaire.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/BulgarianSolitaire.tsx b/src/components/BulgarianSolitaire.tsx
index a3111cd..32b9aa5 100644
--- a/src/components/BulgarianSolitaire.tsx
+++ b/src/components/BulgarianSolitaire.tsx
@@ -285,14 +285,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
       await sleep(500); // Show move
       await waitForUnpause();
 
-      // Phase 4: Fade from red to normal
-      setAnimationPhase('fade-from-red');
-      await sleep(500); // Fade from red animation
-      await waitForUnpause();
-
-      // Clear highlighting and animation
-      setHighlightedBoxes(new Set());
-      setIsAnimating(false);
+      // Phase 4: Sort columns while boxes are still red
       setAnimationPhase('sorting');
 
       // Sort columns by height (tallest to left) with smooth transition
@@ -319,7 +312,18 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
       }));
 
       await sleep(800); // Wait for sorting animation to complete
+      await waitForUnpause();
+
+      // Phase 5: Fade from red to normal
+      setAnimationPhase('fade-from-red');
+      await sleep(500); // Fade from red animation
+      await waitForUnpause();
+
+      // Clear highlighting and animation
+      setHighlightedBoxes(new Set());
+      setIsAnimating(false);
       setAnimationPhase('idle');
+
       await waitForUnpause(); // Check for pause again
     }
 
@@ -478,7 +482,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
                   className={`w-8 h-8 rounded cursor-move transition-all duration-300 flex items-center justify-center text-xs font-medium mx-auto ${
                     highlightedBoxes.has(boxId) && animationPhase === 'fade-to-red'
                       ? 'animate-fade-to-red shadow-lg text-white'
-                      : highlightedBoxes.has(boxId) && (animationPhase === 'red-pause' || animationPhase === 'moving')
+                      : highlightedBoxes.has(boxId) && (animationPhase === 'red-pause' || animationPhase === 'moving' || animationPhase === 'sorting')
                       ? 'bg-red-500 text-white shadow-lg'
                       : highlightedBoxes.has(boxId) && animationPhase === 'fade-from-red'
                       ? 'animate-fade-from-red shadow-lg'