fix(registry): transparent backgrounds on all caption components

Replace opaque backgrounds (#0a0a0a, #000, #000000) with transparent
on both html/body and the composition root div for all 15 caption
components. Captions are overlays — opaque backgrounds cover the
underlying video when loaded as sub-compositions.

Author: miguel-heygen

registry/components/caption-clip-wipe/caption-clip-wipe.html

@@ -23,14 +23,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #clip-wipe {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #wp-video {
         position: absolute;
@@ -43,7 +43,7 @@
       .wp-overlay {
         position: absolute;
         inset: 0;
-        background: rgba(0, 0, 0, 0.45);
+        background: transparent;
         z-index: 1;
         pointer-events: none;
       }

registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html

@@ -24,7 +24,7 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #000;
+        background: transparent;
         font-family: "Inter", sans-serif;
       }
 
@@ -33,7 +33,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #000;
+        background: transparent;
       }
 
       #bg-video {

registry/components/caption-emoji-pop/caption-emoji-pop.html

@@ -24,7 +24,7 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #000000;
+        background: transparent;
         font-family: "Gabarito", Arial, sans-serif;
       }
 
@@ -33,7 +33,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #000000;
+        background: transparent;
       }
 
       #avatar-video {

registry/components/caption-glitch-rgb/caption-glitch-rgb.html

@@ -23,14 +23,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #caption-glitch-rgb {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #gl-video {
         position: absolute;

registry/components/caption-gradient-fill/caption-gradient-fill.html

@@ -23,14 +23,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #gradient-fill {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #gr-container {
         position: absolute;

registry/components/caption-highlight/caption-highlight.html

@@ -23,14 +23,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #highlight {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #hl-video {
         position: absolute;
@@ -43,7 +43,7 @@
       .hl-overlay {
         position: absolute;
         inset: 0;
-        background: rgba(0, 0, 0, 0.4);
+        background: transparent;
         z-index: 1;
         pointer-events: none;
       }

registry/components/caption-kinetic-slam/caption-kinetic-slam.html

@@ -20,14 +20,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #kinetic-slam {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0a0a0a;
+        background: transparent;
       }
       #kt-video {
         position: absolute;
@@ -40,7 +40,7 @@
       .kt-overlay {
         position: absolute;
         inset: 0;
-        background: rgba(0, 0, 0, 0.45);
+        background: transparent;
         z-index: 1;
         pointer-events: none;
       }

registry/components/caption-matrix-decode/caption-matrix-decode.html

@@ -23,14 +23,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #000;
+        background: transparent;
       }
       #matrix-decode {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #000;
+        background: transparent;
       }
       #sc-video {
         position: absolute;
@@ -43,7 +43,7 @@
       .sc-overlay {
         position: absolute;
         inset: 0;
-        background: rgba(0, 0, 0, 0.85);
+        background: transparent;
         z-index: 1;
         pointer-events: none;
       }

registry/components/caption-neon-accent/caption-neon-accent.html

@@ -24,7 +24,7 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #000000;
+        background: transparent;
         font-family: "Montserrat", Arial, sans-serif;
       }
 
@@ -33,7 +33,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #000000;
+        background: transparent;
       }
 
       #avatar-video {

registry/components/caption-neon-glow/caption-neon-glow.html

@@ -23,14 +23,14 @@
         height: 1080px;
         margin: 0;
         overflow: hidden;
-        background: #000;
+        background: transparent;
       }
       #neon-glow {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #000;
+        background: transparent;
       }
       #ne-video {
         position: absolute;
@@ -43,7 +43,7 @@
       .ne-overlay {
         position: absolute;
         inset: 0;
-        background: rgba(0, 0, 0, 0.75);
+        background: transparent;
         z-index: 1;
         pointer-events: none;
       }