fix(registry): dark body background eliminates visible grid gaps

The #f6f6f4 off-white background was showing through the 30px grid
gaps and behind translated cards during the zoom/unzoom transitions,
creating visible white strips in the rendered video. Changed to
#1a1a20 (near-black) so gaps read as intentional dark separators.

Also added a .zoom-backdrop div behind the grid in the zoom demo that
fades to the focus card's gold gradient during the transition, covering
any gaps left by sibling cards translating off-screen.

Co-authored-by: Kanyini <onebenson@gmail.com>

Author: miguel-heygen

registry/components/parallax-unzoom/demo.html

@@ -23,7 +23,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #f6f6f4;
+        background: #1a1a20;
         font-family: "Inter", system-ui, sans-serif;
       }
 

registry/components/parallax-zoom/demo.html

@@ -23,7 +23,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #f6f6f4;
+        background: #1a1a20;
         font-family: "Inter", system-ui, sans-serif;
       }
 
@@ -130,6 +130,14 @@
         color: rgba(26, 18, 8, 0.7);
       }
 
+      .zoom-backdrop {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #f5c93f, #d99a18);
+        opacity: 0;
+        z-index: 0;
+      }
+
       .hero-headline {
         position: absolute;
         top: 80px;
@@ -180,6 +188,7 @@
       data-start="0"
     >
       <div class="demo-canvas">
+        <div class="zoom-backdrop"></div>
         <div class="hero-headline">Inspired by how people discover.</div>
 
         <div class="parallax-zoom-grid">