Replace blob background with floating particle field

Canvas-based particle system with 60 glowing dots drifting upward,
tinted with the accent color. Eliminates the gradient banding issue
from the previous CSS blur approach. Renders at native resolution
with radial gradients for perfectly smooth glow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/css/base.css

@@ -84,17 +84,17 @@ body.modal-open {
 }
 
 /* ── Ambient animated background ── */
-#bg-anim-layer {
+#bg-anim-canvas {
     display: none;
     position: fixed;
     inset: 0;
     z-index: -1;
+    width: 100%;
+    height: 100%;
     pointer-events: none;
-    overflow: hidden;
-    background: var(--bg-color);
 }
 
-[data-bg-anim="on"] #bg-anim-layer {
+[data-bg-anim="on"] #bg-anim-canvas {
     display: block;
 }
 
@@ -102,60 +102,6 @@ body.modal-open {
     background: transparent;
 }
 
-#bg-anim-layer .bg-blob {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(80px);
-    will-change: transform;
-}
-
-#bg-anim-layer .bg-blob-a {
-    width: 600px;
-    height: 400px;
-    top: 10%;
-    left: 10%;
-    background: var(--bg-anim-a);
-    animation: blobA 20s ease-in-out infinite alternate;
-}
-
-#bg-anim-layer .bg-blob-b {
-    width: 500px;
-    height: 500px;
-    top: 40%;
-    right: 5%;
-    background: var(--bg-anim-b);
-    animation: blobB 25s ease-in-out infinite alternate;
-}
-
-#bg-anim-layer .bg-blob-c {
-    width: 450px;
-    height: 550px;
-    bottom: 5%;
-    left: 30%;
-    background: var(--bg-anim-c);
-    animation: blobC 22s ease-in-out infinite alternate;
-}
-
-/* Blob colors derived from accent via JS (--bg-anim-a/b/c set in index.html) */
-
-@keyframes blobA {
-    0%   { transform: translate(0, 0) scale(1); }
-    50%  { transform: translate(15vw, 10vh) scale(1.15); }
-    100% { transform: translate(-5vw, 20vh) scale(0.9); }
-}
-
-@keyframes blobB {
-    0%   { transform: translate(0, 0) scale(1); }
-    50%  { transform: translate(-20vw, -10vh) scale(1.1); }
-    100% { transform: translate(5vw, 15vh) scale(0.95); }
-}
-
-@keyframes blobC {
-    0%   { transform: translate(0, 0) scale(1); }
-    50%  { transform: translate(10vw, -15vh) scale(1.2); }
-    100% { transform: translate(-10vw, -5vh) scale(0.85); }
-}
-
 .container {
     padding: 20px;
 }