script.js

//BASIC ONE-
// var cursor = document.querySelector("#cursor")
// var blur = document.querySelector("#cursor-blur")
// document.addEventListener("mousemove", function(dets){
//     cursor.style.left = dets.clientX - 12 + "px";
//     cursor.style.top = dets.clientY - 12 + "px";
//     blur.style.left = dets.clientX - 250 + "px";
//     blur.style.top = dets.clientY - 250 + "px";
// })






 // ya still reading comments? Okay bruhh....


gsap.to("#nav",{
    backgroundColor:"#000",
    duration:0.5,
    height: "90px",
    scrollTrigger:{
        trigger: "#nav",
        scroller: "body",
        // markers:true,
        start: "top -10%",
        end: "top -11%",
        scrub:1
    } 
})

gsap.to("#main",{
    backgroundColor:"#000",
    scrollTrigger:{
        trigger: "#main",
        scroller: "body",
        // markers:true,
        start: "top -25%",
        end: "top -70%",
        scrub:2
        
    }
})

document.addEventListener("DOMContentLoaded", function () {
    const h4Elements = document.querySelectorAll("#scroller h4");

    document.addEventListener("mousemove", function (event) {
        h4Elements.forEach(h4 => {
            const rect = h4.getBoundingClientRect();
            const mouseX = event.clientX;
            const mouseY = event.clientY;

            if (
                mouseX >= rect.left &&
                mouseX <= rect.right &&
                mouseY >= rect.top &&
                mouseY <= rect.bottom
            ) {
                h4.style.webkitTextFillColor = "#95C11E";
                h4.style.webkitTextStrokeColor = "#95C11E";
            } else {
                h4.style.webkitTextFillColor = "#000";
                h4.style.webkitTextStrokeColor = "white";
            }
        });
    });
});



document.addEventListener("DOMContentLoaded", function () {
    const cards = document.querySelectorAll(".card");

    document.addEventListener("mousemove", function (event) {
        cards.forEach(card => {
            const rect = card.getBoundingClientRect();
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            const overlay = card.querySelector(".overlay");

            if (
                mouseX >= rect.left &&
                mouseX <= rect.right &&
                mouseY >= rect.top &&
                mouseY <= rect.bottom
            ) {
                card.classList.add("hovered");
            } else {
                card.classList.remove("hovered");
            }
        });
    });
});










document.addEventListener("DOMContentLoaded", function () {
    const cards = document.querySelectorAll(".card");
    let middleCard = cards[Math.floor(cards.length / 2)];

    document.addEventListener("mousemove", function (event) {
        const rect = middleCard.getBoundingClientRect();
        const cardX = rect.left + rect.width / 2;
        const cardY = rect.top + rect.height / 2;
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        
        const deltaX = (mouseX - cardX) / rect.width;
        const deltaY = (mouseY - cardY) / rect.height;
        
        const maxTilt = 6; // Reduced tilt angle for a smoother effect
        const rotateY = deltaX * maxTilt;
        const rotateX = -deltaY * maxTilt;
        
        cards.forEach(card => {
            card.style.transition = "transform 0.15s linear";
            card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
    });

    // Reset effect smoothly on mouse leave
    cards.forEach(card => {
        card.addEventListener("mouseleave", () => {
            card.style.transition = "transform 0.4s ease-out";
            card.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg)";
        });
    });
});









document.addEventListener("DOMContentLoaded", function () {
    const buttons = document.querySelectorAll("button");

    document.addEventListener("mousemove", function (event) {
        buttons.forEach(button => {
            const rect = button.getBoundingClientRect();
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            const proximity = 50; // Adjust for sensitivity

            if (
                mouseX >= rect.left - proximity &&
                mouseX <= rect.right + proximity &&
                mouseY >= rect.top - proximity &&
                mouseY <= rect.bottom + proximity
            ) {
                button.classList.add("hovered");
            } else {
                button.classList.remove("hovered");
            }
        });
    });
});













// ADVANCED CURSOR MOVEMENTs, lol



document.addEventListener("DOMContentLoaded", function () {
    const cursor = document.getElementById("cursor");
    const blur = document.getElementById("cursor-blur");
    const hoverTargets = document.querySelectorAll("#nav h4, #nav img, .card, button, #imageTrack img, #follow-on-ig, .elem,  #f1 img, #footer-social i, #span1, #f3 h3, #f2 h3, .common-class, #webdesign");

    let posX = 0, posY = 0;
    let mouseX = 0, mouseY = 0;
    let blurX = 0, blurY = 0;
    let cursorSize = 25; // Default cursor size

    document.addEventListener("mousemove", function (event) {
        let isHovering = false;

        hoverTargets.forEach(target => {
            const rect = target.getBoundingClientRect();
            const x = event.clientX;
            const y = event.clientY;

            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
                isHovering = true;
            }
        });

        if (isHovering) {
            cursorSize += (75 - cursorSize) * 0.2; // Smoothly transition to 50px
            mouseX = event.clientX - 36;
            mouseY = event.clientY - 36;
            cursor.style.backgroundColor = "transparent";
            cursor.style.border = "1px solid white";
        } else {
            cursorSize += (25 - cursorSize) * 0.2; // Smoothly transition to 25px
            mouseX = event.clientX - 12;
            mouseY = event.clientY - 12;
            cursor.style.backgroundColor = "#95C11E";
            cursor.style.border = "none";
        }
    });

    function animateCursor() {
        posX += (mouseX - posX) * 0.15;
        posY += (mouseY - posY) * 0.15;
        cursor.style.left = posX + "px";
        cursor.style.top = posY + "px";
        cursor.style.width = cursorSize + "px";
        cursor.style.height = cursorSize + "px";

        // Smooth blur movement
        blurX += (posX - blurX) * 0.05;
        blurY += (posY - blurY) * 0.05;
        blur.style.left = blurX - 180 + "px";
        blur.style.top = blurY - 180 + "px";

        requestAnimationFrame(animateCursor);
    }

    animateCursor();
});







const page5 = document.getElementById("page5");
const text = page5.querySelector("p");
const colon1 = document.getElementById("colon1");
const colon2 = document.getElementById("colon2");

// Smooth text hover effect
page5.addEventListener("mousemove", (e) => {
  const { clientX, clientY } = e;
  const { width, height, left, top } = page5.getBoundingClientRect();

  // Normalize the cursor position (-1 to 1 range)
  const x = (clientX - left - width / 2) / (width / 2);
  const y = (clientY - top - height / 2) / (height / 2);

  // Apply inverse movement effect
  const maxTranslate = 50; // max movement in pixels
  const translateX = -x * maxTranslate;
  const translateY = -y * maxTranslate / 2; // Less movement on Y-axis for subtle effect

  text.style.transform = `translate(${translateX}px, ${translateY}px)`;
  text.style.transition = "transform 0.5s ease-out"; // Smoother and slower transition
});

// Reset effect when mouse leaves
page5.addEventListener("mouseleave", () => {
  text.style.transform = "translate(0, 0)";
  text.style.transition = "transform 0.8s ease-out"; // Slower reset for smoothness
});

// GSAP ScrollTrigger effect for colons from diagonal to their position
gsap.registerPlugin(ScrollTrigger);
gsap.from(colon1, {
  scrollTrigger: {
    trigger: page5,
    start: "top 80%",
    end: "top 80%",
    toggleActions: "play none none reverse",
  },
  x: -100,
  y: -100,
  opacity: 0,
  duration: 1.2,
  ease: "power2.out",
});

gsap.from(colon2, {
  scrollTrigger: {
    trigger: page5,
    start: "top 75%",
    end: "top 75%",
    toggleActions: "play none none reverse",
  },
  x: 100,
  y: 100,
  opacity: 0,
  duration: 1.2,
  ease: "power2.out",
});



gsap.from("#page6 h1", {
  scrollTrigger: {
    trigger: page6,
    start: "top 75%",
    end: "top 75%",
    toggleActions: "play pause resume reverse",
    scrub: true,
  },
  y: 60,
  opacity: 0,
  duration: 1,
  ease: "power2.out",
});