From 2840098592d0041f2f4655b86f34f754e5748213 Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Mon, 12 Jan 2026 15:52:38 -0500
Subject: [PATCH] hopefully fixed phone wiggle issue

---
 src/app.css                            | 18 +++++++++-
 src/components/event/EventBlock.svelte | 50 ++------------------------
 2 files changed, 19 insertions(+), 49 deletions(-)

diff --git a/src/app.css b/src/app.css
index 2cc20bc..55ba627 100644
--- a/src/app.css
+++ b/src/app.css
@@ -28,7 +28,7 @@
 	--color-ecsess-black: #1f1f1f;
 	--color-ecsess-black-hover: #161917;
 
-	--animate-wiggle: wiggle 1s ease-in-out;
+	--animate-wiggle: wiggle 0.5s ease-in-out;
 	@keyframes wiggle {
 		0% {
 			transform: rotateY(0);
@@ -43,6 +43,22 @@
 			transform: rotateY(0);
 		}
 	}
+
+  --animate-wiggle-back: wiggle-back 0.5s ease-in-out;
+	@keyframes wiggle-back {
+		0% {
+			transform: rotateY(180deg);
+		}
+		33% {
+			transform: rotateY(185deg);
+		}
+		66% {
+			transform: rotateY(175deg);
+		}
+		100% {
+			transform: rotateY(180deg);
+		}
+	}
 }
 
 * {
diff --git a/src/components/event/EventBlock.svelte b/src/components/event/EventBlock.svelte
index a53d8d0..0ce86c4 100644
--- a/src/components/event/EventBlock.svelte
+++ b/src/components/event/EventBlock.svelte
@@ -81,8 +81,8 @@
 <div class="group relative flex h-full w-full flex-col rounded-2xl perspective-[1000px]">
 	<div
 		class="grid h-full w-full rounded-2xl text-center transition-transform duration-500 transform-3d {showDescription
-			? 'transform-[rotateY(180deg)]'
-			: ''}"
+			? 'transform-[rotateY(180deg)] hover:animate-wiggle-back'
+			: 'hover:animate-wiggle'}"
 	>
 		<!-- Front Side -->
 		<div
@@ -130,50 +130,4 @@
 	</div>
 </div>
 
-<style>
-	@media (min-width: 448px) {
-		.group:hover [data-flip-side='front']:not(.flipped) {
-			animation: wiggle 0.3s ease-in-out;
-			pointer-events: auto !important;
-		}
-		.group:hover [data-flip-side='back'].flipped {
-			animation: wiggleBack 0.3s ease-in-out;
-			pointer-events: auto !important;
-		}
-	}
 
-	[data-flip-side='front'],
-	[data-flip-side='back'] {
-		will-change: transform;
-	}
-
-	@keyframes wiggle {
-		0% {
-			transform: rotateY(0);
-		}
-		33% {
-			transform: rotateY(5deg);
-		}
-		66% {
-			transform: rotateY(-5deg);
-		}
-		100% {
-			transform: rotateY(0);
-		}
-	}
-
-	@keyframes wiggleBack {
-		0% {
-			transform: rotateY(180deg);
-		}
-		33% {
-			transform: rotateY(185deg);
-		}
-		66% {
-			transform: rotateY(175deg);
-		}
-		100% {
-			transform: rotateY(180deg);
-		}
-	}
-</style>