<!-- Customized from https://github.com/heidkaemper/tailwindcss-intersect -->

<script is:inline>
  const Observer = {
    observer: null,
    delayBetweenAnimations: 100, // ms
    animationCounter: 0,

    start() {
      const selectors = [
        '[class*=" intersect:"]',
        '[class*=":intersect:"]',
        '[class^="intersect:"]',
        '[class="intersect"]',
        '[class*=" intersect "]',
        '[class^="intersect "]',
        '[class$=" intersect"]',
      ];

      const elements = Array.from(
        document.querySelectorAll(selectors.join(","))
      );

      const getThreshold = (element) => {
        if (element.classList.contains("intersect-full")) {
          return 0.99;
        } else if (element.classList.contains("intersect-half")) {
          return 0.5;
        } else if (element.classList.contains("intersect-quarter")) {
          return 0.25;
        } else {
          return 0.25;
        }
      };

      elements.forEach((el) => {
        el.setAttribute("no-intersect", "");
        el._intersectionThreshold = getThreshold(el);
      });

      const callback = (entries) => {
        entries.forEach((entry) => {
          requestAnimationFrame(() => {
            const target = entry.target;
            const intersectionRatio = entry.intersectionRatio;
            const threshold = target._intersectionThreshold;

            if (target.classList.contains("intersect-no-queue")) {
              if (entry.isIntersecting) {
                target.removeAttribute("no-intersect");
                if (!target.classList.contains("intersect-repeat")) {
                  this.observer.unobserve(target);
                }
              } else {
                target.setAttribute("no-intersect", "");
              }
              return;
            }

            if (intersectionRatio >= threshold) {
              if (!target.hasAttribute("data-animated")) {
                target.removeAttribute("no-intersect");
                target.setAttribute("data-animated", "true");

                const delay = this.animationCounter * this.delayBetweenAnimations;
                this.animationCounter++;

                target.style.animationDelay = `${delay}ms`;

                if (!target.classList.contains("intersect-repeat")) {
                  this.observer.unobserve(target);
                }
              }
            } else {
              target.setAttribute("no-intersect", "");
              target.removeAttribute("data-animated");
              target.style.transitionDelay = "";
              target.style.animationDelay = "";

              this.animationCounter = 0;
            }
          });
        });
      };

      this.observer = new IntersectionObserver(callback.bind(this), {
        threshold: [0, 0.25, 0.5, 0.99],
      });

      elements.forEach((el) => {
        this.observer.observe(el);
      });
    },
  };

  Observer.start();

  document.addEventListener("astro:after-swap", () => {
    Observer.start();
  });
</script>
