Add animated stars that fade in and out to sections without background images

Implements a new JavaScript function `initStars` that dynamically creates and appends circular star elements to sections with the class `.home-info`. These stars have random sizes, positions, fade animations, and durations, controlled by CSS and keyframes defined in `static/css/styles.css`. The `initStars` function is called on page load via `initPageLoadAnimation`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: e42678c3-4b34-4047-bd6d-316f729459e1
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/vuYxJMM

static/js/scripts.js

@@ -96,6 +96,7 @@ document.addEventListener('DOMContentLoaded', function() {
     initPageLoadAnimation();
     initCustomCursor();
     initScrollIndicator();
+    initStars();
 });
 
 function initParallaxEffects() {
@@ -389,3 +390,33 @@ function initScrollIndicator() {
         indicator.style.width = progress + '%';
     });
 }
+
+function initStars() {
+    const sections = document.querySelectorAll('.home-info');
+    
+    sections.forEach(section => {
+        const sectionHeight = section.offsetHeight;
+        const sectionWidth = section.offsetWidth;
+        const numStars = Math.floor((sectionWidth * sectionHeight) / 15000);
+        
+        for (let i = 0; i < numStars; i++) {
+            const star = document.createElement('div');
+            star.className = 'star';
+            
+            const size = Math.random() * 3 + 1;
+            const x = Math.random() * 100;
+            const y = Math.random() * 100;
+            const duration = Math.random() * 3 + 2;
+            const delay = Math.random() * 3;
+            
+            star.style.width = size + 'px';
+            star.style.height = size + 'px';
+            star.style.left = x + '%';
+            star.style.top = y + '%';
+            star.style.setProperty('--duration', duration + 's');
+            star.style.setProperty('--delay', delay + 's');
+            
+            section.appendChild(star);
+        }
+    });
+}