<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	gsap.registerPlugin(ScrollTrigger);
	document.querySelectorAll(".scroll-3_trigger").forEach(component => {
		if (component.hasAttribute("data-scroll-3")) return;
		component.setAttribute("data-scroll-3", "");

		const target = component.querySelector(".scroll-3_target");
		if (!target) return;

		let tl = gsap.timeline({
			scrollTrigger: {
				trigger: component,
				start: () => component.offsetHeight > window.innerHeight ? "bottom bottom" : "top top",
				end: "bottom top",
				scrub: true
			}
		});
		tl.to(target, { y: "30vh", opacity: 0, ease: "none" });
	});
});
</script>