Add entrance animations to hero section elements

- Add custom CSS keyframe animations for fade effects
- Logo fades down from above with 0.5s delay
- Manorah fades up from bottom with 0.2s delay
- Eyes fade in from left with 0.7s delay
- Brain fades in from right with 0.7s delay
- Add overflow-hidden to section to contain animations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <209825114+claude[bot]@users.noreply.github.com>

Author: dtinth

src/pages/index.astro

@@ -7,33 +7,95 @@ import manorah from "../assets/manorah_cappuccina_blur.webp?url";
 import Layout from "../layouts/Layout.astro";
 ---
 
+<style>
+  @keyframes fadeDown {
+    from {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeLeft {
+    from {
+      opacity: 0;
+      transform: translateX(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fadeRight {
+    from {
+      opacity: 0;
+      transform: translateX(-30px);
+    }
+    to {
+      opacity: 1;  
+      transform: translateX(0);
+    }
+  }
+
+  .animate-fade-down {
+    animation: fadeDown 1s ease-out 0.5s both;
+  }
+
+  .animate-fade-up {
+    animation: fadeUp 1s ease-out 0.2s both;
+  }
+
+  .animate-fade-left {
+    animation: fadeLeft 1s ease-out 0.7s both;
+  }
+
+  .animate-fade-right {
+    animation: fadeRight 1s ease-out 0.7s both;
+  }
+</style>
+
 <Layout>
   <main class="bg-black">
     <section
-      class="px-4 pt-16 relative bg-cover bg-center"
+      class="px-4 pt-16 relative bg-cover bg-center overflow-hidden"
       style={`background-image: url(${heroBg})`}
     >
       <div class="flex flex-col justify-center items-center relative">
         <img
           src={logotype}
           alt="Stupido Hackettino"
-          class="w-[420px] mb-0 z-10 relative"
+          class="w-[420px] mb-0 z-10 relative animate-fade-down"
         />
         <div class="relative">
           <img
             src={manorah}
             alt="Manorah Cappuccina Blur"
-            class="w-[640px] rounded-lg shadow-lg -mt-20 z-20 relative"
+            class="w-[640px] rounded-lg shadow-lg -mt-20 z-20 relative animate-fade-up"
           />
           <img
             src={eyes}
             alt="Eyes"
-            class="absolute -left-1 top-1/3 -translate-1/2 w-[30%] z-15"
+            class="absolute -left-1 top-1/3 -translate-1/2 w-[30%] z-15 animate-fade-right"
           />
           <img
             src={brain}
             alt="Brain"
-            class="absolute -right-1 top-1/2 -translate-y-1/2 translate-x-1/2 w-[30%] z-15"
+            class="absolute -right-1 top-1/2 -translate-y-1/2 translate-x-1/2 w-[30%] z-15 animate-fade-left"
           />
         </div>
       </div>