fix: use CSS zoom property instead of transform scale

Changed from transform: scale() to CSS zoom property which affects actual
document layout space. At 50% zoom, content now takes 50% space instead of
reserving full 100% height. This eliminates the large gray empty space issue.

static/js/main.js

@@ -323,15 +323,15 @@
         const cvFooter = document.querySelector('.cv-footer');
         if (!cvContainer) return;
 
-        // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
-        const newScale = zoomValue / 100;
+        // Convert percentage to decimal (100 = 1.0, 50 = 0.5, etc.)
+        const zoomLevel = zoomValue / 100;
 
         requestAnimationFrame(() => {
-            // Apply the new scale to both container and footer
-            // transform-origin: top center keeps content anchored at top
-            cvContainer.style.transform = `scale(${newScale})`;
+            // Use CSS zoom property which affects actual layout space
+            // Unlike transform: scale(), zoom reduces document space at lower values
+            cvContainer.style.zoom = zoomLevel;
             if (cvFooter) {
-                cvFooter.style.transform = `scale(${newScale})`;
+                cvFooter.style.zoom = zoomLevel;
             }
 
             // Update display