Fixed issue with broken span

Promt to Kagi Code:
The text rendered at the start seems to not properly handle the span. See the included screenshot. 

1 files changed, 40 insertions, 22 deletions

diff --git a/static/script.js b/static/script.js
index e1fd02c..6a833fe 100644
--- a/static/script.js
+++ b/static/script.js
@@ -65,7 +65,6 @@ document.querySelector('.contact-form').addEventListener('submit', function(e) {
     e.preventDefault();
 
     // Get form data
-    const formData = new FormData(this);
     const name = this.querySelector('input[type="text"]').value;
     const email = this.querySelector('input[type="email"]').value;
     const message = this.querySelector('textarea').value;
@@ -91,27 +90,6 @@ document.querySelector('.contact-form').addEventListener('submit', function(e) {
     }, 2000);
 });
 
-// Add typing animation to hero title
-const heroTitle = document.querySelector('.hero-title');
-if (heroTitle) {
-    const text = heroTitle.innerHTML;
-    heroTitle.innerHTML = '';
-
-    let i = 0;
-    const typeWriter = () => {
-        if (i < text.length) {
-            heroTitle.innerHTML += text.charAt(i);
-            i++;
-            setTimeout(typeWriter, 50);
-        }
-    };
-
-    // Start typing animation after page load
-    window.addEventListener('load', () => {
-        setTimeout(typeWriter, 500);
-    });
-}
-
 // Parallax effect for floating cards
 window.addEventListener('scroll', () => {
     const scrolled = window.pageYOffset;
@@ -124,6 +102,46 @@ window.addEventListener('scroll', () => {
     });
 });
 
+// Hero title fade-in animation
+window.addEventListener('load', () => {
+    const heroTitle = document.querySelector('.hero-title');
+    const heroSubtitle = document.querySelector('.hero-subtitle');
+    const heroButtons = document.querySelector('.hero-buttons');
+
+    if (heroTitle) {
+        heroTitle.style.opacity = '0';
+        heroTitle.style.transform = 'translateY(30px)';
+        heroTitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+
+        setTimeout(() => {
+            heroTitle.style.opacity = '1';
+            heroTitle.style.transform = 'translateY(0)';
+        }, 300);
+    }
+
+    if (heroSubtitle) {
+        heroSubtitle.style.opacity = '0';
+        heroSubtitle.style.transform = 'translateY(30px)';
+        heroSubtitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+
+        setTimeout(() => {
+            heroSubtitle.style.opacity = '1';
+            heroSubtitle.style.transform = 'translateY(0)';
+        }, 500);
+    }
+
+    if (heroButtons) {
+        heroButtons.style.opacity = '0';
+        heroButtons.style.transform = 'translateY(30px)';
+        heroButtons.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+
+        setTimeout(() => {
+            heroButtons.style.opacity = '1';
+            heroButtons.style.transform = 'translateY(0)';
+        }, 700);
+    }
+});
+
 // Add mobile menu styles dynamically
 const style = document.createElement('style');
 style.textContent = `