From 5a99c0026e0800fb8bb6e3b31f4922e36718979b Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 16 Nov 2025 14:42:40 +0000
Subject: [PATCH] fix: enable staggered button animations with specific
 property transitions

The issue was that 'transition: all' on the container was forcing all
buttons to move together. Fixed by:

1. Container now transitions only: left, bottom, gap, transform
   (NOT flex-direction or all properties)

2. Buttons transition only: transform, opacity, background-color, box-shadow, color
   (NOT all properties)

3. Increased stagger delays for better visual effect:
   - Button 1: 0s (instant)
   - Button 2: 0.08s
   - Button 3: 0.16s
   - Button 4: 0.24s
   - Button 5: 0.32s

4. Added flex-direction: 0s transition in mobile to instant switch direction
   while buttons still cascade to new positions

Result: Each button now animates independently with cascading wave effect
when switching between desktop (vertical) and mobile (horizontal) layouts.
---
 static/css/main.css | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

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 */