diff --git a/static/css/main.css b/static/css/main.css
index 56b0b26..73b30ec 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2835,7 +2835,11 @@ html {
     gap: 1rem; /* 16px gap between buttons */
     align-items: center;
     z-index: 99;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth morphing transition */
+    /* Container transitions only position/gap - NOT flex-direction to avoid overriding button animations */
+    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* All buttons inside container - shared styles */
@@ -2861,17 +2865,22 @@ html {
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Same smooth easing */
+    /* Transition specific properties for stagger effect */
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 0.3s ease,
+                background-color 0.3s ease,
+                box-shadow 0.3s ease,
+                color 0.3s ease;
     opacity: 0.6;
     margin: 0; /* Remove any margins */
 }
 
-/* Staggered animation delays - each button animates one by one */
-.fixed-buttons-container > *:nth-child(1) { transition-delay: 0.05s; }
-.fixed-buttons-container > *:nth-child(2) { transition-delay: 0.10s; }
-.fixed-buttons-container > *:nth-child(3) { transition-delay: 0.15s; }
-.fixed-buttons-container > *:nth-child(4) { transition-delay: 0.20s; }
-.fixed-buttons-container > *:nth-child(5) { transition-delay: 0.25s; }
+/* Staggered animation delays - each button moves independently */
+.fixed-buttons-container > *:nth-child(1) { transition-delay: 0s; }
+.fixed-buttons-container > *:nth-child(2) { transition-delay: 0.08s; }
+.fixed-buttons-container > *:nth-child(3) { transition-delay: 0.16s; }
+.fixed-buttons-container > *:nth-child(4) { transition-delay: 0.24s; }
+.fixed-buttons-container > *:nth-child(5) { transition-delay: 0.32s; }
 
 /* Legacy selector for backwards compatibility */
 .info-button {
@@ -2963,6 +2972,12 @@ html {
         transform: translateX(-50%); /* Center the container */
         bottom: 1.5rem;
         gap: 10px; /* Smaller gap on mobile */
+        /* Add flex-direction to transition for smooth morph */
+        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                    bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                    gap 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                    flex-direction 0s; /* Instant flex-direction change, but buttons stagger */
     }
 
     /* Buttons maintain same size and styles from desktop */