Handle mode SVG animation prefers reduced motion

Author: mcecode

src/styles/page.scss

@@ -146,10 +146,19 @@ p.larger-spacing {
 // Animations
 
 .rotate-appear {
-  animation: 250ms ease-in-out forwards rotate-appear;
+  animation: 0ms ease-in-out forwards rotate-appear;
 }
 .rotate-vanish {
-  animation: 250ms ease-in-out reverse forwards rotate-appear;
+  animation: 0ms ease-in-out reverse forwards rotate-appear;
+}
+
+@include m-motion {
+  .rotate-appear {
+    animation-duration: 250ms;
+  }
+  .rotate-vanish {
+    animation-duration: 250ms;
+  }
 }
 
 @keyframes rotate-appear {

src/styles/partials/_media.scss

@@ -4,6 +4,12 @@
   }
 }
 
+@mixin motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}
+
 @mixin small {
   @media (min-width: 28em) {
     @content;