style(ui): Visuelles High-End Overhaul fuer Cinematic Cinema OS (3D Spin-Disc, Hero Banner, Radial Gauges & Poster Grid)

docker/ui/src/index.css

@@ -4,7 +4,11 @@
 
 @layer base {
   body {
-    @apply m-0 bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 font-sans antialiased selection:bg-amber-500/30 selection:text-amber-400;
+    @apply m-0 bg-slate-950 text-slate-100 font-sans antialiased selection:bg-amber-500/30 selection:text-amber-300;
+    background-image: 
+      radial-gradient(ellipse at 10% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+      radial-gradient(ellipse at 90% 100%, rgba(245, 158, 11, 0.06) 0%, transparent 50%);
+    background-attachment: fixed;
   }
 }
 
@@ -35,5 +39,45 @@
 }
 
 .animate-disc-spin {
-  animation: disc-spin 14s linear infinite;
+  animation: disc-spin 12s linear infinite;
+}
+
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.9; }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 3s ease-in-out infinite;
+}
+
+/* Custom Glass & Shimmer Effects */
+.glass-panel {
+  background: rgba(15, 23, 42, 0.75);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.glass-panel-amber {
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(245, 158, 11, 0.25);
+  box-shadow: 0 0 35px -5px rgba(245, 158, 11, 0.15);
+}
+
+/* Metallic Disc Texture Gradient */
+.disc-texture {
+  background: conic-gradient(
+    from 0deg,
+    #1e293b 0deg,
+    #475569 45deg,
+    #1e293b 90deg,
+    #64748b 135deg,
+    #1e293b 180deg,
+    #475569 225deg,
+    #1e293b 270deg,
+    #64748b 315deg,
+    #1e293b 360deg
+  );
 }