From 64f2864617fad2b73d529ac85a36b9c5bbdf4f82 Mon Sep 17 00:00:00 2001
From: dusk <y.bera003.06@protonmail.com>
Date: Sun, 29 Sep 2024 21:53:59 +0300
Subject: [PATCH] fix: navbuttons now bounce in reverse

this makes it so that the user cant trigger a reset of the animation by just placing the cursor at the bottom and the button going out of the cursors area
---
 src/components/navButton.svelte |  2 +-
 src/styles/app.css              | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/navButton.svelte b/src/components/navButton.svelte
index 31bfb2e..1f1c07e 100644
--- a/src/components/navButton.svelte
+++ b/src/components/navButton.svelte
@@ -10,7 +10,7 @@
 	max-w-36 p-0.5 pr-1.5 border-ralsei-white border-4
 	{highlight
 		? 'min-w-36 bg-gradient-to-l to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30% border-ridge motion-safe:animate-pulse hover:animate-none'
-		: 'w-fit border-double hover:border-solid motion-safe:hover:animate-bounce hover:underline'}
+		: 'w-fit border-double hover:border-solid animate-bounce-reverse hover:underline'}
 	flex gap-1 items-center justify-center align-middle text-center
 	{highlight ? 'text-ralsei-pink-regular app-selected-route' : 'text-ralsei-green-light'}
 	"
diff --git a/src/styles/app.css b/src/styles/app.css
index d9652ab..a03d99e 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -175,6 +175,24 @@
             background-position: 0px 0px;
         }
     }
+
+    @media (prefers-reduced-motion: no-preference) {
+        @keyframes bounce-reverse {
+            0%, 100% {
+                transform: none;
+                animation-timing-function: cubic-bezier(0,0,0.2,1);
+            }
+            50% {
+                transform: translateY(-25%);
+                animation-timing-function: cubic-bezier(0.8,0,1,1);
+            }
+        }
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .animate-bounce-reverse:hover {
+            animation: bounce-reverse 1s infinite;
+        }
+    }
 }
 
 a.app-selected-route {