Add animated background to homepage hero

- Animated floating orbs with blur effect
- Floating particles rising animation
- Moving gradient lines
- Grid pattern with subtle movement
- Yellow glow effects on dark background

src/pages/index.astro

@@ -17,10 +17,34 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
        Large typography, overlapping elements
        ============================================= -->
   <section class="hero-section">
-    <!-- Background Elements -->
+    <!-- Animated Background Elements -->
     <div class="hero-bg">
       <div class="hero-grid"></div>
       <div class="hero-gradient"></div>
+      
+      <!-- Animated Orbs -->
+      <div class="orb orb-1"></div>
+      <div class="orb orb-2"></div>
+      <div class="orb orb-3"></div>
+      
+      <!-- Animated Particles -->
+      <div class="particles">
+        <div class="particle p-1"></div>
+        <div class="particle p-2"></div>
+        <div class="particle p-3"></div>
+        <div class="particle p-4"></div>
+        <div class="particle p-5"></div>
+        <div class="particle p-6"></div>
+        <div class="particle p-7"></div>
+        <div class="particle p-8"></div>
+      </div>
+      
+      <!-- Moving Lines -->
+      <div class="lines">
+        <div class="line line-1"></div>
+        <div class="line line-2"></div>
+        <div class="line line-3"></div>
+      </div>
     </div>
     
     <!-- Decorative Elements -->
@@ -378,8 +402,10 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
     position: absolute;
     inset: 0;
     z-index: 0;
+    overflow: hidden;
   }
 
+
   .hero-grid {
     position: absolute;
     inset: 0;
@@ -387,6 +413,12 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
       linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
       linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
     background-size: 60px 60px;
+    animation: gridMove 20s linear infinite;
+  }
+
+  @keyframes gridMove {
+    0% { transform: translate(0, 0); }
+    100% { transform: translate(60px, 60px); }
   }
 
   .hero-gradient {
@@ -396,6 +428,199 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
                 radial-gradient(ellipse at 70% 80%, rgba(254, 212, 0, 0.05) 0%, transparent 50%);
   }
 
+  /* =============================================
+     ANIMATED ORBS
+     ============================================= */
+  
+  .orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    opacity: 0.4;
+  }
+
+  .orb-1 {
+    width: 400px;
+    height: 400px;
+    background: rgba(254, 212, 0, 0.3);
+    top: -100px;
+    left: -100px;
+    animation: orbFloat1 8s ease-in-out infinite;
+  }
+
+  .orb-2 {
+    width: 300px;
+    height: 300px;
+    background: rgba(254, 212, 0, 0.2);
+    bottom: 10%;
+    right: 10%;
+    animation: orbFloat2 10s ease-in-out infinite;
+  }
+
+  .orb-3 {
+    width: 200px;
+    height: 200px;
+    background: rgba(254, 212, 0, 0.25);
+    top: 50%;
+    right: 30%;
+    animation: orbFloat3 6s ease-in-out infinite;
+  }
+
+
+  @keyframes orbFloat1 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(50px, 30px) scale(1.1); }
+    66% { transform: translate(-30px, 50px) scale(0.95); }
+  }
+
+  @keyframes orbFloat2 {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-60px, -40px) scale(1.15); }
+  }
+
+  @keyframes orbFloat3 {
+    0%, 100% { transform: translate(0, 0); }
+    25% { transform: translate(40px, -30px); }
+    75% { transform: translate(-40px, 30px); }
+  }
+
+  /* =============================================
+     ANIMATED PARTICLES
+     ============================================= */
+  
+  .particles {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .particle {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: var(--color-primary);
+    border-radius: 50%;
+    opacity: 0;
+  }
+
+  .p-1 {
+    top: 20%;
+    left: 10%;
+    animation: particleFloat 6s ease-in-out infinite;
+    animation-delay: 0s;
+  }
+
+  .p-2 {
+    top: 60%;
+    left: 20%;
+    animation: particleFloat 8s ease-in-out infinite;
+    animation-delay: 1s;
+  }
+
+  .p-3 {
+    top: 30%;
+    left: 70%;
+    animation: particleFloat 7s ease-in-out infinite;
+    animation-delay: 2s;
+  }
+
+  .p-4 {
+    top: 70%;
+    left: 80%;
+    animation: particleFloat 9s ease-in-out infinite;
+    animation-delay: 0.5s;
+  }
+
+  .p-5 {
+    top: 40%;
+    left: 50%;
+    animation: particleFloat 6.5s ease-in-out infinite;
+    animation-delay: 3s;
+  }
+
+
+  .p-6 {
+    top: 80%;
+    left: 40%;
+    animation: particleFloat 7.5s ease-in-out infinite;
+    animation-delay: 1.5s;
+  }
+
+  .p-7 {
+    top: 15%;
+    left: 60%;
+    animation: particleFloat 8.5s ease-in-out infinite;
+    animation-delay: 2.5s;
+  }
+
+  .p-8 {
+    top: 50%;
+    left: 90%;
+    animation: particleFloat 7.2s ease-in-out infinite;
+    animation-delay: 4s;
+  }
+
+  @keyframes particleFloat {
+    0% { 
+      opacity: 0;
+      transform: translateY(100vh) scale(0);
+    }
+    10% { 
+      opacity: 0.8;
+    }
+    90% { 
+      opacity: 0.8;
+    }
+    100% { 
+      opacity: 0;
+      transform: translateY(-100vh) scale(1);
+    }
+  }
+
+  /* =============================================
+     MOVING LINES
+     ============================================= */
+  
+  .lines {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+
+  .line {
+    position: absolute;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(254, 212, 0, 0.3), transparent);
+    animation: lineMove 15s linear infinite;
+  }
+
+  .line-1 {
+    width: 60%;
+    top: 25%;
+    left: -60%;
+    animation-delay: 0s;
+  }
+
+  .line-2 {
+    width: 50%;
+    top: 50%;
+    left: -50%;
+    animation-delay: 5s;
+  }
+
+  .line-3 {
+    width: 70%;
+    top: 75%;
+    left: -70%;
+    animation-delay: 10s;
+  }
+
+  @keyframes lineMove {
+    0% { left: -70%; }
+    100% { left: 110%; }
+  }
+
   .hero-deco {
     position: absolute;
     inset: 0;