From 2928995bffb5994104491a4ee5d1d6d831737161 Mon Sep 17 00:00:00 2001
From: Rez <13340707+rezrah@users.noreply.github.com>
Date: Thu, 31 Oct 2024 09:08:24 +0000
Subject: [PATCH] remove motion when reduced-motion is enabled (#805)

---
 .changeset/flat-socks-bathe.md                               | 5 +++++
 .changeset/wet-peas-marry.md                                 | 5 +++++
 packages/react/src/css/reset.css                             | 5 ++---
 .../src/river/RiverStoryScroll/RiverStoryScroll.module.css   | 2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/flat-socks-bathe.md
 create mode 100644 .changeset/wet-peas-marry.md

diff --git a/.changeset/flat-socks-bathe.md b/.changeset/flat-socks-bathe.md
new file mode 100644
index 000000000..ef17cd461
--- /dev/null
+++ b/.changeset/flat-socks-bathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Disabled all transitions and auto-staggering when `reduced-motion` user preference is enabled
diff --git a/.changeset/wet-peas-marry.md b/.changeset/wet-peas-marry.md
new file mode 100644
index 000000000..e3e759410
--- /dev/null
+++ b/.changeset/wet-peas-marry.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Removed negative margin from `RiverStoryScroll` when `reduced-motion` user preference is enabled
diff --git a/packages/react/src/css/reset.css b/packages/react/src/css/reset.css
index 70741fd3b..f939883fd 100644
--- a/packages/react/src/css/reset.css
+++ b/packages/react/src/css/reset.css
@@ -73,9 +73,8 @@ select {
   *,
   *::before,
   *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+    animation: none !important;
+    transition: none !important;
     scroll-behavior: auto !important;
   }
 }
diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css
index 246e3ae67..049309923 100644
--- a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css
+++ b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css
@@ -459,7 +459,7 @@
   }
 }
 
-@media screen and (min-width: 768px) and (min-height: 900px) {
+@media screen and (min-width: 768px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {
   .RiverStoryScroll {
     margin-top: -20vh;
   }