From 8a9801eaeedb954df4a1437d1e3cd1616969d1fb Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 18 Apr 2026 23:51:18 +0530
Subject: [PATCH 1/3] fix: fade effect fallback for reduced motion

---
 frontend/src/styles/test.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 317e16f7b67e..ea1e0de30abb 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -530,6 +530,10 @@
   &.typed-effect-fade {
     .word.typed {
       animation: fadeOut 250ms ease-in 1 forwards;
+
+      @media (prefers-reduced-motion) {
+        opacity: 0;
+      }
     }
   }
 

From 0796d939354b7eaad4e6005d659fe41b9a955776 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sun, 19 Apr 2026 10:22:43 +0530
Subject: [PATCH 2/3] fix

---
 frontend/src/styles/test.scss | 23 ++---------------------
 1 file changed, 2 insertions(+), 21 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index ea1e0de30abb..88ccdc6b78d1 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -529,11 +529,7 @@
 
   &.typed-effect-fade {
     .word.typed {
-      animation: fadeOut 250ms ease-in 1 forwards;
-
-      @media (prefers-reduced-motion) {
-        opacity: 0;
-      }
+      animation: fadeOut 250ms ease-in 1 forwards !important;
     }
   }
 
@@ -574,7 +570,7 @@
         color: var(--bg-color);
         animation: typedEffectToDust 200ms ease-out 0ms 1 forwards !important;
         &::after {
-          animation: typedEffectFadeIn 100ms ease-in 100ms 1 forwards;
+          animation: typedEffectFadeIn 100ms ease-in 100ms 1 forwards !important;
           background: var(--c-dot);
         }
       }
@@ -588,21 +584,6 @@
     &.withLigatures:not(.blind) .word.broken-ligatures letter.incorrect::after {
       background: var(--c-dot--error);
     }
-
-    @media (prefers-reduced-motion) {
-      &:not(.withLigatures) .word.typed,
-      &.withLigatures .word.broken-ligatures.typed {
-        letter {
-          animation: none !important;
-          transform: scale(0.4);
-          color: transparent;
-          &::after {
-            animation: none !important;
-            opacity: 1;
-          }
-        }
-      }
-    }
   }
 }
 

From b41accbe5f84cc16e728e5672ce6674e5142968e Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sun, 19 Apr 2026 17:34:43 +0530
Subject: [PATCH 3/3] revert dots and add fade to exempt list

---
 frontend/src/styles/media-queries.scss |  7 ++++++-
 frontend/src/styles/test.scss          | 19 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/media-queries.scss b/frontend/src/styles/media-queries.scss
index e9358c2d5290..b080cdc9b3b7 100644
--- a/frontend/src/styles/media-queries.scss
+++ b/frontend/src/styles/media-queries.scss
@@ -43,7 +43,12 @@ body {
 
 @media (prefers-reduced-motion) {
   body:not(.ignore-reduced-motion)
-    *:not(.fa-spin, .animate-\[loader\], .preloader) {
+    *:not(
+      .fa-spin,
+      .animate-\[loader\],
+      .preloader,
+      .typed-effect-fade .word.typed
+    ) {
     animation: none !important;
     transition: none !important;
 
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 88ccdc6b78d1..317e16f7b67e 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -529,7 +529,7 @@
 
   &.typed-effect-fade {
     .word.typed {
-      animation: fadeOut 250ms ease-in 1 forwards !important;
+      animation: fadeOut 250ms ease-in 1 forwards;
     }
   }
 
@@ -570,7 +570,7 @@
         color: var(--bg-color);
         animation: typedEffectToDust 200ms ease-out 0ms 1 forwards !important;
         &::after {
-          animation: typedEffectFadeIn 100ms ease-in 100ms 1 forwards !important;
+          animation: typedEffectFadeIn 100ms ease-in 100ms 1 forwards;
           background: var(--c-dot);
         }
       }
@@ -584,6 +584,21 @@
     &.withLigatures:not(.blind) .word.broken-ligatures letter.incorrect::after {
       background: var(--c-dot--error);
     }
+
+    @media (prefers-reduced-motion) {
+      &:not(.withLigatures) .word.typed,
+      &.withLigatures .word.broken-ligatures.typed {
+        letter {
+          animation: none !important;
+          transform: scale(0.4);
+          color: transparent;
+          &::after {
+            animation: none !important;
+            opacity: 1;
+          }
+        }
+      }
+    }
   }
 }