fix(story): harden notebook interaction and fallback

app/components/Hero.tsx

@@ -2,13 +2,13 @@
 
 import { motion, type Variants } from "motion/react";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { shouldLoadHeroScene } from "@/app/lib/should-load-hero-scene";
 import { CV_URL } from "@/lib/site-navigation";
 import { buildWhatsAppUrl } from "@/lib/whatsapp";
 import { ControlRoomGlobe } from "./cinematic/ControlRoomGlobe";
-import MagneticButton from "./cinematic/MagneticButton";
 import { HeroStarfield } from "./cinematic/HeroStarfield";
+import MagneticButton from "./cinematic/MagneticButton";
 import { TelemetryStrip } from "./cinematic/TelemetryStrip";
 
 const HeroScene = dynamic(() => import("./cinematic/HeroScene"), {
@@ -455,8 +455,10 @@ function SideVisual({
 
 export default function Hero() {
   const variant = HERO_VARIANTS[0];
+  const heroRef = useRef<HTMLElement>(null);
   const [shouldReduceMotion, setShouldReduceMotion] = useState(false);
   const [shouldRenderHeroScene, setShouldRenderHeroScene] = useState(false);
+  const [isHeroVisible, setIsHeroVisible] = useState(true);
 
   useEffect(() => {
     const reducedMotion = window.matchMedia(
@@ -478,6 +480,17 @@ export default function Hero() {
     const timer = window.setTimeout(() => setShouldRenderHeroScene(true), 1500);
     return () => window.clearTimeout(timer);
   }, []);
+  useEffect(() => {
+    const hero = heroRef.current;
+    if (!hero || !("IntersectionObserver" in window)) return undefined;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setIsHeroVisible(entry?.isIntersecting ?? false),
+      { threshold: 0 },
+    );
+    observer.observe(hero);
+    return () => observer.disconnect();
+  }, []);
 
   const handleWhatsAppClick = () => {
     window.open(
@@ -532,11 +545,14 @@ export default function Hero() {
 
   return (
     <section
+      ref={heroRef}
       id="home"
       className="relative flex min-h-[100svh] w-full items-center overflow-hidden bg-[var(--ink)] text-[#f4f2ed]"
       data-hero-variant={variant.id}
     >
-      {shouldRenderHeroScene && <HeroScene variant={variant.scene} />}
+      {shouldRenderHeroScene && (
+        <HeroScene isVisible={isHeroVisible} variant={variant.scene} />
+      )}
 
       <div className="pointer-events-none absolute inset-0 z-[1] bg-[radial-gradient(ellipse_80%_60%_at_50%_40%,transparent_0%,rgba(10,10,10,0.4)_50%,var(--ink)_100%)]" />
       <div className="pointer-events-none absolute inset-0 z-[1] bg-gradient-to-b from-transparent via-transparent to-[var(--ink)]" />