<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger, SplitText);

(function () {
  let splits = [];
  let masters = [];

  function destroyAll() {
    splits.forEach(s => { try { s.revert(); } catch(e){} });
    splits = [];
    masters.forEach(tl => { try { tl.kill(); } catch(e){} });
    masters = [];
    ScrollTrigger.getAll().forEach(st => st.kill());
    gsap.killTweensOf("*");
  }

  function build() {
    const containers = document.querySelectorAll('.container-titulos');

    containers.forEach(container => {
      container.style.opacity = "1";

      const frases = Array.from(
        container.querySelectorAll('.frases .elementor-heading-title')
      );

      const timelineMestre = gsap.timeline({
        scrollTrigger: {
          trigger: container,
          start: "top 10%",
          end: "bottom bottom",
          scrub: true,
        }
      });

      const duracaoAparecer = 1;  
      const duracaoSumir    = 1;
      const sobreposicao    = 0.05;

      frases.forEach((frase, index) => {
        frase.setAttribute("aria-label", frase.textContent);

        if (frase._split) { try { frase._split.revert(); } catch(e){} }

        const split = new SplitText(frase, {
          type: "words,chars",
          wordsClass: "word",
          charsClass: "char"
        });
        frase._split = split;
        splits.push(split);

        gsap.set(frase, { visibility: "visible" });
        void frase.offsetHeight;

        const timelineFrase = gsap.timeline();

        timelineFrase.from(split.chars, {
          autoAlpha: 0,
        //   filter: "blur(10px)",
          stagger: { amount: duracaoAparecer, from: "start" },
          duration: duracaoAparecer
        });

        if (index < frases.length - 1) {
          timelineFrase.to(split.chars, {
            autoAlpha: 0,
            // filter: "blur(10px)",
            stagger: { amount: duracaoSumir, from: "start" }, //mude para end, caso queira que suma de trás para frente
            duration: duracaoSumir
          });
        }

        timelineMestre.add(timelineFrase, index === 0 ? undefined : `-=${sobreposicao}`);
      });

      masters.push(timelineMestre);
    });

    requestAnimationFrame(() => ScrollTrigger.refresh());
  }

  function start() {
    requestAnimationFrame(() => requestAnimationFrame(build));
  }

  function initAfterFonts() {
    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(start).catch(start);
    } else {
      start();
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initAfterFonts, { once: true });
  } else {
    initAfterFonts();
  }

  let lastW = window.innerWidth, lastH = window.innerHeight, to;
  window.addEventListener("resize", () => {
    const w = window.innerWidth, h = window.innerHeight;
    if (w !== lastW || Math.abs(h - lastH) > 80) {
      lastW = w; lastH = h;
      clearTimeout(to);
      to = setTimeout(() => { destroyAll(); initAfterFonts(); }, 120);
    }
  }, { passive: true });

})();
</script>