feat: expand appearance with shader effects and new style presets

Add 5 WebGL shader background effects (Aurora, Plasma, Digital Rain,
Starfield, Warp Tunnel) via a new bg-shaders.ts engine that shares
a dedicated canvas. Add 5 style presets (Sakura, Ocean, Copper, Vapor,
Monolith) with distinctive font pairings. Remove CSS particles effect
in favor of shader-based alternatives. Fix dot grid visibility and
tune all shader intensities for subtle ambient appearance.

server/src/wled_controller/static/css/appearance.css

@@ -143,6 +143,94 @@ h1 {
     to   { opacity: 1; }
 }
 
+/* ── Aurora preview: horizontal gradient bands ── */
+[data-effect="aurora"] .ap-bg-preview-inner {
+    background:
+        linear-gradient(180deg,
+            transparent 0%,
+            color-mix(in srgb, var(--primary-color) 18%, transparent) 25%,
+            transparent 50%,
+            color-mix(in srgb, var(--primary-color) 12%, transparent) 70%,
+            transparent 100%);
+    animation: ap-aurora-sway 6s ease-in-out infinite alternate;
+}
+
+@keyframes ap-aurora-sway {
+    from { transform: translateX(-5%) scaleY(1); opacity: 0.8; }
+    to   { transform: translateX(5%) scaleY(1.15); opacity: 1; }
+}
+
+/* ── Plasma preview: color blobs ── */
+[data-effect="plasma"] .ap-bg-preview-inner {
+    background:
+        radial-gradient(circle at 30% 40%,
+            color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, transparent 50%),
+        radial-gradient(circle at 70% 60%,
+            color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, transparent 50%),
+        radial-gradient(circle at 50% 20%,
+            color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 40%);
+    animation: ap-plasma-cycle 5s ease-in-out infinite alternate;
+}
+
+@keyframes ap-plasma-cycle {
+    from { transform: scale(1) rotate(0deg); }
+    to   { transform: scale(1.1) rotate(3deg); }
+}
+
+/* ── Digital Rain preview: vertical lines ── */
+[data-effect="rain"] .ap-bg-preview-inner {
+    background:
+        linear-gradient(180deg, var(--primary-color) 0%, transparent 60%) 10% 0 / 1px 70% no-repeat,
+        linear-gradient(180deg, var(--primary-color) 0%, transparent 50%) 25% 20% / 1px 50% no-repeat,
+        linear-gradient(180deg, var(--primary-color) 0%, transparent 60%) 40% 10% / 1px 60% no-repeat,
+        linear-gradient(180deg, var(--primary-color) 0%, transparent 40%) 55% 30% / 1px 40% no-repeat,
+        linear-gradient(180deg, var(--primary-color) 0%, transparent 55%) 70% 5% / 1px 55% no-repeat,
+        linear-gradient(180deg, var(--primary-color) 0%, transparent 50%) 85% 15% / 1px 50% no-repeat;
+    opacity: 0.4;
+    animation: ap-rain-fall 3s linear infinite;
+}
+
+@keyframes ap-rain-fall {
+    from { transform: translateY(-20%); }
+    to   { transform: translateY(20%); }
+}
+
+/* ── Stars preview: scattered dots ── */
+[data-effect="stars"] .ap-bg-preview-inner {
+    background:
+        radial-gradient(circle 1px at 15% 20%, #fff 0%, transparent 100%),
+        radial-gradient(circle 1.5px at 40% 60%, var(--primary-color) 0%, transparent 100%),
+        radial-gradient(circle 1px at 65% 30%, #fff 0%, transparent 100%),
+        radial-gradient(circle 0.8px at 80% 70%, #fff 0%, transparent 100%),
+        radial-gradient(circle 1.2px at 30% 85%, var(--primary-color) 0%, transparent 100%),
+        radial-gradient(circle 0.7px at 55% 15%, #fff 0%, transparent 100%),
+        radial-gradient(circle 1px at 90% 45%, #fff 0%, transparent 100%),
+        radial-gradient(circle 0.9px at 10% 55%, #fff 0%, transparent 100%);
+    opacity: 0.7;
+    animation: ap-stars-twinkle 3s ease-in-out infinite alternate;
+}
+
+@keyframes ap-stars-twinkle {
+    from { opacity: 0.5; }
+    to   { opacity: 0.8; }
+}
+
+/* ── Warp preview: radial tunnel ── */
+[data-effect="warp"] .ap-bg-preview-inner {
+    background: radial-gradient(circle at 50% 50%,
+        color-mix(in srgb, var(--primary-color) 20%, transparent) 0%,
+        transparent 30%,
+        color-mix(in srgb, var(--primary-color) 10%, transparent) 50%,
+        transparent 70%,
+        color-mix(in srgb, var(--primary-color) 6%, transparent) 90%);
+    animation: ap-warp-pulse 4s ease-in-out infinite;
+}
+
+@keyframes ap-warp-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.7; }
+    50%      { transform: scale(1.2); opacity: 1; }
+}
+
 [data-effect="grid"] .ap-bg-preview-inner {
     background-image:
         radial-gradient(circle, var(--text-muted) 0.5px, transparent 0.5px);
@@ -168,21 +256,12 @@ h1 {
     );
 }
 
-[data-effect="particles"] .ap-bg-preview-inner {
-    background:
-        radial-gradient(circle 2px at 20% 40%, var(--primary-color) 0%, transparent 100%),
-        radial-gradient(circle 1.5px at 60% 25%, var(--primary-color) 0%, transparent 100%),
-        radial-gradient(circle 2px at 75% 65%, var(--primary-color) 0%, transparent 100%),
-        radial-gradient(circle 1px at 40% 80%, var(--primary-color) 0%, transparent 100%),
-        radial-gradient(circle 1.5px at 90% 35%, var(--primary-color) 0%, transparent 100%);
-    opacity: 0.6;
-}
-
 /* ═══ Full-page background effects ═══
    Uses a dedicated <div id="bg-effect-layer"> (same pattern as the WebGL canvas).
-   The active effect class (e.g. .bg-effect-grid) is set directly on the div. */
+   The active effect class (e.g. .bg-effect-grid) is set directly on the div.
+   Shader effects use <canvas id="bg-effect-canvas"> instead. */
 
-/* When a CSS bg effect is active, make body transparent so the layer shows through
+/* When a CSS/shader bg effect is active, make body transparent so the layer shows
    (mirrors [data-bg-anim="on"] body { background: transparent } in base.css) */
 [data-bg-effect] body {
     background: transparent;
@@ -202,7 +281,7 @@ h1 {
     background: color-mix(in srgb, var(--bg-color) 60%, transparent);
 }
 
-/* Card translucency for CSS bg effects (match existing bg-anim behaviour) */
+/* Card translucency for bg effects (match existing bg-anim behaviour) */
 [data-bg-effect][data-theme="dark"] .card,
 [data-bg-effect][data-theme="dark"] .template-card,
 [data-bg-effect][data-theme="dark"] .add-device-card,
@@ -227,17 +306,16 @@ h1 {
 
 #bg-effect-layer.bg-effect-grid,
 #bg-effect-layer.bg-effect-mesh,
-#bg-effect-layer.bg-effect-scanlines,
-#bg-effect-layer.bg-effect-particles {
+#bg-effect-layer.bg-effect-scanlines {
     display: block;
 }
 
 /* ── Grid: dot matrix ── */
 #bg-effect-layer.bg-effect-grid {
     background-image:
-        radial-gradient(circle 1px, var(--text-secondary) 0%, transparent 100%);
-    background-size: 28px 28px;
-    opacity: 0.35;
+        radial-gradient(circle 1.5px, var(--text-color) 0%, transparent 100%);
+    background-size: 24px 24px;
+    opacity: 0.18;
 }
 
 /* ── Gradient mesh: ambient blobs ── */
@@ -269,29 +347,6 @@ h1 {
     );
 }
 
-/* ── CSS Particles: glowing dots ── */
-#bg-effect-layer.bg-effect-particles {
-    background:
-        radial-gradient(circle 40px at 10% 20%, color-mix(in srgb, var(--primary-color) 30%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 25px at 30% 70%, color-mix(in srgb, var(--primary-color) 25%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 50px at 55% 15%, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 30px at 70% 55%, color-mix(in srgb, var(--primary-color) 28%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 35px at 85% 35%, color-mix(in srgb, var(--primary-color) 22%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 20px at 45% 45%, color-mix(in srgb, var(--primary-color) 32%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 45px at 20% 85%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 28px at 92% 78%, color-mix(in srgb, var(--primary-color) 25%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 15px at 65% 90%, color-mix(in srgb, var(--primary-color) 35%, transparent) 0%, transparent 100%),
-        radial-gradient(circle 35px at 5% 50%, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, transparent 100%);
-    animation: bg-particles-float 30s ease-in-out infinite alternate;
-}
-
-@keyframes bg-particles-float {
-    0%   { transform: translate(0, 0); }
-    33%  { transform: translate(15px, -20px); }
-    66%  { transform: translate(-10px, 10px); }
-    100% { transform: translate(5px, -5px); }
-}
-
 /* ─── Mobile: 2-column grid ─── */
 @media (max-width: 480px) {
     .ap-grid {