Disable transition and animation durations if @prefers-reduced-motion.

This doesn't include the actual figure SVG animations, only CSS.

src/components/AboutSchematics/about-schematics.css

@@ -17,6 +17,10 @@ about-schematics {
     --appear-animation-duration: .8s;
     --appear-animation-easing: cubic-bezier(.16, 1, .3, 1);
 
+    @media (prefers-reduced-motion: reduce) {
+      --appear-animation-duration: 0s;
+    }
+
     max-width: 70ch;
     font-size: var(--ms1);
     line-height: var(--triple-baseline);

src/components/SchematicsFigure/schematics-figure.css

@@ -121,6 +121,8 @@
       &--jitter {
         animation: jitter var(--schematics-figure-jitter-duration);
         animation-direction: reverse;
+
+        @media (prefers-reduced-motion: reduce) { animation: none; }
       }
     }
 
@@ -132,6 +134,8 @@
 
     &--hiding &__diagram-container {
       animation: jitter var(--jitter-animation-duration);
+
+      @media (prefers-reduced-motion: reduce) { animation: none; }
     }
 
     &--light-up &__diagram-container {
@@ -142,6 +146,10 @@
       animation:
         light-up-diagram var(--schematics-figure-light-up-duration) var(--schematics-figure-light-up-easing),
         jitter var(--schematics-figure-jitter-duration) reverse;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: light-up-diagram var(--schematics-figure-light-up-duration) var(--schematics-figure-light-up-easing);
+      }
     }
 
     &--fuzzy &__diagram-container {
@@ -190,6 +198,10 @@
       animation:
         text-shadow-flicker var(--jitter-animation-duration) ease-out,
         jitter var(--jitter-animation-duration);
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: text-shadow-flicker var(--jitter-animation-duration) ease-out;
+      }
     }
 
     &--light-up &__figcaption {

src/components/SchematicsFigurePreviews/schematics-figure-previews.css

@@ -22,6 +22,11 @@ schematics-figure-previews {
   --item-max-static-width: 16rem;
   --item-size: min(var(--item-max-static-width), var(--item-max-relative-width));
 
+  @media (prefers-reduced-motion: reduce) {
+    --fade-duration: 0s;
+    --pre-fade-duration: 0s;
+  }
+
   display: block;
   width: 100%;
   min-height: var(--item-size); /* Prevents layout shift before previews load */

src/css/color-schemes.css

@@ -25,6 +25,10 @@
 
   --color-scheme-transition-duration: .3s;
   --color-scheme-transition-easing: cubic-bezier(.25, 1, .5, 1);
+
+  @media (prefers-reduced-motion: reduce) {
+    --color-scheme-transition-duration: 0s;
+  }
 }
 
 [data-color-scheme="light"] {

src/css/main.css

@@ -41,6 +41,13 @@
   @media (--layout-aside-always-visible) {
     --page-padding: var(--triple-baseline);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    --micro-interaction-animation-duration: 0s;
+    --figure-pre-exit-transition-duration: 0s;
+    --figure-exit-transition-duration: 0s;
+    --figure-appear-transition-duration: 0s;
+  }
 }
 
 [data-visible-view*="individual"] {