feat: sync full-screen ambient blurred backdrop with spotlight hero theme colors

apex/ui/abyss.css

@@ -5647,3 +5647,75 @@ div[data-category="cast"] .cardScalable,
         box-sizing: border-box !important;
     }
 }
+
+/* ========================================================
+   APEX DYNAMIC AMBIENT BACKDROP SYNCHRONIZATION
+   Full-screen dynamic blur synced with active Spotlight item
+   ======================================================== */
+#abyss-spotlight-backdrop {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+    background-color: #050508;
+}
+
+html.abyss-spotlight-visible #abyss-spotlight-backdrop {
+    opacity: 1;
+}
+
+.abyss-spotlight-backdrop-layer {
+    position: absolute;
+    inset: -50px;
+    background-size: cover;
+    background-position: center top;
+    opacity: 0;
+    filter: blur(58px) saturate(165%) contrast(115%) brightness(40%);
+    transform: scale(1.15);
+    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: opacity, transform;
+}
+
+.abyss-spotlight-backdrop-layer.is-active {
+    opacity: 1;
+    transform: scale(1.03);
+}
+
+/* Atmospheric contrast gradient: transparent at top, soft vignette downwards, anchoring into true black */
+#abyss-spotlight-backdrop::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        to bottom,
+        rgba(5, 5, 8, 0.15) 0%,
+        rgba(5, 5, 8, 0.35) 25%,
+        rgba(5, 5, 8, 0.65) 55%,
+        rgba(5, 5, 8, 0.88) 80%,
+        #050508 100%
+    );
+    pointer-events: none;
+}
+
+/* Ensure background transparency pass-through on the home screen when spotlight is active */
+html.abyss-spotlight-visible body,
+html.abyss-spotlight-visible .backgroundContainer,
+html.abyss-spotlight-visible #indexPage,
+html.abyss-spotlight-visible .pageTabContent,
+html.abyss-spotlight-visible .homeSectionsContainer,
+html.abyss-spotlight-visible .mainAnimatedPages,
+html.abyss-spotlight-visible .pageContainer {
+    background-color: transparent !important;
+    background: transparent !important;
+}
+
+html.abyss-spotlight-visible #indexPage,
+html.abyss-spotlight-visible .homeSectionsContainer {
+    position: relative;
+    z-index: 1;
+}

apex/ui/spotlight-loader.js

@@ -24,6 +24,7 @@
   var backdropLayerA = null;
   var backdropLayerB = null;
   var activeBackdropLayer = null;
+  var currentBackdropUrl = null;
 
   function safe(fn) {
     // Runs fn and swallows/reports any error so one failure never kills the loader.
@@ -55,6 +56,16 @@
 
   function clearSpotlightBackdrop() {
     safe(function () {
+      currentBackdropUrl = null;
+      if (backdropLayerA) {
+        backdropLayerA.classList.remove("is-active");
+        backdropLayerA.style.backgroundImage = "";
+      }
+      if (backdropLayerB) {
+        backdropLayerB.classList.remove("is-active");
+        backdropLayerB.style.backgroundImage = "";
+      }
+      activeBackdropLayer = null;
       var els = document.querySelectorAll(BACKDROP_SELECTOR + "[" + BACKDROP_MARK_ATTR + "]");
       for (var i = 0; i < els.length; i++) {
         els[i].style.backgroundImage = "";
@@ -95,34 +106,37 @@
   }
 
   function installBackdropOverlay() {
-    if (backdropOverlay) return;
-    var container = document.querySelector(".backdropContainer");
-    if (!container || !container.parentNode) return;
-
-    backdropOverlay = document.createElement("div");
-    backdropOverlay.id = "abyss-spotlight-backdrop";
-    backdropLayerA = document.createElement("div");
-    backdropLayerB = document.createElement("div");
-    backdropLayerA.className = "abyss-spotlight-backdrop-layer";
-    backdropLayerB.className = "abyss-spotlight-backdrop-layer";
-    backdropOverlay.appendChild(backdropLayerA);
-    backdropOverlay.appendChild(backdropLayerB);
+    if (backdropOverlay && backdropOverlay.isConnected) return;
+    var container = document.querySelector(".backgroundContainer") || document.querySelector(".backdropContainer") || document.body;
+    if (!container) return;
 
-    container.parentNode.insertBefore(backdropOverlay, container.nextSibling);
+    if (!backdropOverlay) {
+      backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "abyss-spotlight-backdrop";
+      backdropLayerA = document.createElement("div");
+      backdropLayerB = document.createElement("div");
+      backdropLayerA.className = "abyss-spotlight-backdrop-layer";
+      backdropLayerB.className = "abyss-spotlight-backdrop-layer";
+      backdropOverlay.appendChild(backdropLayerA);
+      backdropOverlay.appendChild(backdropLayerB);
+    }
 
-    var style = document.createElement("style");
-    style.id = "abyss-spotlight-backdrop-style";
-    style.textContent =
-      "#abyss-spotlight-backdrop{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;}" +
-      "html.abyss-spotlight-visible #abyss-spotlight-backdrop{opacity:1;}" +
-      ".abyss-spotlight-backdrop-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;" +
-      "transition:opacity .9s ease;filter:blur(var(--abyss-backdrop-blur,23px)) saturate(120%) contrast(120%) brightness(25%);}" +
-      ".abyss-spotlight-backdrop-layer.is-active{opacity:1;}";
-    document.head.appendChild(style);
+    if (!backdropOverlay.isConnected) {
+      if (container === document.body) {
+        document.body.insertBefore(backdropOverlay, document.body.firstChild);
+      } else if (container.parentNode) {
+        container.parentNode.insertBefore(backdropOverlay, container.nextSibling);
+      } else {
+        document.body.appendChild(backdropOverlay);
+      }
+    }
   }
 
   function setSpotlightBackdrop(url) {
-    if (!url || !backdropOverlay) return;
+    if (!url) return;
+    currentBackdropUrl = url;
+    installBackdropOverlay();
+    if (!backdropOverlay) return;
     safe(function () {
       var incoming = activeBackdropLayer === backdropLayerA ? backdropLayerB : backdropLayerA;
       var outgoing = activeBackdropLayer;
@@ -136,7 +150,7 @@
             if (outgoing && outgoing !== incoming) {
               setTimeout(function () {
                 outgoing.classList.remove("is-active");
-              }, 50);
+              }, 450);
             }
           });
           activeBackdropLayer = incoming;
@@ -244,7 +258,6 @@
   }
 
   window.addEventListener("message", function (event) {
-    if (!currentIframe || event.source !== currentIframe.contentWindow) return;
     if (!event.data || event.data.type !== "abyss-spotlight") return;
     if (event.data.action === "leave") {
       spotlightFocused = false;
@@ -292,7 +305,11 @@
         if (action !== lastAction) {
           postToFrame(iframe, action);
           lastAction = action;
-          if (action === "pause") clearSpotlightBackdrop();
+          if (action === "pause") {
+            clearSpotlightBackdrop();
+          } else if (action === "resume" && currentBackdropUrl) {
+            setSpotlightBackdrop(currentBackdropUrl);
+          }
         }
       });
     };

apex/ui/spotlight.css

@@ -52,10 +52,10 @@ body {
 	position: absolute;
 	inset: 0;
 	background:
-		/* Seamless bottom fade directly to OLED pitch black #000000 */
-		linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.88) 22%, rgba(0, 0, 0, 0.45) 48%, transparent 80%),
+		/* Seamless bottom fade that allows ambient colors to radiate down through content rails */
+		linear-gradient(to top, rgba(5, 5, 8, 0.82) 0%, rgba(5, 5, 8, 0.55) 25%, rgba(0, 0, 0, 0.22) 55%, transparent 82%),
 		/* Left side reading gradient ensuring text/metadata has 100% contrast */
-		linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.8) 32%, rgba(0, 0, 0, 0.35) 58%, transparent 85%);
+		linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.78) 32%, rgba(0, 0, 0, 0.35) 58%, transparent 85%);
 	pointer-events: none;
 }
 

apex/ui/spotlight.html

@@ -810,11 +810,10 @@
 				}
 
 				try {
-					const syncUrl = artwork.backdrop
-						? (artwork.primaryBackdrop ? itemImageUrls(item).primary : (artwork.usedThumb ? itemImageUrls(item).thumb : itemImageUrls(item).backdrop))
-						: null;
+					const syncUrl = artwork.backdrop || (artwork.primaryBackdrop ? itemImageUrls(item).primary : (artwork.usedThumb ? itemImageUrls(item).thumb : itemImageUrls(item).backdrop));
 					if (syncUrl) {
-						window.parent.postMessage({ type: 'abyss-spotlight', action: 'backdrop-sync', url: syncUrl }, window.location.origin);
+						const origin = (window.location && window.location.origin && window.location.origin !== 'null') ? window.location.origin : '*';
+						window.parent.postMessage({ type: 'abyss-spotlight', action: 'backdrop-sync', url: syncUrl }, origin);
 					}
 				} catch { /* parent sync is optional */ }
 				let episodePrefix = '';