script.js

// Initialize GSAP plugins
gsap.registerPlugin(ScrollTrigger, SplitText);

// Custom Cursor
const cursorDot = document.querySelector('.cursor-dot');
const cursorRing = document.querySelector('.cursor-ring');

document.addEventListener('mousemove', (e) => {
    gsap.to(cursorDot, {
        x: e.clientX - 4,
        y: e.clientY - 4,
        duration: 0.1
    });
    gsap.to(cursorRing, {
        x: e.clientX - 12,
        y: e.clientY - 12,
        duration: 0.2
    });
});

// Particles System
function createParticles() {
    const container = document.getElementById('particles-container');
    const particleCount = 50;
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        gsap.set(particle, {
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight,
            opacity: 0
        });
        
        container.appendChild(particle);
        
        gsap.timeline({ repeat: -1 })
            .to(particle, {
                opacity: Math.random() * 0.5 + 0.2,
                duration: 0.5,
                delay: Math.random() * 2
            })
            .to(particle, {
                y: -100,
                x: `+=${Math.random() * 100 - 50}`,
                duration: Math.random() * 10 + 10,
                ease: "none"
            }, "-=0.5")
            .to(particle, {
                opacity: 0,
                duration: 0.5
            })
            .set(particle, {
                y: window.innerHeight + 50,
                x: Math.random() * window.innerWidth
            });
    }
}

// Typewriter Effect
function initTypewriter() {
    const text = "Protecting Data and Critical Infrastructure in the Post-Quantum Era";
    const element = document.getElementById('typewriter-text');
    let i = 0;
    
    function typeChar() {
        if (i < text.length) {
            element.textContent += text.charAt(i);
            i++;
            setTimeout(typeChar, 60);
        }
    }
    
    typeChar();
}

// Pyramid Scroll Animation
function initPyramidAnimation() {
    const tl = gsap.timeline({
        scrollTrigger: {
            trigger: "#story-pyramid",
            start: "top top",
            end: "bottom bottom",
            scrub: 1,
            pin: true,
            pinSpacing: true
        }
    });

    // Animate pyramid layers
    gsap.set("#layer1, #layer2, #layer3", { opacity: 0, scale: 0.8, y: 100 });
    
    tl.to("#layer1", {
        opacity: 1,
        scale: 1,
        y: 0,
        duration: 1,
        ease: "power3.out"
    })
    .to("#layer2", {
        opacity: 1,
        scale: 1,
        y: 0,
        duration: 1,
        ease: "power3.out"
    }, "-=0.5")
    .to("#layer3", {
        opacity: 1,
        scale: 1,
        y: 0,
        duration: 1,
        ease: "power3.out"
    }, "-=0.5");

    // Narrative steps opacity
    const steps = document.querySelectorAll('.narrative-step');
    steps.forEach((step, index) => {
        ScrollTrigger.create({
            trigger: index === 0 ? "#layer1" : index === 1 ? "#layer2" : "#layer3",
            start: "top center",
            end: "bottom center",
            onEnter: () => {
                steps.forEach(s => s.classList.add('opacity-50'));
                step.classList.remove('opacity-50');
                step.classList.add('scale-105');
            },
            onLeaveBack: () => {
                if (index > 0) {
                    steps[index - 1].classList.remove('opacity-50');
                    step.classList.add('opacity-50');
                }
            }
        });
    });
}

// Parallax Elements
function initParallax() {
    gsap.utils.toArray('.parallax-element').forEach(el => {
        gsap.to(el, {
            y: -100,
            ease: "none",
            scrollTrigger: {
                trigger: el,
                start: "top bottom",
                end: "bottom top",
                scrub: true
            }
        });
    });
}

// Enhanced Card Animations
function initCardAnimations() {
    gsap.utils.toArray('.card-gradient').forEach(card => {
        card.addEventListener('mouseenter', () => {
            gsap.to(card, {
                rotateY: 5,
                duration: 0.3,
                ease: "power2.out"
            });
        });
        
        card.addEventListener('mouseleave', () => {
            gsap.to(card, {
                rotateY: 0,
                duration: 0.3,
                ease: "power2.out"
            });
        });
    });
}

// Initialize AOS
function initAOS() {
    AOS.init({
        duration: 1000,
        once: true,
        offset: 100
    });
}

// Initialize Vanta.js
function initVanta() {
    VANTA.GLOBE({
        el: "#vanta-bg",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        color: 0xe65103,
        color2: 0x1e293b,
        backgroundColor: 0x0f172a,
        size: 1.00,
        lineColor: 0xe65103
    });
}

// Initialize Feather Icons
function initFeather() {
    feather.replace();
}

// Master Init Function
document.addEventListener('DOMContentLoaded', () => {
    initTypewriter();
    initVanta();
    initAOS();
    initFeather();
    createParticles();
    initPyramidAnimation();
    initParallax();
    initCardAnimations();
    
    // Stagger fade-in animations
    gsap.utils.toArray('.fade-in-up').forEach((el, index) => {
        gsap.to(el, {
            opacity: 1,
            y: 0,
            duration: 0.8,
            delay: index * 0.2,
            ease: "power3.out"
        });
    });
    
    // Add glow effect to all buttons on hover
    document.querySelectorAll('a, button').forEach(el => {
        el.addEventListener('mouseenter', () => {
            gsap.to(el, {
                scale: 1.02,
                duration: 0.2,
                ease: "power2.out"
            });
        });
        
        el.addEventListener('mouseleave', () => {
            gsap.to(el, {
                scale: 1,
                duration: 0.2,
                ease: "power2.out"
            });
        });
    });
});

// Refresh ScrollTrigger on resize
window.addEventListener('resize', () => {
    ScrollTrigger.refresh();
});