From eeece2f24d07a30805968f81fac864b989f8f9e6 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Fri, 3 Jul 2026 11:56:26 +0200
Subject: [PATCH] fix: restore hero animations in tailwind v4

---
 styles/globals.css | 68 ++++++++++++++++++++++------------------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index cd6838c00..154853c6d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -178,47 +178,45 @@
 }
 
 /* E-TIB Custom Utilities (from previous globals.css) */
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-  
-  .hide-scrollbar {
-    -ms-overflow-style: none !important;  /* IE and Edge */
-    scrollbar-width: none !important;  /* Firefox */
-  }
-  .hide-scrollbar::-webkit-scrollbar {
-    display: none !important; /* Chrome, Safari and Opera */
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility hide-scrollbar {
+  -ms-overflow-style: none !important;
+  scrollbar-width: none !important;
+  &::-webkit-scrollbar {
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
   }
+}
 
-  @keyframes bg-pulse-15 {
-    0%, 90%, 100% { opacity: 0.04; }
-    95% { opacity: 0.10; filter: brightness(1.2); }
-  }
-  @keyframes bg-pulse-20 {
-    0%, 90%, 100% { opacity: 0.07; }
-    95% { opacity: 0.14; filter: brightness(1.2); }
-  }
-  .animate-bg-pulse-15 { animation: bg-pulse-15 12s infinite ease-in-out; }
-  .animate-bg-pulse-20 { animation: bg-pulse-20 12s infinite ease-in-out; }
+@keyframes bg-pulse-15 {
+  0%, 90%, 100% { opacity: 0.04; }
+  95% { opacity: 0.10; filter: brightness(1.2); }
+}
+@keyframes bg-pulse-20 {
+  0%, 90%, 100% { opacity: 0.07; }
+  95% { opacity: 0.14; filter: brightness(1.2); }
+}
+@utility animate-bg-pulse-15 { animation: bg-pulse-15 12s infinite ease-in-out; }
+@utility animate-bg-pulse-20 { animation: bg-pulse-20 12s infinite ease-in-out; }
 
-  @keyframes hero-fade-in-up {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-  .animate-hero-fade-in-up {
-    animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  }
+@keyframes hero-fade-in-up {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@utility animate-hero-fade-in-up {
+  animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
 
-  @keyframes hero-zoom-out {
-    from { transform: scale(1.05); }
-    to { transform: scale(1); }
-  }
-  .animate-hero-zoom-out {
-    animation: hero-zoom-out 1.5s ease-out forwards;
-  }
+@keyframes hero-zoom-out {
+  from { transform: scale(1.05); }
+  to { transform: scale(1); }
+}
+@utility animate-hero-zoom-out {
+  animation: hero-zoom-out 1.5s ease-out forwards;
 }
 
 /* Base Styles */