## ADDED Requirements

### Requirement: Course set pin/unpin transition
The ElectiveSet container SHALL transition its border-color and background-color over 200ms when a course is pinned or unpinned.

#### Scenario: User pins a course
- **WHEN** user clicks a course button in an unpinned elective set
- **THEN** the set's border smoothly transitions from dashed gray to solid blue and background fades from gray to blue-tinted over 200ms

#### Scenario: User unpins a course
- **WHEN** user clicks the "Clear" button on a pinned elective set
- **THEN** the set's border and background smoothly transition back to the unpinned style over 200ms

### Requirement: Credit bar width transition
The CreditBar's allocated and potential bar segments SHALL animate their width changes over 300ms with ease-out timing when credit allocations change.

#### Scenario: Credits increase after pinning a course
- **WHEN** a course is pinned that contributes credits to a specialization
- **THEN** the CreditBar's filled segments smoothly grow to their new width over 300ms

#### Scenario: Credits decrease after unpinning a course
- **WHEN** a course is unpinned that was contributing credits
- **THEN** the CreditBar's filled segments smoothly shrink to their new width over 300ms

### Requirement: Status badge color transition
The specialization status badge SHALL transition its background-color and text color over 200ms when the specialization's status changes.

#### Scenario: Status changes from achievable to achieved
- **WHEN** a course selection causes a specialization to reach 9 credits
- **THEN** the badge colors cross-fade from blue (achievable) to green (achieved) over 200ms

#### Scenario: Status changes from achieved to achievable
- **WHEN** a course is unpinned causing a specialization to drop below 9 credits
- **THEN** the badge colors cross-fade from green back to blue over 200ms

### Requirement: CreditLegend expand/collapse animation
The CreditLegend help panel SHALL animate open and closed with a sliding transition instead of instant mount/unmount.

#### Scenario: User opens the legend
- **WHEN** user clicks "How to read this"
- **THEN** the legend content slides open over 200ms using a max-height transition with overflow hidden

#### Scenario: User closes the legend
- **WHEN** user clicks the toggle again while the legend is open
- **THEN** the legend content slides closed over 200ms

### Requirement: AllocationBreakdown expand/collapse animation
The AllocationBreakdown detail panel in achieved specializations SHALL animate open and closed with a sliding transition.

#### Scenario: User expands an achieved specialization
- **WHEN** user clicks an achieved specialization row to view its allocation breakdown
- **THEN** the breakdown content slides open over 200ms

#### Scenario: User collapses an achieved specialization
- **WHEN** user clicks the row again to hide the breakdown
- **THEN** the breakdown content slides closed over 200ms

### Requirement: Mode toggle transition
The ModeToggle buttons SHALL transition their background, box-shadow, and text color over 150ms when the active mode changes.

#### Scenario: User switches optimization mode
- **WHEN** user clicks the inactive mode button
- **THEN** the active indicator (white background + shadow) smoothly transitions to the newly selected button over 150ms while the previous button fades to the inactive style

### Requirement: ModeComparison banner enter/exit animation
The ModeComparison notification banner SHALL fade in when it appears and fade out when it disappears, instead of instant mount/unmount.

#### Scenario: Banner appears after mode switch reveals a difference
- **WHEN** the comparison banner becomes relevant (modes produce different results)
- **THEN** the banner fades in with an opacity transition over 200ms

#### Scenario: Banner disappears when modes align
- **WHEN** the comparison banner is no longer relevant (modes produce same results)
- **THEN** the banner fades out with an opacity transition over 200ms

### Requirement: Reduced motion accessibility
All transitions and animations SHALL be effectively disabled when the user's system has `prefers-reduced-motion: reduce` enabled.

#### Scenario: User has reduced motion enabled
- **WHEN** the operating system or browser is configured with `prefers-reduced-motion: reduce`
- **THEN** all transition and animation durations are reduced to near-zero (0.01ms) so state changes are instant

#### Scenario: User does not have reduced motion enabled
- **WHEN** no reduced-motion preference is set
- **THEN** all transitions play at their specified durations