Add prefers-reduced-motion support for animations

[ravisuhag]

Summary

Components with animations (transitions, shimmer effects, slide-ins) do not respect prefers-reduced-motion user preference. Users who have configured their OS to reduce motion still see all animations, which can cause discomfort or accessibility issues.

Goal

All animated components should respect the prefers-reduced-motion: reduce media query by either disabling or simplifying their animations.

Affected Components

Component	Issue	Details
Skeleton (#638)	item 2	Shimmer animation plays regardless of user preference
Sheet (#635)	item 4	250ms cubic-bezier(0.16, 1, 0.3, 1) hardcoded, not customizable
Link (#625)	item 4	transition: opacity 0.2s ease with no reduced-motion query
Dialog (#613)	item 3	Animation durations/easing hardcoded, no reduced-motion support

Pattern

/* Add to all animated components */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    transition: none;
  }
}

Additionally, animation duration values should use CSS custom properties for theming:

.element {
  transition-duration: var(--rs-transition-duration-normal, 200ms);
}

@media (prefers-reduced-motion: reduce) {
  .element {
    transition-duration: 0ms;
  }
}

Scope

This also applies to components not yet listed but that have animations:

• Accordion (expand/collapse)
• Popover (enter/exit)
• Tooltip (enter/exit)
• DropdownMenu (enter/exit)
• Toast (enter/exit)
• Collapsible (expand/collapse)

Acceptance Criteria

• All animated components have prefers-reduced-motion media queries
• Animation durations use CSS custom properties where feasible
• No jarring motion for users with reduced-motion preference
• Functionality is preserved (elements still appear/disappear, just without animation)

[paanSinghCoder]

Note: We added the support for prefers-reduced-motion to a few components already. We need to add it globally.

[paanSinghCoder]

PR-717