fix: allow bats to fly across entire page instead of just hero section

Author: AdmGenSameer

src/components/halloween/FlyingBats.js

@@ -6,11 +6,12 @@ function FlyingBats({ count = 5 }) {
 
   useEffect(() => {
     // Generate random bat configurations with varied paths
+    // Distribute bats across the entire page height (0-400vh)
     const paths = ['path1', 'path2', 'path3', 'path4'];
     const generatedBats = Array.from({ length: count }, (_, index) => ({
       id: `bat-${index}-${Math.random()}`,
       startX: Math.random() * 100,
-      startY: Math.random() * 80 + 10,
+      startY: Math.random() * 400 + 10, // Distribute across 400vh
       duration: Math.random() * 10 + 8, // 8-18 seconds for faster movement
       delay: Math.random() * 6,
       size: Math.random() * 0.4 + 0.5, // 0.5-0.9x size

src/components/halloween/FlyingBats.module.css

@@ -1,12 +1,12 @@
 .batsContainer {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 500vh;
   pointer-events: none;
   z-index: 15;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .bat {