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/js/features/dashboard.js

@@ -304,21 +304,43 @@ export function toggleDashboardSection(sectionKey) {
     if (!header) return;
     const content = header.nextElementSibling;
     const chevron = header.querySelector('.dashboard-section-chevron');
-    if (collapsed[sectionKey]) {
-        content.style.display = 'none';
-        chevron.textContent = '\u25B6';
+    const nowCollapsed = collapsed[sectionKey];
+    if (chevron) chevron.style.transform = nowCollapsed ? '' : 'rotate(90deg)';
+
+    // Animate collapse/expand unless reduced motion
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        content.style.display = nowCollapsed ? 'none' : '';
+        return;
+    }
+    if (content._dsAnim) { content._dsAnim.cancel(); content._dsAnim = null; }
+    if (nowCollapsed) {
+        const h = content.offsetHeight;
+        content.style.overflow = 'hidden';
+        const anim = content.animate(
+            [{ height: h + 'px', opacity: 1 }, { height: '0px', opacity: 0 }],
+            { duration: 200, easing: 'ease-in-out' }
+        );
+        content._dsAnim = anim;
+        anim.onfinish = () => { content.style.display = 'none'; content.style.overflow = ''; content._dsAnim = null; };
     } else {
         content.style.display = '';
-        chevron.textContent = '\u25BC';
+        content.style.overflow = 'hidden';
+        const h = content.scrollHeight;
+        const anim = content.animate(
+            [{ height: '0px', opacity: 0 }, { height: h + 'px', opacity: 1 }],
+            { duration: 200, easing: 'ease-in-out' }
+        );
+        content._dsAnim = anim;
+        anim.onfinish = () => { content.style.overflow = ''; content._dsAnim = null; };
     }
 }
 
 function _sectionHeader(sectionKey, label, count, extraHtml = '') {
     const collapsed = _getCollapsedSections();
     const isCollapsed = !!collapsed[sectionKey];
-    const chevron = isCollapsed ? '\u25B6' : '\u25BC';
+    const chevronStyle = isCollapsed ? '' : ' style="transform:rotate(90deg)"';
     return `<div class="dashboard-section-header" data-dashboard-section="${sectionKey}" onclick="toggleDashboardSection('${sectionKey}')">
-        <span class="dashboard-section-chevron">${chevron}</span>
+        <span class="dashboard-section-chevron"${chevronStyle}>&#9654;</span>
         ${label}
         <span class="dashboard-section-count">${count}</span>
         ${extraHtml}