Static nav for reduced motion fixes (#15275) (#15279)

* update navigation to be sticky when reduced motion is on

* remove menu slide in animation when reduced motion is on

* update mobile nav to respect reduced motion preference

media/css/m24/components/navigation-refresh.scss

@@ -22,11 +22,37 @@
     left: 0;
     box-shadow: none;
 
+    @media (prefers-reduced-motion: reduce) {
+        position: static;
+    }
+
     @media #{$mq-md} {
         display: block;
     }
 }
 
+// * -------------------------------------------------------------------------- */
+// Sticky navigation styles
+@supports (position: sticky) {
+    html.mzp-has-sticky-navigation {
+        .m24-navigation-refresh.m24-mzp-is-sticky {
+            @include transition(transform 300ms ease-in-out);
+            position: sticky;
+            z-index: 1000;
+
+            &.mzp-is-scrolling {
+                // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
+                // We can't use a $box-shadow token here because it needs a different size and offset
+                box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
+            }
+
+            &.mzp-is-hidden {
+                @include transform(translate(0, -110%));
+            }
+        }
+    }
+}
+
 // Common navigation styles
 .m24-c-navigation-l-content {
     position: relative;
@@ -121,6 +147,10 @@
             overflow: hidden auto;
             animation: nav-slide-in 0.45s ease;
 
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+
             .m24-c-menu-category-list:has(.m24-c-menu-category.mzp-is-selected) {
                 margin-bottom: 0;
 
@@ -211,6 +241,10 @@
             margin-top: 98px;
             animation: nav-slide-in 0.45s ease;
 
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+
             @media #{$mq-md} {
                 display: block;
                 margin-top: 64px;
@@ -532,31 +566,6 @@
     }
 }
 
-// * -------------------------------------------------------------------------- */
-// Sticky navigation styles
-
-@supports (position: sticky) {
-    html.mzp-has-sticky-navigation {
-        .m24-navigation-refresh.m24-mzp-is-sticky {
-            @media #{$mq-md} {
-                @include transition(transform 300ms ease-in-out);
-                position: sticky;
-                z-index: 1000;
-
-                &.mzp-is-scrolling {
-                    // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
-                    // We can't use a $box-shadow token here because it needs a different size and offset
-                    box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12);
-                }
-
-                &.mzp-is-hidden {
-                    @include transform(translate(0, -110%));
-                }
-            }
-        }
-    }
-}
-
 // page content - hide all content except for the nav when mobile nav menu is open
 // This is not part of Protocol, it is specifc to Bedrock; should be documented in future
 body:has(.m24-c-navigation-items.mzp-is-open) {