script.js

document.addEventListener("DOMContentLoaded", () => {
    let timeLeft = 10;
    let isPaused = false;
    const timerElement = document.getElementById('timer');
    const progressCircle = document.getElementById('progress-circle');
    const timerCircle = document.getElementById('timer-circle');
    const redirectText = document.getElementById('redirect-text');
    const redirectURL = "https://kaileyventures.vercel.app";

    // 1. Countdown & Circular Progress
    const countdown = setInterval(() => {
        if (isPaused) return;

        timeLeft--;
        if (timerElement) {
            timerElement.innerText = timeLeft;
        }
        
        // Update circular stroke
        if (progressCircle) {
            const progress = (timeLeft / 10) * 100;
            progressCircle.setAttribute('stroke-dasharray', `${progress}, 100`);
        }

        if (timeLeft <= 0) {
            clearInterval(countdown);
            window.location.href = redirectURL;
        }
    }, 1000);

    if (timerCircle) {
        timerCircle.addEventListener('click', () => {
            isPaused = !isPaused;
            if (isPaused) {
                timerCircle.setAttribute('aria-label', 'Resume Auto Redirect');
                timerCircle.classList.add('paused');
                if (redirectText) redirectText.innerText = "Redirect Paused";
            } else {
                timerCircle.setAttribute('aria-label', 'Pause Auto Redirect');
                timerCircle.classList.remove('paused');
                if (redirectText) redirectText.innerText = "Auto-Redirecting to Ecosystem";
            }
        });

        timerCircle.addEventListener('keydown', (e) => {
            if (e.key === ' ' || e.key === 'Enter') {
                e.preventDefault();
                timerCircle.click();
            }
        });
    }

    // 2. Subtle Mouse Parallax for Background
    document.addEventListener('mousemove', (e) => {
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;
        const hero = document.querySelector('.hero');
        if (hero) {
            hero.style.transform = `translate(${x * 10}px, ${y * 10}px)`;
        }
    });

    // 3. CONSTELLATION INTERACTIVE CANVAS BACKGROUND (OPTIMIZED FOR LIGHT THEME)
    const canvas = document.getElementById('bg-canvas');
    if (canvas) {
        const ctx = canvas.getContext('2d');
        let width = canvas.width = window.innerWidth;
        let height = canvas.height = window.innerHeight;

        const particles = [];
        const maxParticles = 75;
        let mouse = { x: null, y: null, radius: 180 };

        window.addEventListener('resize', () => {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        });

        window.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        });

        window.addEventListener('mouseleave', () => {
            mouse.x = null;
            mouse.y = null;
        });

        class Particle {
            constructor() {
                this.x = Math.random() * width;
                this.y = Math.random() * height;
                this.vx = (Math.random() - 0.5) * 0.45;
                this.vy = (Math.random() - 0.5) * 0.45;
                this.radius = Math.random() * 0.8 + 0.4; // 0.4px to 1.2px (fine dots)
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                // Bounce off edges
                if (this.x < 0 || this.x > width) this.vx *= -1;
                if (this.y < 0 || this.y > height) this.vy *= -1;

                // Mouse interaction (subtle push away)
                if (mouse.x !== null && mouse.y !== null) {
                    const dx = this.x - mouse.x;
                    const dy = this.y - mouse.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < mouse.radius) {
                        const force = (mouse.radius - dist) / mouse.radius;
                        this.x += (dx / dist) * force * 1.2;
                        this.y += (dy / dist) * force * 1.2;
                    }
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(10, 10, 10, 0.45)'; // Charcoal gray for high visibility
                ctx.fill();
            }
        }

        // Initialize particles
        for (let i = 0; i < maxParticles; i++) {
            particles.push(new Particle());
        }

        function animate() {
            ctx.clearRect(0, 0, width, height);

            // Update and draw particles
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();

                // Mouse constellation connections
                if (mouse.x !== null && mouse.y !== null) {
                    const dx = particles[i].x - mouse.x;
                    const dy = particles[i].y - mouse.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < mouse.radius) {
                        ctx.beginPath();
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(mouse.x, mouse.y);
                        ctx.strokeStyle = `rgba(10, 10, 10, ${0.15 * (1 - dist / mouse.radius)})`;
                        ctx.lineWidth = 0.6;
                        ctx.stroke();
                    }
                }

                // Node-to-node constellation connections
                for (let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const dist = Math.sqrt(dx * dx + dy * dy);

                    if (dist < 140) {
                        ctx.beginPath();
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.strokeStyle = `rgba(10, 10, 10, ${0.12 * (1 - dist / 140)})`;
                        ctx.lineWidth = 0.7;
                        ctx.stroke();
                    }
                }
            }

            requestAnimationFrame(animate);
        }

        animate();
    }
});