I need this section to have some animation and rise up slowly upon loading the page

index.html

@@ -33,8 +33,16 @@
             <div class="flex-shrink-0 flex items-center">
                         <img id="logo" src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-10 opacity-0">
                         <span id="tagline" class="text-xs text-yellow-400 opacity-0 ml-2">Just list it, with perfection!</span>
+        </div>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                setTimeout(() => {
+                    document.getElementById('hero-logo').classList.remove('opacity-0', 'translate-y-10');
+                    document.getElementById('hero-tagline').classList.remove('opacity-0', 'translate-y-10');
+                }, 200);
+            });
+        </script>
 </div>
-                </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                     <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:text-orange-400">Home</a>
                     <a href="about.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
@@ -56,9 +64,9 @@
     <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
         <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <div class="absolute inset-0 bg-[url('https://static.photos/legal/1200x630/42')] opacity-10 bg-cover bg-center -z-10"></div>
-            <img src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-80 mx-auto mb-6">
-            <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
-                Just list it, with perfection!
+            <img id="hero-logo" src="https://huggingface.co/spaces/Twinory/undefined/resolve/main/images/TWINORY%20Logo%20-%20Edited.png" alt="Twinory Logo" class="h-80 mx-auto mb-6 opacity-0 transform translate-y-10 transition-all duration-1000">
+            <p id="hero-tagline" class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto opacity-0 transform translate-y-10 transition-all duration-1000 delay-300">
+Just list it, with perfection!
             </p>
         </div>
 </div>