Scale up hero graphics and fade them into the text

- Stage/SceneCanvas: per-breakpoint framing (zoom + horizontal shift)
- Desktop: graphic spans 72% of the hero, zoomed ~1.35-1.4x and shifted
  right, masked to fade toward the text column and at top/bottom edges
- Mobile: full-bleed, taller, zoomed ~1.3x; lower part slides under the
  text and fades out downward

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/styles/globals.css

@@ -114,3 +114,42 @@ html.motion:not(.motion-fallback) [data-reveal-stagger] > * {
     padding-bottom: 0.08em;
     margin-bottom: -0.08em;
 }
+
+/* Hero graphics (<xl): stacked above the text; fades out downward into it */
+@media (max-width: 79.999rem) {
+    .hero-graphic {
+        mask-image: linear-gradient(
+            to bottom,
+            transparent 0%,
+            #000 10%,
+            #000 52%,
+            rgb(0 0 0 / 0.35) 72%,
+            rgb(0 0 0 / 0.1) 86%,
+            transparent 100%
+        );
+    }
+}
+
+/* Hero graphics (xl+): wide canvas that fades out toward the text column */
+@media (min-width: 80rem) {
+    .hero-graphic {
+        /* horizontal: fade toward the text; vertical: soften the crop at
+           the header and section edges. Intersected so both apply. */
+        mask-image:
+            linear-gradient(
+                to right,
+                transparent 0%,
+                rgb(0 0 0 / 0.15) 22%,
+                rgb(0 0 0 / 0.55) 40%,
+                #000 58%
+            ),
+            linear-gradient(
+                to bottom,
+                transparent 0%,
+                #000 12%,
+                #000 82%,
+                transparent 100%
+            );
+        mask-composite: intersect;
+    }
+}