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 span = document.createElement("span");
    span.textContent = title.textContent;
    span.style.display = "inline-block";
    span.style.transform = "translateY(100%)";
    title.textContent = "";
    title.appendChild(span);

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

      gsap.to(span, {
        y: "0%",
        duration: 1,
        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(span, {
        y: "100%",
        duration: 0.8,
        ease: "expo.inOut"
      });

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

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