{
  const params = {
    duration: 0.8,
    ease: "expo.out",
  };

  const handleSecondaryVisibility = (secondary) => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            gsap.to(secondary, {
              yPercent: 200,
              ...params,
            });
          } else {
            gsap.to(secondary, {
              yPercent: 0,
              ...params,
            });
          }
        });
      },
      {
        threshold: 0.02,
        rootMargin: "-10% 0px",
      }
    );

    const contentElement = document.getElementById("content");
    if (contentElement) {
      observer.observe(contentElement);
    }
  };

  addEventListener("GSAPReady", (event) => {
    const wrapper = document.querySelector("[data-module='nav']");
    if (!wrapper) return;
    const main = wrapper.children[0];
    const secondary = wrapper.children[1].children[0];

    handleSecondaryVisibility(secondary);
  });
}