script.js

// Register GSAP Plugins
gsap.registerPlugin(ScrollTrigger);

// ----------------------------------------------------
// 1. DOM Ready & Setup
// ----------------------------------------------------
window.addEventListener("load", () => {

    // Smooth Scroll Progress bar
    gsap.to(".scroll-progress", {
        scaleX: 1,
        ease: "none",
        scrollTrigger: {
            scrub: 0.3
        }
    });

    // Custom Cursor Logic
    const cursor = document.querySelector('.custom-cursor');
    const cursorFollower = document.querySelector('.custom-cursor-follower');
    let cursorX = 0, cursorY = 0, followerX = 0, followerY = 0;

    gsap.to([cursor, cursorFollower], { opacity: 1, duration: 1, delay: 0.5 });

    window.addEventListener('mousemove', (e) => {
        cursorX = e.clientX;
        cursorY = e.clientY;

        // Immediate set for main dot
        gsap.set(cursor, { x: cursorX - 8, y: cursorY - 8 });
    });

    // Render loop for smooth follower
    gsap.ticker.add(() => {
        followerX += (cursorX - followerX) * 0.15;
        followerY += (cursorY - followerY) * 0.15;
        gsap.set(cursorFollower, { x: followerX - 24, y: followerY - 24 });
    });

    // Hover effect on interactables
    const interactables = document.querySelectorAll('button, .explore-card, .toggle-btn, a');
    interactables.forEach(el => {
        el.addEventListener('mouseenter', () => {
            gsap.to(cursorFollower, { scale: 1.5, borderColor: '#ff4d00', backgroundColor: 'rgba(255, 77, 0, 0.1)', duration: 0.3 });
            gsap.to(cursor, { scale: 0, duration: 0.3 });
        });
        el.addEventListener('mouseleave', () => {
            gsap.to(cursorFollower, { scale: 1, borderColor: 'rgba(255, 77, 0, 0.5)', backgroundColor: 'transparent', duration: 0.3 });
            gsap.to(cursor, { scale: 1, duration: 0.3 });
        });
    });

    // ----------------------------------------------------
    // 2. Magnetic Buttons Effect
    // ----------------------------------------------------
    const magneticBtns = document.querySelectorAll('.magnetic-wrap');

    magneticBtns.forEach(wrap => {
        const btn = wrap.querySelector('.magnetic-btn');

        wrap.addEventListener('mousemove', (e) => {
            const rect = wrap.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;

            // Move button towards cursor
            gsap.to(btn, { x: x * 0.4, y: y * 0.4, duration: 0.5, ease: "power2.out" });

            // If button has an arrow, move it slightly more for parallax
            const arrow = btn.querySelector('.btn-arrow');
            if (arrow) gsap.to(arrow, { x: x * 0.2, y: y * 0.2, duration: 0.4, ease: "power2.out" });
        });

        wrap.addEventListener('mouseleave', () => {
            gsap.to(btn, { x: 0, y: 0, duration: 0.7, ease: "elastic.out(1, 0.3)" });

            const arrow = btn.querySelector('.btn-arrow');
            if (arrow) gsap.to(arrow, { x: 0, y: 0, duration: 0.7, ease: "elastic.out(1, 0.3)" });
        });
    });

    // ----------------------------------------------------
    // 3. Custom Text Split Logic (Alternative to SplitText)
    // ----------------------------------------------------
    const splitTexts = document.querySelectorAll('.split-text');
    splitTexts.forEach(el => {
        const text = el.innerText;
        el.innerHTML = '';
        text.split(' ').forEach((word, wordIndex) => {
            const wordSpan = document.createElement('span');
            wordSpan.style.display = 'inline-block';
            wordSpan.style.whiteSpace = 'nowrap';

            word.split('').forEach(char => {
                const charSpan = document.createElement('span');
                charSpan.className = 'char';
                charSpan.innerText = char;
                wordSpan.appendChild(charSpan);
            });
            el.appendChild(wordSpan);

            // Add space between words
            if (wordIndex < text.split(' ').length - 1) {
                const space = document.createElement('span');
                space.innerHTML = '&nbsp;';
                el.appendChild(space);
            }
        });
    });

    // ----------------------------------------------------
    // 4. Sequence & ScrollTrigger Animations
    // ----------------------------------------------------
    let masterTl = gsap.timeline();

    // -- Hero Animation Sequence --
    masterTl.from(".hero-title-line", {
        yPercent: 100,
        opacity: 0,
        rotationZ: 4,
        duration: 1.5,
        stagger: 0.2,
        ease: "power4.out"
    })
        .from(".hero-subtitle", {
            y: 40,
            opacity: 0,
            filter: "blur(10px)",
            duration: 1.2,
            ease: "power3.out"
        }, "-=1")
        .from(".magnetic-wrap", {
            scale: 0.8,
            opacity: 0,
            duration: 1,
            ease: "elastic.out(1, 0.5)"
        }, "-=0.8");

    // -- Deep Parallax (Background Layers) --
    const pxLayers = document.querySelectorAll('.px-layer');
    pxLayers.forEach(layer => {
        const speed = layer.getAttribute('data-speed');
        gsap.to(layer, {
            y: () => (window.innerHeight * speed),
            ease: "none",
            scrollTrigger: {
                trigger: layer.parentElement,
                start: "top bottom",
                end: "bottom top",
                scrub: true
            }
        });
    });

    // Fade out hero content on scroll
    gsap.to(".hero-content, .scroll-indicator", {
        y: 100,
        opacity: 0,
        scale: 0.95,
        ease: "none",
        scrollTrigger: {
            trigger: ".hero",
            start: "top top",
            end: "bottom top",
            scrub: true
        }
    });

    // ----------------------------------------------------
    // 6. Solar System Animation & Zoom (Moved up for correct ScrollTrigger order)
    // ----------------------------------------------------

    // Zoom exactly into Mars precisely by locking its coordinates
    const solarTl = gsap.timeline({
        scrollTrigger: {
            trigger: ".solar-system",
            pin: true,
            start: "top top",
            end: "+=200%",
            scrub: 1
        }
    });

    // Fade in title quickly
    solarTl.to(".solar-title-anim", {
        opacity: 1,
        y: 10,
        stagger: 0.2,
        duration: 0.1,
        ease: "power2.out"
    }, 0);

    // Planets revolve dynamically based on user scroll
    solarTl.to(".orbit-mercury", { rotation: 360 * 4, ease: "none", duration: 1 }, 0);
    solarTl.to(".planet-mercury-reverse", { rotation: -360 * 4, ease: "none", duration: 1 }, 0);

    solarTl.to(".orbit-venus", { rotation: 360 * 2.5, ease: "none", duration: 1 }, 0);
    solarTl.to(".planet-venus-reverse", { rotation: -360 * 2.5, ease: "none", duration: 1 }, 0);

    solarTl.to(".orbit-earth", { rotation: 360 * 1.5, ease: "none", duration: 1 }, 0);
    solarTl.to(".planet-earth-reverse", { rotation: -360 * 1.5, ease: "none", duration: 1 }, 0);
    solarTl.to(".orbit-moon", { rotation: 360 * 6, ease: "none", duration: 1 }, 0);

    // Mars hits exactly 360 degrees (top center) matching the zoom timing!
    solarTl.to(".orbit-mars", { rotation: 360, ease: "power1.inOut", duration: 1 }, 0);
    solarTl.to(".planet-mars-reverse", { rotation: -360, ease: "power1.inOut", duration: 1 }, 0);
    solarTl.to(".orbit-asteroids", { rotation: -360 * 0.5, ease: "none", duration: 1 }, 0);

    // Zoom specifically into Mars
    const isMobile = window.innerWidth < 768;
    // Calculate precise center point of Mars at top-dead-center
    const marsY = isMobile ? 175 : 60;

    solarTl.to(".solar-wrapper", {
        scale: isMobile ? 6 : 9,
        transformOrigin: `50% ${marsY}px`,
        ease: "power1.inOut",
        duration: 1
    }, 0);

    // Fade out everything else slowly to focus exclusively on Mars
    solarTl.to(".orbit-mercury, .orbit-venus, .orbit-earth, .orbit-mars, .orbit-asteroids", {
        borderColor: "rgba(255,255,255,0.02)",
        duration: 0.5
    }, 0.5);

    solarTl.to(".sun, .mercury, .venus, .earth", {
        opacity: 0,
        duration: 0.5
    }, 0.5);

    solarTl.to(".mars-interactive", {
        boxShadow: "0 0 60px rgba(255,100,0,1)",
        duration: 0.2
    }, 0.8);

    // Reveal Polaroids precisely as zoom hits maximum focus
    solarTl.to(".polaroid", {
        opacity: 1,
        scale: 1,
        stagger: 0.1,
        ease: "back.out(1.5)",
        duration: 0.4
    }, 0.6); // Start appearing slightly before maximum zoom

    // -- Intro Section Animations --
    const introTl = gsap.timeline({
        scrollTrigger: {
            trigger: ".intro",
            start: "top 70%",
            end: "bottom 80%",
            toggleActions: "play none none reverse"
        }
    });

    introTl.from(".intro-stagger", {
        y: 50,
        opacity: 0,
        duration: 1,
        stagger: 0.2,
        ease: "power3.out"
    })
        .to(".intro h2 .char", {
            y: 0,
            opacity: 1,
            duration: 0.8,
            stagger: 0.03,
            ease: "back.out(1.7)"
        }, "-=1")
        .from(".intro-visual", {
            scale: 0.8,
            opacity: 0,
            duration: 1.2,
            ease: "power4.out",
            rotationY: -15,
            transformOrigin: "left center"
        }, "-=0.8");

    // Intro image inner parallax
    gsap.to(".intro-img", {
        yPercent: -15,
        ease: "none",
        scrollTrigger: {
            trigger: ".intro-visual",
            start: "top bottom",
            end: "bottom top",
            scrub: true
        }
    });

    // Number Counter Animation
    const statNums = document.querySelectorAll('.stat-num');
    statNums.forEach(stat => {
        const finalVal = parseInt(stat.getAttribute('data-val'));
        ScrollTrigger.create({
            trigger: stat,
            start: "top 80%",
            onEnter: () => {
                let start = { val: 0 };
                gsap.to(start, {
                    val: finalVal,
                    duration: 2,
                    ease: "power3.out",
                    onUpdate: function () {
                        stat.innerHTML = Math.round(start.val);
                    }
                });
            }
        });
    });

    // -- Exploration Section Animations --
    const exploreTl = gsap.timeline({
        scrollTrigger: {
            trigger: ".exploration",
            start: "top 70%"
        }
    });

    exploreTl.from(".explore-stagger", {
        y: 80,
        opacity: 0,
        duration: 1,
        stagger: 0.15,
        ease: "power4.out"
    })
        .to(".exploration h2 .char", {
            y: 0,
            opacity: 1,
            duration: 0.8,
            stagger: 0.02,
            ease: "back.out(1.5)"
        }, "-=0.8");

    // ----------------------------------------------------
    // 5. 3D Card Hover Effect (Vanilla-Tilt Style)
    // ----------------------------------------------------
    const wrappers = document.querySelectorAll('.tilt-card-wrapper');
    wrappers.forEach(wrap => {
        const card = wrap.querySelector('.explore-card');

        wrap.addEventListener('mousemove', (e) => {
            const rect = wrap.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const centerX = rect.width / 2;
            const centerY = rect.height / 2;

            // Calculate rotation details (max 15 deg)
            const rotateX = ((y - centerY) / centerY) * -15;
            const rotateY = ((x - centerX) / centerX) * 15;

            gsap.to(card, {
                rotationX: rotateX,
                rotationY: rotateY,
                duration: 0.4,
                ease: "power2.out"
            });
        });

        wrap.addEventListener('mouseleave', () => {
            gsap.to(card, {
                rotationX: 0,
                rotationY: 0,
                duration: 0.7,
                ease: "elastic.out(1, 0.3)"
            });
        });
    });

    // -- Discoveries Section (Static, No GSAP) --
    // Animations removed as per user request to ensure visibility.

    // -- Quotes Section Animations (Pin and Cycle) --
    const quotesTl = gsap.timeline({
        scrollTrigger: {
            trigger: ".quotes",
            pin: true,
            start: "top top",
            end: "+=300%",
            scrub: 1
        }
    });

    const quoteItems = document.querySelectorAll('.quote-item');
    quoteItems.forEach((quote, index) => {
        // Fade in
        quotesTl.to(quote, {
            opacity: 1,
            y: 0,
            duration: 0.5,
            delay: index === 0 ? 0.2 : 0, // Slight delay for the first quote
            ease: "power2.out"
        });
        
        // Hold for a bit (unless it's the last one)
        if (index < quoteItems.length - 1) {
            quotesTl.to(quote, {
                opacity: 0,
                y: -30,
                duration: 0.5,
                delay: 1,
                ease: "power2.in"
            });
        } else {
            // Just a slight delay at the end if it's the last quote
            quotesTl.to({}, { duration: 1 });
        }
    });

    // -- Conclusion Animations --
    gsap.to(".conclusion h2 .char", {
        y: 0,
        opacity: 1,
        duration: 0.8,
        stagger: 0.03,
        ease: "power4.out",
        scrollTrigger: { trigger: ".conclusion", start: "top 60%" }
    });

    gsap.from(".conclusion p", {
        y: 30,
        opacity: 0,
        duration: 1,
        delay: 0.5,
        scrollTrigger: { trigger: ".conclusion", start: "top 60%" }
    });

    gsap.from(".conclusion .magnetic-wrap", {
        scale: 0.8,
        opacity: 0,
        duration: 1,
        delay: 0.8,
        ease: "elastic.out(1, 0.5)",
        scrollTrigger: { trigger: ".conclusion", start: "top 60%" }
    });

    // Custom Button smooth scroll (Hero logic)
    document.querySelector('.explore-btn').addEventListener('click', () => {
        window.scrollTo({
            top: window.innerHeight,
            behavior: 'smooth'
        });
    });

    // Ensure all ScrollTriggers are updated after initialization
    ScrollTrigger.refresh();
});