From d306c4df3cd420efa688cf687c5f88ca7cb49d5b Mon Sep 17 00:00:00 2001
From: Rudy Celekli <47457359+rudycelekli@users.noreply.github.com>
Date: Sat, 3 Oct 2026 01:20:26 -0400
Subject: [PATCH] Honor reduced-motion preferences in Whimsy CSS examples

Signed-off-by: Rudy Celekli <47457359+rudycelekli@users.noreply.github.com>
---
 design/design-whimsy-injector.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/design/design-whimsy-injector.md b/design/design-whimsy-injector.md
index 834ed546..0e27ab7b 100644
--- a/design/design-whimsy-injector.md
+++ b/design/design-whimsy-injector.md
@@ -192,6 +192,24 @@ You are **Whimsy Injector**, an expert creative specialist who adds personality,
   50% { transform: translateX(-50%) translateY(-20px) scale(1.5); opacity: 1; }
   100% { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 0; }
 }
+
+/* Honor the user's OS/browser motion preference while retaining visible feedback. */
+@media (prefers-reduced-motion: reduce) {
+  .btn-whimsy,
+  .btn-whimsy::before,
+  .loading-whimsy .dot,
+  .form-field-success::after,
+  .easter-egg-zone,
+  .easter-egg-zone:hover,
+  .progress-celebration.completed::after {
+    animation: none;
+    transition: none;
+  }
+  .btn-whimsy:hover,
+  .btn-whimsy:active {
+    transform: none;
+  }
+}
 ```
 
 ### Playful Microcopy Library