Add scene backdrop controls, FPS display, and toned backdrops

styles.css

@@ -105,18 +105,103 @@ header .pill {
     position: relative;
     width: 100%;
     height: 680px;
+    background: #0b1222;
+    overflow: hidden;
+}
+#scene-wrapper .fps-counter {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 6px 10px;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.35);
+    color: #e2e8f0;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+    opacity: 0;
+    transform: translateY(-6px);
+    transition:
+        opacity 160ms ease,
+        transform 160ms ease;
+    pointer-events: none;
+    z-index: 5;
+}
+#scene-wrapper .fps-counter.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+#scene-wrapper::before,
+#scene-wrapper::after {
+    content: "";
+    position: absolute;
+    inset: -30% -10%;
     background:
         radial-gradient(
             circle at 30% 30%,
-            rgba(255, 255, 255, 0.02),
-            transparent 40%
+            var(--backdrop-color-a, rgba(56, 189, 248, 0.045)),
+            transparent 50%
         ),
         radial-gradient(
-            circle at 75% 60%,
-            rgba(255, 255, 255, 0.02),
-            transparent 45%
+            circle at 70% 60%,
+            var(--backdrop-color-b, rgba(167, 139, 250, 0.04)),
+            transparent 48%
         ),
-        #0b1222;
+        radial-gradient(
+            circle at 50% 20%,
+            var(--backdrop-color-c, rgba(52, 211, 153, 0.035)),
+            transparent 45%
+        );
+    filter: blur(var(--backdrop-blur, 24px));
+    opacity: var(--backdrop-opacity, 0.24);
+    pointer-events: none;
+    transform: scale(1.05);
+    z-index: 0;
+    animation: floatBackdrop var(--backdrop-speed, 28s) ease-in-out infinite
+        alternate;
+}
+#scene-wrapper::after {
+    inset: -35% -15%;
+    background:
+        radial-gradient(
+            circle at 20% 60%,
+            var(--backdrop-color-a, rgba(14, 165, 233, 0.032)),
+            transparent 50%
+        ),
+        radial-gradient(
+            circle at 80% 30%,
+            var(--backdrop-color-b, rgba(244, 114, 182, 0.032)),
+            transparent 50%
+        );
+    opacity: calc(var(--backdrop-opacity, 0.24) * 0.7);
+    animation: floatBackdropAlt calc(var(--backdrop-speed, 28s) * 1.1)
+        ease-in-out infinite alternate;
+}
+#scene-wrapper:not(.backdrop-enabled)::before,
+#scene-wrapper:not(.backdrop-enabled)::after {
+    display: none;
+}
+@keyframes floatBackdrop {
+    0% {
+        transform: translate3d(0, 0, 0) scale(1.04);
+    }
+    50% {
+        transform: translate3d(-2%, -1%, 0) scale(1.07);
+    }
+    100% {
+        transform: translate3d(2%, 1.5%, 0) scale(1.05);
+    }
+}
+@keyframes floatBackdropAlt {
+    0% {
+        transform: translate3d(0, 0, 0) scale(1.03);
+    }
+    50% {
+        transform: translate3d(1.5%, -2%, 0) scale(1.06);
+    }
+    100% {
+        transform: translate3d(-1%, 2%, 0) scale(1.04);
+    }
 }
 canvas {
     display: block;
@@ -488,4 +573,9 @@ canvas {
     header h1 {
         font-size: 18px;
     }
+    #scene-wrapper::before,
+    #scene-wrapper::after {
+        filter: blur(18px);
+        opacity: 0.6;
+    }
 }