document.addEventListener("DOMContentLoaded", () => {
  if (window.innerWidth < 768) return;

  const items = document.querySelectorAll(".item-study");

  items.forEach((item) => {
    const image = item.querySelector(".img-study img");
    const title = item.querySelector("h3");
    const info = item.querySelector("p");

    const chars = title.textContent.split("").map((char) => {
      const span = document.createElement("span");
      span.textContent = char;
      span.style.display = "inline-block";
      span.style.transform = "translateY(100%)";
      return span;
    });

    title.textContent = "";
    chars.forEach((span) => title.appendChild(span));

    image.addEventListener("mouseenter", () => {
      item.classList.add("active"); 

      gsap.to(chars, {
        y: "0%",
        duration: 1,
        stagger: 0.03,
        ease: "expo.out",
      });

      gsap.to(info, { 
        opacity: 1, 
        y: 0, 
        duration: 0.6, 
        ease: "expo.out" 
      });

      gsap.to(image, { scale: 1.05, duration: 0.8, ease: "power3.out" });
    });

    image.addEventListener("mouseleave", () => {
      item.classList.remove("active"); 

      gsap.to(chars, {
        y: "-110%",
        duration: 0.8,
        stagger: 0.03,
        ease: "expo.out",
        onComplete: () => gsap.set(chars, { y: "100%" }),
      });

      gsap.to(info, { 
        opacity: 0, 
        y: 20, 
        duration: 0.6, 
        ease: "expo.in" 
      });

      gsap.to(image, { scale: 1, duration: 0.8, ease: "power3.inOut" });
    });
  });
});