From 95b19ecf4b722038789b02b6d84182cd41b43679 Mon Sep 17 00:00:00 2001
From: Gonzalo Vidal <35148159+Gonza10V@users.noreply.github.com>
Date: Thu, 9 Jul 2026 10:43:23 -0600
Subject: [PATCH] Fix hero neon scan animation

---
 src/pages/index.astro |  6 ++++--
 src/styles/global.css | 13 +++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index c5831a4..fa28e5b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -378,11 +378,15 @@ const learningLoops = [
   </section>
 
   <script>
+    let hasPlayedHeroScan = false;
+
     const playHeroScan = () => {
       const hero = document.querySelector('[data-hero-neon]');
       if (!hero) return;
+      if (hasPlayedHeroScan) return;
       if (document.documentElement.dataset.animations === 'off') return;
       if (hero.classList.contains('hero-neon-text--active')) return;
+      hasPlayedHeroScan = true;
       hero.classList.add('hero-neon-text--active');
     };
 
@@ -420,8 +424,6 @@ const learningLoops = [
     window.setTimeout(playHeroScan, 420);
 
     document.querySelectorAll('[data-hero-neon]').forEach((hero) => {
-      hero.addEventListener('pointerenter', playHeroScan);
-
       hero.addEventListener('animationend', () => {
         hero.classList.remove('hero-neon-text--active');
       });
diff --git a/src/styles/global.css b/src/styles/global.css
index 5079bb8..b61c6c4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -236,7 +236,8 @@ main {
 .hero-neon-text {
   position: relative;
   overflow: visible;
-  line-height: 0.98;
+  padding-bottom: 0.08em;
+  line-height: 1.06;
   background-image: linear-gradient(
     100deg,
     #0f172a 0%,
@@ -248,7 +249,7 @@ main {
     #0f172a 100%
   );
   background-size: 240% 100%;
-  background-position: 120% 0;
+  background-position: -120% 0;
   color: transparent;
   background-clip: text;
   filter: drop-shadow(0 0 0 rgba(57, 255, 20, 0));
@@ -257,7 +258,7 @@ main {
 }
 
 .hero-neon-text--active {
-  animation: hero-neon-scan 1.6s var(--ease-out) 1;
+  animation: hero-neon-scan 1s var(--ease-out) 1;
   will-change: background-position, filter;
 }
 
@@ -954,7 +955,7 @@ html.dark .metric-card__stat {
 
 @keyframes hero-neon-scan {
   from {
-    background-position: 120% 0;
+    background-position: -120% 0;
     filter: drop-shadow(0 0 0 rgba(57, 255, 20, 0));
   }
 
@@ -963,7 +964,7 @@ html.dark .metric-card__stat {
   }
 
   to {
-    background-position: -120% 0;
+    background-position: 120% 0;
     filter: drop-shadow(0 0 0 rgba(57, 255, 20, 0));
   }
 }
@@ -1013,7 +1014,7 @@ html.dark .metric-card__stat {
   }
 
   .hero-neon-text {
-    line-height: 1.02;
+    line-height: 1.08;
   }
 
   .bio-orbit {