Add CSS transitions and animations for smooth UI interactions

Animate course set pin/unpin with cross-fade content swap, credit bar
width changes, status badge color transitions, expand/collapse panels
(CreditLegend, AllocationBreakdown), mode toggle switching, and
ModeComparison banner fade. Specialization rows flash on credit/status
changes. Threshold markers animate position. All animations respect
prefers-reduced-motion.

openspec/changes/enhance-ui-animations/proposal.md

@@ -0,0 +1,29 @@
+## Why
+
+UI state changes (course selection, status transitions, panel expand/collapse) happen instantly, making interactions feel abrupt. Adding subtle CSS transitions and animations will make the app feel more polished and help users track what changed after each action.
+
+## What Changes
+
+- Add CSS transitions to course pin/unpin so the elective set smoothly shifts between its "open" and "pinned" states (border, background color, content swap)
+- Animate credit bar width changes so users can visually follow how selecting a course redistributes credits across specializations
+- Add expand/collapse transitions to CreditLegend and AllocationBreakdown instead of instant mount/unmount
+- Animate status badge changes (e.g., "Achievable" → "Achieved") with a brief highlight or color transition
+- Add a smooth transition to the ModeToggle active indicator when switching optimization modes
+- Animate the ModeComparison notification banner entrance/exit
+- Keep all animations CSS-only (transitions + keyframes) — no new runtime dependencies
+
+## Capabilities
+
+### New Capabilities
+- `ui-transitions`: CSS transition utilities and patterns for smooth state changes across all interactive components (course selection, credit bars, expand/collapse, status badges, mode toggle, notification banners)
+
+### Modified Capabilities
+<!-- No existing specs to modify -->
+
+## Impact
+
+- **Components affected**: CourseSelection, SpecializationRanking, CreditLegend, ModeToggle, Notifications (ModeComparison)
+- **CSS**: New transition declarations added to inline styles; possible new keyframe definitions in index.css
+- **Dependencies**: None — CSS-only approach, no new packages
+- **Accessibility**: All animations will respect `prefers-reduced-motion` media query
+- **Performance**: CSS transitions are GPU-accelerated; no JS animation loops