Add UI animations: dialogs, tabs, settings, browser stagger, banner pulse

- Dialog modals: scale+fade entrance/exit with animated backdrop
- Tab panels: fade-in with subtle slide on switch
- Settings sections: content slide-down on expand
- Browser grid/list items: staggered cascade entrance animation
- Connection banner: slide-in + attention pulse on disconnect
- Accessibility: prefers-reduced-motion disables all animations

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

media_server/static/css/styles.css

@@ -479,10 +479,17 @@ h1 {
 
 [data-tab-content] {
     display: none;
+    opacity: 0;
 }
 
 [data-tab-content].active {
     display: block;
+    animation: tabFadeIn 0.25s ease-out forwards;
+}
+
+@keyframes tabFadeIn {
+    from { opacity: 0; transform: translateY(6px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 @media (max-width: 600px) {
@@ -1162,7 +1169,7 @@ button:disabled {
     border-right: 2px solid var(--text-muted);
     border-bottom: 2px solid var(--text-muted);
     transform: rotate(-45deg);
-    transition: transform 0.2s;
+    transition: transform 0.3s ease;
     flex-shrink: 0;
 }
 
@@ -1177,6 +1184,12 @@ button:disabled {
 .settings-section-content {
     padding: 0 1rem 1rem;
     overflow-x: auto;
+    animation: settingsExpand 0.3s ease-out;
+}
+
+@keyframes settingsExpand {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 .settings-section-description {
@@ -1660,6 +1673,11 @@ dialog {
     width: 90%;
     margin: auto;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
+    animation: dialogIn 0.25s ease-out;
+}
+
+dialog.dialog-closing {
+    animation: dialogOut 0.2s ease-in forwards;
 }
 
 /* Ensure dialogs are hidden until explicitly opened */
@@ -1669,6 +1687,31 @@ dialog:not([open]) {
 
 dialog::backdrop {
     background: rgba(0, 0, 0, 0.8);
+    animation: backdropIn 0.25s ease-out;
+}
+
+dialog.dialog-closing::backdrop {
+    animation: backdropOut 0.2s ease-in forwards;
+}
+
+@keyframes dialogIn {
+    from { opacity: 0; transform: scale(0.9) translateY(10px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+@keyframes dialogOut {
+    from { opacity: 1; transform: scale(1) translateY(0); }
+    to { opacity: 0; transform: scale(0.9) translateY(10px); }
+}
+
+@keyframes backdropIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes backdropOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
 }
 
 .confirm-dialog {
@@ -2582,6 +2625,8 @@ footer .separator {
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.15s;
+    animation: itemFadeIn 0.3s ease-out backwards;
+    animation-delay: calc(var(--item-index, 0) * 20ms);
 }
 
 .browser-list-item:hover {
@@ -2709,6 +2754,13 @@ footer .separator {
     align-items: center;
     gap: 0.5rem;
     position: relative;
+    animation: itemFadeIn 0.3s ease-out backwards;
+    animation-delay: calc(var(--item-index, 0) * 30ms);
+}
+
+@keyframes itemFadeIn {
+    from { opacity: 0; transform: translateY(8px) scale(0.97); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
 .browser-item:hover {
@@ -3113,6 +3165,11 @@ footer .separator {
     font-weight: 500;
     text-align: center;
     transition: transform 0.3s ease;
+    animation: bannerSlideIn 0.4s ease-out;
+}
+
+.connection-banner:not(.hidden) {
+    animation: bannerSlideIn 0.4s ease-out, bannerPulse 2s ease-in-out 0.4s 2;
 }
 
 .connection-banner.hidden {
@@ -3120,6 +3177,16 @@ footer .separator {
     pointer-events: none;
 }
 
+@keyframes bannerSlideIn {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+}
+
+@keyframes bannerPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
 .connection-banner-btn {
     padding: 4px 14px;
     background: rgba(255, 255, 255, 0.2);
@@ -3237,3 +3304,12 @@ body.mini-player-visible footer {
         -webkit-overflow-scrolling: touch;
     }
 }
+
+/* Accessibility: reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}