perf(hero): pause animations when hero scrolls out of view

Uses IntersectionObserver to toggle an .offscreen class on the hero
element, which sets animation-play-state: paused on the sheen, noise,
and scroll-cue animations. Avoids unnecessary GPU work while the hero
is not visible.

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

website/static/main.js

@@ -41,6 +41,16 @@ function initRevealSections() {
 
 initRevealSections();
 
+// Pause hero animations when scrolled out of view
+(function () {
+  var hero = document.querySelector('.hero');
+  if (!hero || !('IntersectionObserver' in window)) return;
+  var observer = new IntersectionObserver(function (entries) {
+    hero.classList.toggle('offscreen', !entries[0].isIntersecting);
+  });
+  observer.observe(hero);
+})();
+
 // Relative time formatting
 function relativeTime(isoStr) {
   var date = new Date(isoStr);

website/static/style.css

@@ -152,6 +152,12 @@ kbd {
   animation: sheen-drift 18s linear infinite;
 }
 
+.hero.offscreen .hero-sheen,
+.hero.offscreen .hero-noise,
+.hero.offscreen .hero-scrollcue::after {
+  animation-play-state: paused;
+}
+
 .hero-noise {
   opacity: 0.1;
   background-image: