From d4ef91b74282e9339fd3f5dd6d763ef7cc154ff7 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 16 Nov 2025 14:45:13 +0000
Subject: [PATCH] fix: use CSS Grid for true staggered button animations

Switched from Flexbox to CSS Grid to enable true staggered animations.

Why Grid works better:
- Grid children maintain their grid cell during layout changes
- Buttons can transition individually within their cells
- grid-auto-flow change doesn't force simultaneous repositioning

Changes:
- Container: display: grid with grid-auto-flow
- Desktop: grid-auto-flow: row (vertical stack)
- Mobile: grid-auto-flow: column (horizontal row)
- Buttons: transition: all 0.5s with staggered delays (0s, 0.08s, 0.16s, 0.24s, 0.32s)

Result: Each button now cascades independently when resizing between
desktop and mobile layouts, creating the smooth wave effect.
---
 static/css/main.css | 36 ++++++++----------------------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 73b30ec..4fa5af6 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2830,16 +2830,11 @@ html {
     position: fixed;
     left: 2rem; /* LEFT SIDE - buttons grow bottom to top */
     bottom: 2rem;
-    display: flex;
-    flex-direction: column;
+    display: grid; /* Use grid instead of flex for better control */
+    grid-auto-flow: row; /* Stack vertically */
     gap: 1rem; /* 16px gap between buttons */
-    align-items: center;
+    justify-items: center;
     z-index: 99;
-    /* 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 */
@@ -2850,10 +2845,6 @@ html {
 .fixed-buttons-container .print-friendly-btn,
 .fixed-buttons-container .download-btn {
     position: relative !important; /* Override fixed positioning */
-    top: auto !important;
-    bottom: auto !important;
-    left: auto !important;
-    right: auto !important;
     width: 50px;
     height: 50px;
     background: var(--black-bar);
@@ -2865,17 +2856,13 @@ html {
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    /* 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 */
+    margin: 0;
+    /* Each button transitions independently with stagger */
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Staggered animation delays - each button moves independently */
+/* Staggered animation delays - creates cascading wave effect */
 .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; }
@@ -2966,18 +2953,11 @@ html {
 
     /* Change container to horizontal layout at bottom center */
     .fixed-buttons-container {
-        flex-direction: row; /* Horizontal on mobile */
-        right: auto;
+        grid-auto-flow: column; /* Horizontal on mobile */
         left: 50%;
         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 */