From fce022899222ba0564f5d84c82fb933f2efa955a Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Mon, 4 May 2026 17:59:07 -0700
Subject: [PATCH] fix(D9): respect reduced motion preference

---
 web/src/index.css                | 11 +++++++++++
 web/src/reducedMotionCss.test.ts | 14 ++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 web/src/reducedMotionCss.test.ts

diff --git a/web/src/index.css b/web/src/index.css
index 49a2266..0681657 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -62,6 +62,17 @@ body {
   to   { transform: rotate(360deg); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
 .dashboard-shell {
   display: flex;
   min-height: 100vh;
diff --git a/web/src/reducedMotionCss.test.ts b/web/src/reducedMotionCss.test.ts
new file mode 100644
index 0000000..7ad4fdb
--- /dev/null
+++ b/web/src/reducedMotionCss.test.ts
@@ -0,0 +1,14 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+describe('reduced-motion CSS guard', () => {
+  it('disables animations and transitions when requested by the user', () => {
+    const cssPath = `${process.cwd()}/src/index.css`;
+    const css = readFileSync(cssPath, 'utf8');
+
+    expect(css).toContain('@media (prefers-reduced-motion: reduce)');
+    expect(css).toContain('animation-duration: 0.001ms !important');
+    expect(css).toContain('animation-iteration-count: 1 !important');
+    expect(css).toContain('transition-duration: 0.001ms !important');
+  });
+});