From e68b5b8b5adf790d838aaf30a9637ff80ccdb0a7 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Mon, 24 Aug 2026 12:52:47 +0200
Subject: [PATCH] fix(app): stop animations running under reduced motion
 (#1956)

---
 .../features/accessibility/components/NekoSprite.module.css  | 2 +-
 .../src/features/channel/components/ChannelHeader.module.css | 5 +++++
 fluxer_app/src/features/theme/styles/Typing.module.css       | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/fluxer_app/src/features/accessibility/components/NekoSprite.module.css b/fluxer_app/src/features/accessibility/components/NekoSprite.module.css
index 0812add9d..946242d4d 100644
--- a/fluxer_app/src/features/accessibility/components/NekoSprite.module.css
+++ b/fluxer_app/src/features/accessibility/components/NekoSprite.module.css
@@ -50,7 +50,7 @@
 }
 
 :global(html.reduced-motion) .heart {
-	animation: nekoHeartFade 0.8s ease-out forwards;
+	animation: nekoHeartFade 0.8s ease-out forwards !important;
 }
 
 @keyframes nekoHeartFade {
diff --git a/fluxer_app/src/features/channel/components/ChannelHeader.module.css b/fluxer_app/src/features/channel/components/ChannelHeader.module.css
index fa60ef593..401d38a23 100644
--- a/fluxer_app/src/features/channel/components/ChannelHeader.module.css
+++ b/fluxer_app/src/features/channel/components/ChannelHeader.module.css
@@ -156,6 +156,11 @@
 	animation: callBannerRing 1.6s ease-in-out infinite;
 }
 
+:global(html.reduced-motion) .callBannerAvatarPending::before {
+	animation: none;
+	opacity: 0.7;
+}
+
 .callBannerAvatarPending .callBannerAvatar {
 	filter: grayscale(0.75);
 	opacity: 0.75;
diff --git a/fluxer_app/src/features/theme/styles/Typing.module.css b/fluxer_app/src/features/theme/styles/Typing.module.css
index 384d52895..0d11a3bc7 100644
--- a/fluxer_app/src/features/theme/styles/Typing.module.css
+++ b/fluxer_app/src/features/theme/styles/Typing.module.css
@@ -20,8 +20,8 @@
 }
 
 :global(html.reduced-motion) .dot {
-	animation-duration: 1s;
-	animation-iteration-count: infinite;
+	animation-duration: 1s !important;
+	animation-iteration-count: infinite !important;
 }
 
 :global(html:not(.window-focused):not(.unfocused-fully-interactive)) .dot {