fix: use CSS zoom on wrapper to eliminate footer gap

Switched from transform: scale() to CSS zoom property on zoom-wrapper.
CSS zoom changes actual layout space, not just visual rendering:
- At 50% zoom, wrapper takes 50% space (no reserved empty space)
- Footer naturally follows right after zoomed content
- At 200% zoom, content extends beyond viewport with scrolling
- Fixes the large gray gap between content and footer

static/css/main.css

@@ -493,9 +493,8 @@ iconify-icon {
 
 /* Zoom Wrapper - wraps cv-container for zoom functionality */
 .zoom-wrapper {
-    transform-origin: top center; /* Scale from top center */
+    /* CSS zoom property changes actual layout space (not just visual) */
-    transition: transform 0.08s linear; /* Smooth zoom response */
+    /* This allows footer to naturally position right after zoomed content */
-    will-change: transform; /* Optimize for transforms */
 }
 
 /* Main CV Container */

static/js/main.js

@@ -350,12 +350,13 @@
         const zoomWrapper = document.getElementById('zoom-wrapper');
         if (!zoomWrapper) return;
 
-        // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
+        // Convert percentage to decimal (100 = 1.0, 50 = 0.5, etc.)
-        const scale = zoomValue / 100;
+        const zoomLevel = zoomValue / 100;
 
         requestAnimationFrame(() => {
-            // Apply zoom to wrapper - footer adjusts naturally below it
+            // Use CSS zoom on wrapper - changes actual layout space
-            zoomWrapper.style.transform = `scale(${scale})`;
+            // Footer will naturally follow right after the zoomed content
+            zoomWrapper.style.zoom = zoomLevel;
 
             // Update display
             updateZoomDisplay(zoomValue);