document.addEventListener('DOMContentLoaded', function () {
    const menuBtn = document.getElementById("menuBtn");
    const closeBtn = document.getElementById("closeBtn");
    const nav = document.getElementById("nav");
    const navOverlay = document.getElementById("navOverlay");
    const navLinks = document.querySelectorAll(".nav a");

    function openMenu() {
        nav.classList.add("active");
        navOverlay.classList.add("active");
        document.body.classList.add("menu-open");
    }

    function closeMenu() {
        nav.classList.remove("active");
        navOverlay.classList.remove("active");
        document.body.classList.remove("menu-open");
    }

    menuBtn.addEventListener("click", openMenu);
    closeBtn.addEventListener("click", closeMenu);
    navOverlay.addEventListener("click", closeMenu);

    navLinks.forEach((link) => {
        link.addEventListener("click", () => {
            navLinks.forEach((item) => {
                item.classList.remove("active");
            });

            link.classList.add("active");
            closeMenu();
        });
    });

    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") {
            closeMenu();
        }
    });


    /* =========================
        FadeIn Animation
    ========================== */
    gsap.registerPlugin(ScrollTrigger);
    /* =========================
    Topbar & Header Fade Animation
========================== */

    gsap.from(".topbar", {
        opacity: 0,
        y: 0,
        duration: 1,
        ease: "power2.out",
        clearProps: "transform"
    });

    gsap.from(".topbar > *", {
        opacity: 0,
        y: 20,
        duration: 1.2,
        stagger: 0.15,
        ease: "power2.out",
        clearProps: "transform"
    });

    gsap.from(".header-wrapper", {
        opacity: 0,
        y: 30,
        duration: 1,
        ease: "power2.out",
        clearProps: "transform"
    });

    gsap.from(".header-wrapper > *", {
        opacity: 0,
        y: 20,
        duration: 1.2,
        stagger: 0.15,
        ease: "power2.out",
        clearProps: "transform"
    });

    gsap.utils.toArray("section").forEach((sec) => {

        gsap.from(sec, {
            opacity: 0,
            y: 60,
            duration: 1,
            scrollTrigger: {
                trigger: sec,
                start: "top 85%",
            }
        });

        gsap.utils.toArray(sec.children).forEach((child) => {
            gsap.from(child, {
                opacity: 0,
                y: 40,
                duration: 1.2,
                scrollTrigger: {
                    trigger: child,
                    start: "top 82%",
                }
            });
        });

    });

    gsap.from("footer > *", {
        opacity: 0,
        y: 40,
        duration: 1.6,
        ease: "power2.out",
        stagger: 0.15,
        scrollTrigger: {
            trigger: "footer",
            start: "top 70%",
            toggleActions: "play none none none",
        }
    });

});