diff --git a/src/components/BulgarianSolitaire.tsx b/src/components/BulgarianSolitaire.tsx
index b9910fc..a3111cd 100644
--- a/src/components/BulgarianSolitaire.tsx
+++ b/src/components/BulgarianSolitaire.tsx
@@ -24,7 +24,7 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
   const [isComplete, setIsComplete] = useState(false);
   const [highlightedBoxes, setHighlightedBoxes] = useState<Set<number>>(new Set());
   const [isAnimating, setIsAnimating] = useState(false);
-  const [animationPhase, setAnimationPhase] = useState<'idle' | 'fade-to-red' | 'red-pause' | 'moving' | 'fade-from-red'>('idle');
+  const [animationPhase, setAnimationPhase] = useState<'idle' | 'fade-to-red' | 'red-pause' | 'moving' | 'fade-from-red' | 'sorting'>('idle');
   const [lastUsedColumn, setLastUsedColumn] = useState<number | null>(null);
   const [selectedBoxForMove, setSelectedBoxForMove] = useState<number | null>(null);
   const [showInstructions, setShowInstructions] = useState(false);
@@ -293,9 +293,9 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
       // Clear highlighting and animation
       setHighlightedBoxes(new Set());
       setIsAnimating(false);
-      setAnimationPhase('idle');
+      setAnimationPhase('sorting');
 
-      // Sort columns by height (tallest to left)
+      // Sort columns by height (tallest to left) with smooth transition
       const columnData = currentColumns.map((col, index) => ({ col, originalIndex: index }))
         .filter(item => item.col.length > 0)
         .sort((a, b) => b.col.length - a.col.length);
@@ -318,7 +318,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
         return box;
       }));
 
-      await sleep(800); // Wait to see the sorted result
+      await sleep(800); // Wait for sorting animation to complete
+      setAnimationPhase('idle');
       await waitForUnpause(); // Check for pause again
     }
 
@@ -460,9 +461,9 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
               onDragOver={handleDragOver}
               onDrop={(e) => handleDrop(e, index)}
               onClick={(e) => handleColumnClick(e, index)}
-              className={`border rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-500 ${
+              className={`border rounded-lg min-h-[100px] w-12 p-1 bg-background/50 flex flex-col-reverse gap-1 transition-all duration-700 ease-in-out ${
                 selectedBoxForMove !== null ? 'border-blue-500 border-2 cursor-pointer hover:bg-blue-50' : 'border-muted-foreground'
-              }`}
+              } ${animationPhase === 'sorting' ? 'transform-gpu' : ''}`}
               style={{ flexBasis: `calc(${100/15}% - 0.25rem)`, minWidth: '48px' }}
             >
               <div className="text-xs text-center text-muted-foreground mb-1 transform rotate-0">