script.js

function initStars() {
    const canvas = document.getElementById('stars');
    const ctx = canvas.getContext('2d');
    
    // Configurar canvas para pantalla completa
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    
    // Crear estrellas con rendimiento optimizado
    const stars = [];
    const starCount = Math.min(100, Math.floor((window.innerWidth * window.innerHeight) / 10000));
    
    for (let i = 0; i < starCount; i++) {
        stars.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * 1.5 + 0.5,
            opacity: Math.random() * 0.5 + 0.3,
            speed: Math.random() * 0.05
        });
    }
    
    // Animación de estrellas optimizada
    function animateStars() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        stars.forEach(star => {
            // Actualizar opacidad para efecto de parpadeo
            star.opacity += star.speed;
            if (star.opacity >= 0.8 || star.opacity <= 0.3) {
                star.speed = -star.speed;
            }
            
            // Dibujar estrella
            ctx.beginPath();
            ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
            ctx.fill();
        });
        
        requestAnimationFrame(animateStars);
    }
    
    animateStars();
}

// SCROLL REVEAL OPTIMIZADO
function handleScrollEffects() {
    const fadeElements = document.querySelectorAll('.fade-in');
    const triggerBottom = window.innerHeight * 0.85;
    
    fadeElements.forEach(element => {
        const elementTop = element.getBoundingClientRect().top;
        
        if (elementTop < triggerBottom) {
            element.classList.add('visible');
        }
    });
}

// BOTÓN DE INSCRIPCIÓN
document.getElementById('enrollButton').addEventListener('click', function() {
    // Efecto simple de partículas
    const button = this;
    const rect = button.getBoundingClientRect();
    
    // Crear solo 10 partículas para mejor rendimiento
    for (let i = 0; i < 10; i++) {
        const particle = document.createElement('div');
        particle.style.position = 'fixed';
        particle.style.width = '8px';
        particle.style.height = '8px';
        particle.style.backgroundColor = i % 2 === 0 ? '#00a2ff' : '#ffd700';
        particle.style.borderRadius = '50%';
        particle.style.left = (rect.left + rect.width/2) + 'px';
        particle.style.top = (rect.top + rect.height/2) + 'px';
        particle.style.pointerEvents = 'none';
        particle.style.zIndex = '100';
        
        const angle = (Math.PI * 2 * i) / 10;
        const distance = 100;
        
        // Usar transform en lugar de left/top para mejor rendimiento
        const animation = particle.animate([
            { transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
            { 
                transform: `translate(
                    calc(-50% + ${Math.cos(angle) * distance}px), 
                    calc(-50% + ${Math.sin(angle) * distance}px)
                ) scale(0)`, 
                opacity: 0 
            }
        ], {
            duration: 1000,
            easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
        });
        
        animation.onfinish = () => particle.remove();
        document.body.appendChild(particle);
    }
    
    // Mensaje de inscripción
    setTimeout(() => {
        alert('🚀');
    }, 600);
});

// INICIALIZACIÓN OPTIMIZADA
window.addEventListener('load', function() {
    // Ocultar pantalla de carga
    setTimeout(() => {
        document.getElementById('loadingScreen').style.opacity = '0';
        setTimeout(() => {
            document.getElementById('loadingScreen').style.display = 'none';
        }, 800);
    }, 1500);
    
    // Inicializar estrellas
    initStars();
    
    // Inicializar efectos de scroll
    handleScrollEffects();
    
    // Throttle para el evento scroll (mejora rendimiento)
    let scrollTimeout;
    window.addEventListener('scroll', function() {
        if (!scrollTimeout) {
            scrollTimeout = setTimeout(function() {
                handleScrollEffects();
                scrollTimeout = null;
            }, 100);
        }
    });
});