fix: fade-in viewport detection, gauge CSS transition timing, framework bar observer

Author: claude

assets/js/site.js

@@ -225,8 +225,15 @@
           io.unobserve(e.target);
         }
       });
-    }, { threshold: 0.08 });
-    document.querySelectorAll('.fade-in').forEach(el => io.observe(el));
+    }, { threshold: 0.01, rootMargin: '0px 0px -20px 0px' });
+    document.querySelectorAll('.fade-in').forEach(el => {
+      const r = el.getBoundingClientRect();
+      if (r.top < window.innerHeight && r.bottom > 0) {
+        el.classList.add('visible');
+      } else {
+        io.observe(el);
+      }
+    });
 
     /* ── HERO TITLE CHARACTER REVEAL ────────────────────────────── */
     function wrapChars(el, delayStart) {

pages/framework.html

@@ -406,15 +406,22 @@ <h3 class="section-heading-compact">The knowledge lifecycle</h3>
   <script>
     (function(){
       var targets = [
-        { el: document.querySelector('.standard-box'), cls: 'visible' },
-        { el: document.querySelector('.lifecycle'), cls: 'visible' }
-      ];
+        document.querySelector('.standard-box'),
+        document.querySelector('.lifecycle')
+      ].filter(Boolean);
       var io = new IntersectionObserver(function(entries){
         entries.forEach(function(e){
           if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }
         });
-      }, { threshold: 0 });
-      targets.forEach(function(t){ if (t.el) io.observe(t.el); });
+      }, { threshold: 0.01, rootMargin: '0px 0px -20px 0px' });
+      targets.forEach(function(el){
+        var r = el.getBoundingClientRect();
+        if (r.top < window.innerHeight && r.bottom > 0) {
+          el.classList.add('visible');
+        } else {
+          io.observe(el);
+        }
+      });
     }());
   </script>
 </body>

pages/whynow.html

@@ -470,10 +470,22 @@ <h3>AI performance is downstream of knowledge quality.</h3>
       }
       var gauges = document.getElementById('ki-gauges');
       if (!gauges) return;
-      var io = new IntersectionObserver(function(entries){
-        if (entries[0].isIntersecting) { runGauges(); io.unobserve(gauges); }
-      }, { threshold: 0.3 });
-      io.observe(gauges);
+      function triggerGauges() {
+        // rAF ensures CSS transitions are active before strokeDashoffset changes
+        requestAnimationFrame(function() {
+          requestAnimationFrame(function() { runGauges(); });
+        });
+      }
+      // Check if already in viewport on load (threshold 0.3 would miss this)
+      var gr = gauges.getBoundingClientRect();
+      if (gr.top < window.innerHeight && gr.bottom > 0) {
+        triggerGauges();
+      } else {
+        var io = new IntersectionObserver(function(entries){
+          if (entries[0].isIntersecting) { triggerGauges(); io.unobserve(gauges); }
+        }, { threshold: 0.1 });
+        io.observe(gauges);
+      }
     }());
   </script>
 </body>