document.addEventListener("DOMContentLoaded", function () {

  if (window.innerWidth <= 991) return;

  gsap.registerPlugin(ScrollTrigger);

  const logoText = document.querySelector(".nav_logo-text");

  if (!logoText) return;

  const naturalWidth = logoText.scrollWidth;

  gsap.set(logoText, {
    overflow: "hidden",
    width: naturalWidth,
    minWidth: 0,        // critical — allows flex child to shrink below content size
    flexShrink: 0,      // prevent unwanted flex shrinking outside of our animation
  });

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: "body",
      start: "top top",
      end: "6% top",
      scrub: 1.2,
    }
  });

  tl
    .to(logoText, {
      opacity: 0,
      x: -6,
      ease: "power2.in",
      duration: 0.4,
    }, 0)
    .to(logoText, {
      width: 0,
      paddingLeft: 0,
      paddingRight: 0,
      marginLeft: 0,
      marginRight: 0,
      ease: "power3.inOut",
      duration: 0.6,
    }, 0.25);  // starts sooner so gap closes before opacity fully hits 0

});