Fix mobile scrollytelling: rootMargin + lower threshold

On mobile the sticky diagram panel covers the top 40vh, so
IntersectionObserver (with viewport as root) kept steps "intersecting"
even when they were visually hidden behind the panel.

Fix: on screens ≤900px use rootMargin '-40% 0px 0px 0px' to exclude
the sticky-panel band from the observation area, and lower the threshold
from 0.5 → 0.3 so diagram updates fire earlier (more responsive feel).
Observer is also rebuilt on resize/orientation change.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: githajae

_layouts/research-interests.html

@@ -247,20 +247,35 @@ <h2 class="s-title">The AI<br>Database System.</h2>
     if (activeStep >= 5) alignConnector();
   }
 
-  var observer = new IntersectionObserver(function (entries) {
-    entries.forEach(function (entry) {
-      if (entry.isIntersecting) {
-        update(parseInt(entry.target.dataset.step, 10));
-      }
+  /* On mobile the sticky diagram panel occupies the top 40vh, so we tell
+     the observer to ignore that band and only watch the bottom 60vh.
+     A lower threshold (0.3) also makes updates feel more immediate. */
+  var mq = window.matchMedia('(max-width: 900px)');
+
+  function makeObserver() {
+    var mobile = mq.matches;
+    return new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          update(parseInt(entry.target.dataset.step, 10));
+        }
+      });
+    }, {
+      threshold:  mobile ? 0.3 : 0.5,
+      rootMargin: mobile ? '-40% 0px 0px 0px' : '0px'
     });
-  }, { threshold: 0.5 });
+  }
 
+  var observer = makeObserver();
   steps.forEach(function (s) { observer.observe(s); });
   update(1); // initialise diagram to step 1
 
-  /* Re-align on resize (e.g. font scaling, window resize) */
+  /* Rebuild observer and re-align connector on resize / orientation change */
   window.addEventListener('resize', function () {
     if (currentStep >= 5) alignConnector();
+    observer.disconnect();
+    observer = makeObserver();
+    steps.forEach(function (s) { observer.observe(s); });
   });
 }());
 </script>