add a animation for cosmic creator

index.html

@@ -47,7 +47,22 @@
         body {
             font-family: 'Space Grotesk', sans-serif;
         }
-        .cursor-dot {
+        @keyframes textReveal {
+            0% {
+                transform: translateY(100%);
+                opacity: 0;
+            }
+            100% {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        .animate-text-reveal {
+            animation: textReveal 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+            animation-delay: var(--delay);
+            opacity: 0;
+        }
+.cursor-dot {
             width: 8px;
             height: 8px;
             background-color: #6e45e2;
@@ -131,9 +146,12 @@
                 <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
             </div>
             <h1 class="text-5xl md:text-7xl font-bold mb-4">
-                <span class="bg-gradient-to-r from-cosmic to-nebula bg-clip-text text-transparent">Cosmic</span> Creator
+                <span class="bg-gradient-to-r from-cosmic to-nebula bg-clip-text text-transparent relative inline-block">
+                    <span class="animate-text-reveal inline-block" style="--delay: 0.1s">Cosmic</span>
+                </span> 
+                <span class="animate-text-reveal inline-block" style="--delay: 0.3s">Creator</span>
             </h1>
-            <p class="text-xl md:text-2xl text-nebula mb-8 max-w-2xl mx-auto">
+<p class="text-xl md:text-2xl text-nebula mb-8 max-w-2xl mx-auto">
                 Designing stellar digital experiences that orbit beyond imagination
             </p>
             <div class="flex flex-col sm:flex-row justify-center gap-4">
@@ -567,9 +585,18 @@
 
         window.addEventListener("scroll", animateOnScroll);
         window.addEventListener("load", animateOnScroll);
+        // Animate cosmic creator on load
+        document.addEventListener('DOMContentLoaded', () => {
+            setTimeout(() => {
+                const letters = document.querySelectorAll('.animate-text-reveal');
+                letters.forEach(letter => {
+                    letter.style.animationPlayState = 'running';
+                });
+            }, 500);
+        });
 
         // Initialize feather icons
         feather.replace();
-    </script>
+</script>
 </body>
 </html>