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" });
});
});
});