perf/ui: use forest images across pages and defer Granim init

- Replace ocean image with forest path image on login and index headers
- Defer Granim script and initialization with requestIdleCallback
- Keep login background as full-screen canvas as before
- Small cache-busting bump on index for reliable refresh

This improves initial render performance and visual consistency.

static/index.html

@@ -10,8 +10,8 @@
     <link rel="icon" type="image/png" href="/static/image/icons8-tree-96.png">
     <link rel="apple-touch-icon" href="/static/image/icons8-tree-96.png">
     <link rel="stylesheet" href="/static/css/design-system.css">
-    <!-- Granim.js for gradient animations -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js"></script>
+    <!-- Granim.js for gradient animations (deferred) -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js" defer></script>
     <style>
         
         :root {
@@ -917,7 +917,7 @@
         // Force refresh if we detect cached version
         (function() {
             const currentVersion = '5.1.0';
-            const timestamp = '1754657640'; // Current timestamp for cache busting
+            const timestamp = '1754659000'; // Cache-busting bump
             const lastVersion = sessionStorage.getItem('treetrack_version');
             const lastTimestamp = sessionStorage.getItem('treetrack_timestamp');
             
@@ -1156,32 +1156,41 @@
     <script>
         // Initialize Granim background animation on page load
         document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Granim with animated gradients and full coverage
-            var headerGranimInstance = new Granim({
-                element: '#header-canvas',
-                direction: 'diagonal',
-                isPausedWhenNotInView: false,
-                image: {
-                    source: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
-                    position: ['center', 'center'],
-                    stretchMode: ['stretch', 'stretch'],
-                    blendingMode: 'multiply'
-                },
-                states: {
-                    "default-state": {
-                        gradients: [
-                            ['#0f172a', '#1e293b', '#16a085'],
-                            ['#1a202c', '#2d3748', '#27ae60'], 
-                            ['#2d3748', '#4a5568', '#2ecc71'],
-                            ['#1a365d', '#2c5282', '#138d75'],
-                            ['#0f172a', '#2d3748', '#16a085']
-                        ],
-                        transitionSpeed: 12000
+            // Define initializer and defer to idle time for better performance
+            function startHeaderGranim() {
+                new Granim({
+                    element: '#header-canvas',
+                    direction: 'diagonal',
+                    isPausedWhenNotInView: false,
+                    image: {
+                        // Forest path image
+                        source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
+                        position: ['center', 'center'],
+                        stretchMode: ['stretch', 'stretch'],
+                        blendingMode: 'multiply'
+                    },
+                    states: {
+                        "default-state": {
+                            gradients: [
+                                ['#0f172a', '#1e293b', '#16a085'],
+                                ['#1a202c', '#2d3748', '#27ae60'], 
+                                ['#2d3748', '#4a5568', '#2ecc71'],
+                                ['#1a365d', '#2c5282', '#138d75'],
+                                ['#0f172a', '#2d3748', '#16a085']
+                            ],
+                            transitionSpeed: 12000
+                        }
                     }
-                }
-            });
-            
-            console.log('Header Granim with forest road background initialized synchronously');
+                });
+            }
+
+            if (window.requestIdleCallback) {
+                requestIdleCallback(() => { startHeaderGranim(); });
+            } else {
+                setTimeout(() => { startHeaderGranim(); }, 0);
+            }
+
+            console.log('Scheduled header Granim initialization');
         });
     </script>
 </body>

static/login.html

@@ -7,8 +7,8 @@
     <link rel="icon" type="image/png" href="/static/image/icons8-tree-96.png">
     <link rel="apple-touch-icon" href="/static/image/icons8-tree-96.png">
     <link rel="stylesheet" href="/static/css/design-system.css">
-    <!-- Granim.js CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js"></script>
+    <!-- Granim.js CDN (deferred to avoid blocking render) -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js" defer></script>
     <style>
         body {
             min-height: 100vh;
@@ -510,40 +510,47 @@
             console.log('Initializing Granim...');
             
             try {
-                // Initialize Granim with animated gradients and full coverage
-                var granimInstance = new Granim({
-                    element: '#granim-canvas',
-                    direction: 'diagonal',
-                    isPausedWhenNotInView: false,
-                    image: {
-                        source: 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
-                        position: ['center', 'center'],
-                        stretchMode: ['stretch', 'stretch'],
-                        blendingMode: 'multiply'
-                    },
-                    states: {
-                        "default-state": {
-                            gradients: [
-                                ['#0f172a', '#1e293b', '#16a085'],
-                                ['#1a202c', '#2d3748', '#27ae60'], 
-                                ['#2d3748', '#4a5568', '#2ecc71'],
-                                ['#1a365d', '#2c5282', '#138d75'],
-                                ['#0f172a', '#2d3748', '#16a085']
-                            ],
-                            transitionSpeed: 10000
+                // Define and defer Granim initialization to avoid blocking render
+                function startGranim() {
+                    new Granim({
+                        element: '#granim-canvas',
+                        direction: 'diagonal',
+                        isPausedWhenNotInView: false,
+                        image: {
+                            // Forest path image
+                            source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
+                            position: ['center', 'center'],
+                            stretchMode: ['stretch', 'stretch'],
+                            blendingMode: 'multiply'
+                        },
+                        states: {
+                            "default-state": {
+                                gradients: [
+                                    ['#0f172a', '#1e293b', '#16a085'],
+                                    ['#1a202c', '#2d3748', '#27ae60'], 
+                                    ['#2d3748', '#4a5568', '#2ecc71'],
+                                    ['#1a365d', '#2c5282', '#138d75'],
+                                    ['#0f172a', '#2d3748', '#16a085']
+                                ],
+                                transitionSpeed: 10000
+                            }
+                        },
+                        onStart: function() {
+                            console.log('Granim forest animation started');
+                        },
+                        onEnd: function() {
+                            console.log('Granim forest animation ended');
                         }
-                    },
-                    onStart: function() {
-                        console.log('Granim forest animation started');
-                    },
-                    onEnd: function() {
-                        console.log('Granim forest animation ended');
-                    }
-                });
-                
-                console.log('Granim with forest road background initialized synchronously');
-                
-                console.log('Granim initialized successfully!');
+                    });
+                }
+
+                if (window.requestIdleCallback) {
+                    requestIdleCallback(() => { startGranim(); });
+                } else {
+                    setTimeout(() => { startGranim(); }, 0);
+                }
+
+                console.log('Scheduled Granim initialization');
                 
             } catch (error) {
                 console.error('Granim initialization failed:', error);