From: Danilo M. <redacted>
Date: Fri, 17 Apr 2026 07:24:39 +0000 (+0200)
Subject: feat: add prefers-reduced-motion support (disable animations when motion-reduced)
X-Git-Tag: release_22042026-1342~174
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=68c5ddcbe358df8bbbc1a40b9a596c60e19c21d7;p=danix.xyz-2.git

feat: add prefers-reduced-motion support (disable animations when motion-reduced)

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

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 8d05052..99a278d 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -1163,3 +1163,21 @@ select:focus-visible {
   @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;
+  }
+}