Adds a CSS media query that respects user motion preferences by:
- Disabling all animations and transitions when prefers-reduced-motion: reduce
- Using !important to override all animation/transition declarations
- Ensuring focus-visible outline remains visible for keyboard navigation
This improves accessibility for users with motion sensitivity.
Co-Authored-By: Claude Haiku 4.5 <redacted>
@apply left-[-4px] right-auto;
transform: rotate(315deg);
}
+
+/* Motion Safety - Respect prefers-reduced-motion */
+
+@media (prefers-reduced-motion: reduce) {
+ /* Remove all animations */
+ *,
+ *::before,
+ *::after {
+ animation: none !important;
+ transition: none !important;
+ }
+
+ /* Ensure focus-visible is still visible */
+ :focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+ }
+}