From 64a2d4f9cbd3ffab6c83db81474bec339bf51fd7 Mon Sep 17 00:00:00 2001
From: Leon Mika <lmika@lmika.com>
Date: Thu, 19 Jun 2025 23:34:58 +0200
Subject: [PATCH] Added reduce motion transitions

---
 public/style.css | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index 59cd86c..59dae3f 100644
--- a/public/style.css
+++ b/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;
-}
\ No newline at end of file
+}
+
+@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;
+  }
+}