Make the homepage connection visible when the artwork enters view

DESIGN.md

@@ -24,7 +24,7 @@ The homepage uses a theme-aware ink-and-orange assembly studio: the opening and
 
 Theme correction, 11 November 2026: the opening and closing panels previously stayed dark/light regardless of the toggle. They now follow the active theme, and the header controls sit on matching surfaces. The light opening uses dark ink on warm paper with a darker orange accent; the dark opening uses light text on ink with the brighter accent. The closing panel follows the same pairing.
 
-The reference is a craft benchmark, not a substitute for Composer's identity. Reviewed 11 November 2026 at 1440px and 390px in both themes, with 1024/768/600/320px overflow checks. The gallery uses large app captures without horizontal cropping, the hero keeps its editorial bleed without clipping its labels, the film cover uses a separate control bar, and the closing headline holds two lines on phones. The hero uses a bounded, aspect-ratio scene in its own grid column. At 820px and below, it follows the copy in the same grid. The approved orange plate, Paperwork capture and fictional Launch Kit card form an exploded assembly with a brief connection pulse and gentle pointer tilt. CSS perspective and transforms move the art inside its own frame. Reduced-motion visitors see the resting composition. Keyboard tabs (arrows, Home and End), the launcher, theme persistence, skip-link focus, reduced motion, the Woodhouse builder-context strip and the JavaScript-free gallery were exercised. Issue #7 owns the public experience and #11 owns the release evidence; production identity and live-flow results are recorded there after the clean-main release.
+The reference is a craft benchmark, not a substitute for Composer's identity. Reviewed 11 November 2026 at 1440px and 390px in both themes, with 1024/768/600/320px overflow checks. The gallery uses large app captures without horizontal cropping, the hero keeps its editorial bleed without clipping its labels, the film cover uses a separate control bar, and the closing headline holds two lines on phones. The hero uses a bounded, aspect-ratio scene in its own grid column. At 820px and below, it follows the copy in the same grid. The approved orange plate, Paperwork capture and fictional Launch Kit card form an exploded assembly with a one-shot connection pulse when the artwork enters view and gentle pointer tilt. CSS perspective and transforms move the art inside its own frame. Reduced-motion visitors see the resting composition. Keyboard tabs (arrows, Home and End), the launcher, theme persistence, skip-link focus, reduced motion, the Woodhouse builder-context strip and the JavaScript-free gallery were exercised. Issue #7 owns the public experience and #11 owns the release evidence; production identity and live-flow results are recorded there after the clean-main release.
 
 ## Approved identity and campaign direction — 22 October 2026
 

src/components/ProductHome.astro

@@ -12,6 +12,7 @@ const appById = (id: string) => {
   return app;
 };
 const paperwork = appById("paperwork");
+const studioRoute = "M515 268H551V389Q551 400 540 400H520";
 const selectedApps = [
   {
     app: paperwork,
@@ -102,17 +103,10 @@ const siteSchema = {
               fill="none"
             >
               <path class="studio-guides" d="M38 126V42H122M480 498H562V416" />
-              <path
-                class="studio-route"
-                d="M483 240H546V396H410"
-                pathLength="100"
-              />
-              <path
-                class="studio-signal"
-                d="M483 240H546V396H410"
-                pathLength="100"
-              />
-              <circle cx="546" cy="396" r="4" />
+              <path class="studio-route" d={studioRoute} pathLength="100" />
+              <path class="studio-signal" d={studioRoute} pathLength="100" />
+              <circle class="studio-terminal-ring" cx="520" cy="400" r="9" />
+              <circle class="studio-terminal" cx="520" cy="400" r="4" />
             </svg>
             <div class="studio-sheet studio-output">
               <div class="studio-label">Launch Kit <span>Profile card</span></div>
@@ -613,6 +607,24 @@ const siteSchema = {
     "(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)",
   );
 
+  const terminal = scene?.querySelector(".studio-terminal");
+  if (
+    scene &&
+    terminal &&
+    "IntersectionObserver" in window &&
+    !matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        scene.classList.add("is-connected");
+        observer.disconnect();
+      },
+      { rootMargin: "0px 0px -24px" },
+    );
+    observer.observe(terminal);
+  }
+
   scene?.addEventListener("pointermove", (event) => {
     if (!motion.matches || event.pointerType !== "mouse") return;
 

src/styles/product-home.css

@@ -299,7 +299,7 @@
     display: block;
     width: 11cqi;
     height: auto;
-    margin: 5cqi;
+    margin: 3.5cqi 4cqi;
   }
   .studio-slot {
     position: absolute;
@@ -318,18 +318,26 @@
   }
   .studio-route {
     stroke: var(--home-hero-accent);
-    stroke-opacity: 0.65;
+    stroke-opacity: 0.55;
     stroke-width: 1.5;
   }
-  .studio-routing circle {
+  .studio-terminal {
     fill: var(--home-hero-accent);
   }
+  .studio-terminal-ring {
+    stroke: var(--home-hero-accent);
+    stroke-width: 1.5;
+    transform-box: fill-box;
+    transform-origin: center;
+    opacity: 0;
+  }
   .studio-signal {
     fill: none;
     stroke: var(--home-hero-accent);
-    stroke-width: 3;
-    stroke-dasharray: 14 100;
-    stroke-dashoffset: 14;
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    stroke-dasharray: 19 100;
+    stroke-dashoffset: 21;
     opacity: 0;
   }
   .studio-sheet {
@@ -358,13 +366,13 @@
   }
   .studio-output {
     width: 61%;
-    top: 17%;
-    right: 7%;
+    top: 14%;
+    right: 8%;
     transform: translateZ(3.5cqi) rotate(-8deg);
   }
   .studio-app {
-    width: 68%;
-    bottom: 10%;
+    width: 65%;
+    bottom: 8%;
     left: 7%;
     transform: translateZ(7cqi) rotate(-8deg);
   }
@@ -965,8 +973,11 @@
       animation: composer-seat-sheet 820ms 100ms cubic-bezier(0.2, 0.75, 0.2, 1)
         backwards;
     }
-    .studio-signal {
-      animation: composer-route-signal 1s 0.65s ease-out;
+    .is-connected .studio-signal {
+      animation: composer-route-signal 780ms 480ms linear;
+    }
+    .is-connected .studio-terminal-ring {
+      animation: composer-terminal-pulse 520ms 1140ms ease-out;
     }
     .home-reveal.will-reveal {
       opacity: 0;
@@ -997,15 +1008,25 @@
   }
 }
 @keyframes composer-route-signal {
-  15%,
-  75% {
+  8%,
+  90% {
     opacity: 1;
   }
   to {
     opacity: 0;
     stroke-dashoffset: -100;
   }
 }
+@keyframes composer-terminal-pulse {
+  from {
+    opacity: 0.9;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.7);
+  }
+}
 @media (max-width: 820px) {
   .composer-home {
     .hero-inner {