script.js

// Initialize GSAP animations
document.addEventListener('DOMContentLoaded', function() {
    // Animate hero section elements
    gsap.from('.hero-title', {
        duration: 1.5,
        y: 50,
        opacity: 0,
        stagger: 0.2,
        ease: "power3.out"
    });
    
    gsap.from('.hero-subtitle', {
        duration: 1.5,
        delay: 0.3,
        y: 30,
        opacity: 0,
        ease: "power3.out"
    });
    
    gsap.from('.hero-buttons button', {
        duration: 1,
        delay: 0.6,
        y: 20,
        opacity: 0,
        stagger: 0.1,
        ease: "back.out(1.7)"
    });
    
    // Animate journey steps
    gsap.utils.toArray('.journey-step').forEach((step, i) => {
        gsap.from(step, {
            scrollTrigger: {
                trigger: step,
                start: "top 80%"
            },
            duration: 1,
            x: i % 2 === 0 ? -50 : 50,
            opacity: 0,
            ease: "power2.out"
        });
    });
    
    // Animate testimonials
    gsap.utils.toArray('.testimonial-card').forEach((card, i) => {
        gsap.from(card, {
            scrollTrigger: {
                trigger: card,
                start: "top 85%"
            },
            duration: 1,
            y: 30,
            opacity: 0,
            delay: i * 0.1,
            ease: "power2.out"
        });
    });
    
    // Create floating particles
    createParticles();
});

// Create floating particles effect
function createParticles() {
    const container = document.getElementById('particles-container');
    const particleCount = 30;
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // Random size between 2px and 8px
        const size = Math.random() * 6 + 2;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        
        // Random position
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        
        // Random animation delay and duration
        particle.style.animationDelay = `${Math.random() * 5}s`;
        particle.style.animationDuration = `${10 + Math.random() * 20}s`;
        
        // Random color from gradient
        const colors = [
            'rgba(236, 72, 153, 0.7)', 
            'rgba(139, 92, 246, 0.7)', 
            'rgba(79, 70, 229, 0.7)'
        ];
        particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        
        container.appendChild(particle);
    }
}

// Handle window resize for particles
window.addEventListener('resize', function() {
    const container = document.getElementById('particles-container');
    container.innerHTML = '';
    createParticles();
});

// Add interactive hover effects
document.querySelectorAll('.illusion-card .rounded-2xl').forEach(card => {
    card.addEventListener('mouseenter', function() {
        gsap.to(this, {
            duration: 0.3,
            scale: 1.03,
            boxShadow: "0 10px 30px rgba(236, 72, 153, 0.4)",
            ease: "power2.out"
        });
    });
    
    card.addEventListener('mouseleave', function() {
        gsap.to(this, {
            duration: 0.3,
            scale: 1,
            boxShadow: "0 0 0 rgba(236, 72, 153, 0)",
            ease: "power2.out"
        });
    });
});

// Add parallax effect to illusion circle
document.addEventListener('mousemove', (e) => {
    const circle = document.querySelector('.illusion-circle');
    if (!circle) return;
    
    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    
    circle.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});