Added reduce motion transitions

public/style.css

@@ -112,6 +112,27 @@ input[type=radio] {
   }
 }
 
+@keyframes fade-out {
+  from {
+    opacity: 100%;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 100%;
+  }
+}
+
+
 /* Apply the custom animation to the old and new page states */
 ::view-transition-old(root) {
   animation: 0.3s ease-in both move-out;
@@ -119,4 +140,14 @@ input[type=radio] {
 
 ::view-transition-new(root) {
   animation: 0.3s ease-in both move-in;
-}
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root) {
+    animation: 0.3s ease-in both fade-out;
+  }
+
+  ::view-transition-new(root) {
+    animation: 0.3s ease-in both fade-in;
+  }
+}