## 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