fix: switch from CSS zoom to transform scale for true unlimited zoom

- Replace CSS zoom with transform: scale() for proper viewport extension
- Add dynamic margin-bottom to position footer correctly
- Remove zoom: 1 reset from fixed buttons (no longer needed)
- Enables true zoom from 10% to 500% that extends beyond viewport

static/css/main.css

@@ -2592,7 +2592,6 @@ html {
     z-index: 99;
     transition: all 0.3s ease;
     opacity: 0.2;
-    zoom: 1; /* Prevent zoom inheritance */
 }
 
 .back-to-top:hover {
@@ -2644,7 +2643,6 @@ html {
     z-index: 99;
     transition: all 0.3s ease;
     opacity: 0.2;
-    zoom: 1; /* Prevent zoom inheritance */
 }
 
 .info-button:hover {

static/js/main.js

@@ -354,9 +354,14 @@
         const zoomLevel = zoomValue / 100;
 
         requestAnimationFrame(() => {
-            // Use CSS zoom on wrapper - changes actual layout space
-            // Footer will naturally follow right after the zoomed content
-            zoomWrapper.style.zoom = zoomLevel;
+            // Use transform scale for true zoom that extends beyond viewport
+            zoomWrapper.style.transform = `scale(${zoomLevel})`;
+            zoomWrapper.style.transformOrigin = 'top center';
+
+            // Adjust wrapper height to account for scale
+            // This ensures the footer appears at the correct position
+            const originalHeight = zoomWrapper.scrollHeight;
+            zoomWrapper.style.marginBottom = `${originalHeight * (zoomLevel - 1)}px`;
 
             // Update display
             updateZoomDisplay(zoomValue);