intro backdrop + object-text linkage: establishing shot anchored below the copy (parallax, disabled under reduced motion); each legend row focuses its own part - the scrub walks the list and the described object stands out while the rest sit back, hover/keyboard pins the link

pilot/assemble-arc.mjs

@@ -60,6 +60,7 @@ let app = tpl.slice(i + 8, j)
 let body = tpl.slice(0, i) + tpl.slice(j + 9);
 
 const heroes = {
+  __HERO_INTRO__: "intro-establishing.webp",
   __HERO_SURROUND__: "course-00-surround.webp",
   __HERO_NODE__: "course-III-node.webp",
   __HERO_POD__: "course-III-pod.webp",
@@ -90,8 +91,9 @@ for (const [ph, file] of Object.entries(heroes)) {
   heroUrls[ph] = url;
   const dims = webpSize(buf);
   const dimAttr = dims ? ` width="${dims.w}" height="${dims.h}"` : "";
-  // Course 00's hero is the first visible image -> load eager; the rest are below the fold.
-  const load = ph === "__HERO_SURROUND__" ? "eager" : "lazy";
+  // The intro backdrop is the above-the-fold LCP candidate -> eager. Everything else,
+  // including Course 00's hero, sits below the fold and lazy-loads.
+  const load = ph === "__HERO_INTRO__" ? "eager" : "lazy";
   body = body.replace(`src="${ph}"`, `src="${url}"${dimAttr} decoding="async" loading="${load}"`);
 }
 {