fix(registry): fix rendering artifacts in parallax-zoom/unzoom demos

- Increase --focus-scale from 8 to 9 — at scale 8 the card matched
  the viewport width exactly (240×8=1920), leaving zero tolerance for
  subpixel rounding. Scale 9 overshoots by 240px on each axis.

- Reduce grid gap from 40px to 24px — the 1040px grid in a 1080px
  viewport left only 20px of padding, causing bottom-row cards and
  their box-shadows to clip at the frame edge.

- Remove transform-style: preserve-3d from both snippets — no 3D
  transforms are used, and preserve-3d can cause compositing artifacts
  with overflow: hidden ancestors.

- Unzoom: set --pu-sibling-fade to 0 and drive sibling opacity via
  GSAP (starting at t=2.0s). Previously, CSS-driven opacity made cards
  70% visible when they first peeked into the viewport, creating
  colored strips at the frame edge during the reveal.

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

Author: miguel-heygen

registry/components/parallax-unzoom/demo.html

@@ -41,7 +41,7 @@
         display: grid;
         grid-template-columns: repeat(5, 240px);
         grid-template-rows: repeat(3, 320px);
-        gap: 40px;
+        gap: 24px;
       }
 
       .parallax-unzoom-card {
@@ -148,11 +148,10 @@
 
       .parallax-unzoom-grid {
         --pu-progress: 0;
-        --pu-focus-scale: 8;
+        --pu-focus-scale: 9;
         --pu-sibling-push: 900px;
-        --pu-sibling-fade: 1;
+        --pu-sibling-fade: 0;
         position: relative;
-        transform-style: preserve-3d;
       }
 
       .parallax-unzoom-card {
@@ -298,6 +297,18 @@
             0.5,
           );
 
+          tl.fromTo(
+            ".parallax-unzoom-card:not([data-pu-focus='true'])",
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 1.5,
+              ease: "power2.out",
+              stagger: { each: 0.02, from: "center" },
+            },
+            2.0,
+          );
+
           tl.to(
             ".focus-label",
             {

registry/components/parallax-unzoom/parallax-unzoom.html

@@ -26,7 +26,6 @@
     --pu-sibling-push: 900px;
     --pu-sibling-fade: 1;
     position: relative;
-    transform-style: preserve-3d;
   }
 
   .parallax-unzoom-card {

registry/components/parallax-zoom/demo.html

@@ -41,7 +41,7 @@
         display: grid;
         grid-template-columns: repeat(5, 240px);
         grid-template-rows: repeat(3, 320px);
-        gap: 40px;
+        gap: 24px;
       }
 
       .parallax-zoom-card {
@@ -149,11 +149,10 @@
 
       .parallax-zoom-grid {
         --pz-progress: 0;
-        --pz-focus-scale: 8;
+        --pz-focus-scale: 9;
         --pz-sibling-push: 900px;
         --pz-sibling-fade: 1;
         position: relative;
-        transform-style: preserve-3d;
       }
 
       .parallax-zoom-card {

registry/components/parallax-zoom/parallax-zoom.html

@@ -27,7 +27,6 @@
     --pz-sibling-push: 900px;
     --pz-sibling-fade: 1;
     position: relative;
-    transform-style: preserve-3d;
   }
 
   .parallax-zoom-card {