Add smooth animations across WebUI for modern feel

- Tab panels: fade-in with subtle translateY on switch
- Cards: hover lift (translateY -2px), staggered entrance animation
- Modals: spring-curve entrance with backdrop blur
- Buttons: press feedback (scale down on :active)
- Toggle switches: spring overshoot on knob transition
- Toast: smooth bounce-in replaces jarring shake
- Sections: animated height collapse/expand with chevron rotation
- Command palette: slide-down entrance animation
- Theme switch: smooth color transitions on key elements
- Dashboard: section collapse animation, target row hover
- Respects prefers-reduced-motion globally

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

server/src/wled_controller/static/css/streams.css

@@ -13,14 +13,15 @@
     border: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 16px;
-    transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
     display: flex;
     flex-direction: column;
     position: relative;
 }
 
 .template-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
 }
 
 .add-template-card {
@@ -32,13 +33,14 @@
     cursor: pointer;
     border: 2px dashed var(--border-color);
     background: transparent;
-    transition: border-color 0.2s, background 0.2s;
+    transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
 }
 
 .add-template-card:hover {
     border-color: var(--primary-color);
     background: rgba(33, 150, 243, 0.05);
     box-shadow: none;
+    transform: translateY(-2px);
 }
 
 .add-template-icon {
@@ -550,7 +552,7 @@
     cursor: pointer;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
-    transition: color 0.2s, border-color 0.2s;
+    transition: color 0.2s ease, border-color 0.25s ease;
 }
 
 .stream-tab-btn:hover {
@@ -610,6 +612,7 @@
 
 .stream-tab-panel.active {
     display: block;
+    animation: tabFadeIn 0.2s ease-out;
 }
 
 /* Sub-tab content sections */
@@ -649,12 +652,18 @@
     padding: 8px 0;
 }
 
+/* Prevent sticky header from clipping cards that lift on hover */
+[data-cs-content] {
+    padding-top: 4px;
+}
+
 .cs-chevron {
     font-size: 0.65rem;
     color: var(--text-secondary);
     width: 12px;
     display: inline-block;
     flex-shrink: 0;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .cs-title {