Make the system boot up when the button is powered up and make the particles move wilding ly

index.html

@@ -43,37 +43,47 @@
 
         button.addEventListener('click', () => {
             if (!activated) {
-                document.body.classList.add('activated');
-                button.textContent = 'SYSTEM ONLINE';
-                button.classList.add('pulse');
-                activated = true;
-                
-                // Play activation sound
-                const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-modern-click-box-check-1120.mp3');
-                audio.play();
-                
-                // Create particle effects
-                createParticles();
+                // Boot sequence animation
+                let bootProgress = 0;
+                const bootInterval = setInterval(() => {
+                    bootProgress += 10;
+                    button.textContent = `BOOTING ${bootProgress}%`;
+                    if (bootProgress >= 100) {
+                        clearInterval(bootInterval);
+                        document.body.classList.add('activated');
+                        button.textContent = 'SYSTEM ONLINE';
+                        button.classList.add('pulse');
+                        activated = true;
+                        
+                        // Play activation sound
+                        const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-modern-click-box-check-1120.mp3');
+                        audio.play();
+                        
+                        // Create wild particle effects
+                        createParticles();
 
-                // Full power mode effects
-                document.documentElement.style.setProperty('--cyber-power', '1');
-                document.body.style.background = 'radial-gradient(circle, #050505 0%, #000 100%)';
-                document.querySelector('h1').classList.add('full-power');
-                VANTA.NET({
-                    el: "#vanta-bg",
-                    mouseControls: true,
-                    touchControls: true,
-                    gyroControls: false,
-                    minHeight: 200.00,
-                    minWidth: 200.00,
-                    scale: 1.50,
-                    scaleMobile: 1.50,
-                    color: 0xf9ff00,
-                    backgroundColor: 0x000000,
-                    points: 20.00,
-                    spacing: 20.00
-                });
-            } else {
+                        // Full power mode effects
+                        document.documentElement.style.setProperty('--cyber-power', '1');
+                        document.body.style.background = 'radial-gradient(circle, #050505 0%, #000 100%)';
+                        document.querySelector('h1').classList.add('full-power');
+                        VANTA.NET({
+                            el: "#vanta-bg",
+                            mouseControls: true,
+                            touchControls: true,
+                            gyroControls: false,
+                            minHeight: 200.00,
+                            minWidth: 200.00,
+                            scale: 2.00,
+                            scaleMobile: 2.00,
+                            color: 0xf9ff00,
+                            backgroundColor: 0x000000,
+                            points: 30.00,
+                            spacing: 15.00,
+                            maxDistance: 30.00
+                        });
+                    }
+                }, 100);
+} else {
                 document.documentElement.style.setProperty('--cyber-power', '0');
                 document.body.style.background = '';
                 document.querySelector('h1').classList.remove('full-power');
@@ -89,26 +99,53 @@ document.body.classList.remove('activated');
             particles.id = 'particles';
             particles.className = 'fixed inset-0 pointer-events-none';
             document.body.appendChild(particles);
-
-            for (let i = 0; i < 100; i++) {
+            // Create 200 wild particles
+            for (let i = 0; i < 200; i++) {
                 setTimeout(() => {
                     const particle = document.createElement('div');
-                    particle.className = 'absolute w-2 h-2 bg-cyberyellow rounded-full';
+                    particle.className = 'absolute bg-cyberyellow rounded-full';
+                    particle.style.width = `${2 + Math.random() * 4}px`;
+                    particle.style.height = particle.style.width;
                     particle.style.left = `${Math.random() * 100}vw`;
                     particle.style.top = `${Math.random() * 100}vh`;
                     particles.appendChild(particle);
 
-                    // Animation
-                    const duration = 2000 + Math.random() * 3000;
+                    // Wild animation with more randomness
+                    const duration = 1000 + Math.random() * 2000;
+                    const startX = Math.random() * window.innerWidth;
+                    const startY = Math.random() * window.innerHeight;
+                    
                     const keyframes = [
-                        { transform: 'translate(0, 0)', opacity: 1 },
-                        { transform: `translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px)`, opacity: 0 }
+                        { 
+                            transform: `translate(0, 0)`, 
+                            opacity: 1 
+                        },
+                        { 
+                            transform: `translate(${Math.random() * 1000 - 500}px, ${Math.random() * 1000 - 500}px) rotate(${Math.random() * 360}deg)`,
+                            opacity: 0,
+                            filter: 'blur(2px)'
+                        }
                     ];
-                    particle.animate(keyframes, { duration, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' })
-                        .onfinish = () => particle.remove();
-                }, i * 30);
+                    
+                    const animation = particle.animate(keyframes, { 
+                        duration, 
+                        easing: 'cubic-bezier(0.1, 0.7, 1.0, 0.1)',
+                        iterations: Infinity 
+                    });
+
+                    // Make particles bounce off edges
+                    const moveParticle = () => {
+                        const rect = particle.getBoundingClientRect();
+                        if (rect.left <= 0 || rect.right >= window.innerWidth || 
+                            rect.top <= 0 || rect.bottom >= window.innerHeight) {
+                            animation.reverse();
+                        }
+                        requestAnimationFrame(moveParticle);
+                    };
+                    moveParticle();
+                }, i * 15);
             }
-        }
+}
     </script>
 <script>
         feather.replace();

style.css

@@ -17,18 +17,20 @@ body.activated {
                  0 0 60px rgba(249, 255, 0, 0.4);
     animation: power-pulse 1s infinite alternate;
 }
-
 @keyframes power-pulse {
     from {
         opacity: 0.8;
         transform: scale(1);
+        text-shadow: 0 0 10px rgba(249, 255, 0, 0.8);
     }
     to {
         opacity: 1;
         transform: scale(1.05);
+        text-shadow: 0 0 20px rgba(249, 255, 0, 0.8), 
+                     0 0 40px rgba(249, 255, 0, 0.6),
+                     0 0 80px rgba(249, 255, 0, 0.4);
     }
 }
-
 #vanta-bg {
     transition: filter 0.5s ease;
 }