feat: add smooth transitions to reduce status container jarring

Add HTMX settle delay and CSS transitions to make status updates
less jarring when the entire container refreshes.

Problem:
- Status container innerHTML swap replaces entire timeline
- All status items re-render causing visible flash
- Jarring UX during updates

Solution:
- Add HTMX settle:200ms modifier for smoother swaps
- Add CSS transitions for .htmx-swapping and .htmx-settling classes
- HTMX automatically applies these classes during swap lifecycle

Changes:
- home.html: hx-swap="innerHTML settle:200ms"
- _animations.scss: Add .htmx-swapping and .htmx-settling transitions
- Smooth fade during swap (opacity 0.7) and settle (opacity 1)

Technical Details:
- HTMX swap lifecycle: swapping → settling (200ms each)
- CSS transition: 150ms ease for smooth opacity changes
- Still replaces full container but visually smoother

Result:
- Less jarring status updates
- Smooth fade during refresh
- Better perceived performance
- Maintains current architecture (no backend changes)

Future Enhancement:
Consider HTMX OOB swaps to append only new items instead of
replacing entire container for even better UX.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/frontend/scss/_animations.scss

@@ -94,3 +94,14 @@
     box-shadow: 0 4px 20px rgba($swot-weakness, 0.3);
   }
 }
+
+// Smooth HTMX swap transition
+.htmx-swapping {
+  opacity: 0.7;
+  transition: opacity 150ms ease-out;
+}
+
+.htmx-settling {
+  opacity: 1;
+  transition: opacity 150ms ease-in;
+}

src/frontend/templates/home.html

@@ -108,7 +108,7 @@
              id="status"
              hx-get={{ url_for('get_status') }}
              hx-trigger="every 1s[!document.querySelector('#result-container')]"
-             hx-swap="innerHTML"
+             hx-swap="innerHTML settle:200ms"
              @htmx:after-request="
                const response = $event.detail.xhr.response.trim();
                if (response && response.length > 0) {