let defaultStagger = "0.13";
////
let bounceEase =
  "ease: CustomEase.create('custom', 'M0,0 C0,0 0.065,0.284 0.09,0.373 0.11,0.448 0.154,0.589 0.18,0.654 0.202,0.714 0.252,0.826 0.28,0.873 0.303,0.914 0.351,0.987 0.38,1.01 0.446,1.063 0.501,1.052 0.623,1.031 0.738,1.011 1,1 1,1')";
let stdEase =
  "ease: CustomEase.create('custom', 'M0,0 C0.398,0 -0.006,0.999 1,1')";
let backEase =
  "ease: CustomEase.create('custom', 'M0,0 C0,0 0.065,0.284 0.09,0.373 0.11,0.448 0.154,0.589 0.18,0.654 0.202,0.714 0.255,0.849 0.28,0.905 0.305,0.963 0.357,1.072 0.38,1.113 0.404,1.156 0.431,1.226 0.48,1.26 0.503,1.276 0.593,1.27 0.64,1.232 0.743,1.147 1,1 1,1')";

// LENIS OPEN

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 800);
});

gsap.ticker.lagSmoothing(0);
//LENIS CLOSE

gsap.config({
  nullTargetWarn: false,
});
// ||
// onDesktop(() => {});
// onTablet(() => {});
// onMobile(() => {});
const onDesktop = (fn) => gsap.matchMedia().add("(min-width: 992px)", fn);
// const onTablet = (fn) =>
//   gsap.matchMedia().add("(min-width: 768px) and (max-width: 991px)", fn);
const onMobile = (fn) => gsap.matchMedia().add("(max-width: 991px)", fn);

let pageInTl = gsap.timeline({
  defaults: {
    duration: 1.2,
  },
  onStart: () => {
    $("html, body").scrollTop(0);
    console.log("page in");
  },
  onComplete: () => {
    // lenis.start();
    lenis.resize();
  },
});

function init() {
  window.onbeforeunload = function () {
    window.scrollTo(0, 0);
  };

  let splitInstances = {};

  function charSplit() {
    if (splitInstances.char) {
      splitInstances.char.revert();
    }
    splitInstances.char = new SplitText("[charsplit]", {
      type: "chars, words",
      charsClass: "char",
      wordsClass: "word",
    });
  }

  function wordSplit() {
    if (splitInstances.word) {
      splitInstances.word.revert();
    }
    splitInstances.word = new SplitText("[wordsplit]", {
      type: "words",
      wordsClass: "word",
    });
  }

  function lineSplit() {
    if (splitInstances.line) {
      splitInstances.line.revert();
    }

    const selectors = ["[linesplit]"];
    if (window.innerWidth >= 992) {
      selectors.push("[linesplitrich] h3");
    }

    const lineElements = document.querySelectorAll(selectors.join(", "));
    splitInstances.line = new SplitText(lineElements, {
      type: "lines",
      linesClass: "line",
    });
  }

  charSplit();
  wordSplit();
  lineSplit();

  onDesktop(() => {
    window.addEventListener("resize", function () {
      location.reload();
      charSplit();
      wordSplit();
      lineSplit();
    });
  });

  let windowWidth = $(window).innerWidth();
  window.addEventListener("resize", function () {
    if (windowWidth !== $(window).innerWidth()) {
      windowWidth = $(window).innerWidth();
      loadSplit.revert();
      charSplit();
      wordSplit();
      lineSplit();
    }
  });

  let splineInstance; // Store the instance globally

  function initSpline() {
    const canvas = document.getElementById("network-spline");

    if (!canvas) return; // Prevent errors if canvas isn't found

    if (splineInstance) {
      splineInstance.dispose(); // Ensure cleanup
      splineInstance = null;
    }

    splineInstance = new window.Spline({
      scene: "https://prod.spline.design/BrmtHMLoGvv93Rnw/scene.splinecode",
      canvas: canvas,
    });
  }

  function destroySpline() {
    if (splineInstance) {
      splineInstance.dispose(); // Properly remove the scene
      splineInstance = null; // Clear instance
    }
  }
  destroySpline();


  
  /// ----------- pageIn --------------- ///
  function pageIn() {
    $("html, body").scrollTop(0);
    let initPageLoad = gsap.timeline({});

    initPageLoad.set(".page_main", {
      opacity: 1,
    });
    gsap.set(".nav_comp", {
      opacity: 1,
    });
    gsap.set(".transition", { transformOrigin: "100% 0%" });
    gsap.set(".transition", { rotateX: "0" });
    gsap.set(".transition_holder", { opacity: 1 });
    gsap.set(".transition_overlay", { opacity: 0 });
    console.log("page in");
    let pageInTl = gsap.timeline({
      defaults: { duration: 1 },
      // onStart: () => {
      //   $(".nav_comp").removeClass("muted");
      // },
    });

    if (document.querySelector(".nav_comp")) {
      pageInTl.set($(".nav_comp"), {});
    }
    if (document.querySelector(".transition_overlay")) {
      pageInTl.fromTo(
        ".transition_overlay",
        {
          opacity: 1,
        },
        {
          opacity: 0,
          duration: 0.4,
          ease: "power2.out",
        },
        "<"
      );
    }

    if (document.querySelector(".transition")) {
      pageInTl.fromTo(
        ".transition",
        {
          rotateX: "0",
          yPercent: 0,
        },
        {
          rotateX: "-60",
          yPercent: 110,
          duration: 1.5,
          ease: "expo.inOut",
        },
        "<+0.2"
      );
    }

    // if (document.querySelector(".nav_comp")) {
    //   pageInTl.fromTo(
    //     $(".nav_comp"),
    //     {
    //       opacity: 0,
    //       yPercent: -100,
    //     },
    //     {
    //       opacity: 1,
    //       yPercent: 0,
    //       delay: 0.6,
    //       duration: 1.2,
    //       ease: "expo.out",
    //     }
    //   );
    // }

    if (document.querySelector("[page-in='line']")) {
      pageInTl.fromTo(
        "[page-in='line']",
        {
          width: "0%",
        },
        {
          width: "100%",
          duration: 0.6,
          delay: 1,
          ease: "sine.out",
        },
        "<"
      );
    }

    if (document.querySelector("[page-in='header-black'] .char")) {
      pageInTl.fromTo(
        "[page-in='header-black'] .char",
        {
          opacity: 0,
          yPercent: 100,
        },
        {
          opacity: 1,
          yPercent: 0,
          duration: 0.6,
          stagger: { each: 0.02 },
          ease: stdEase,
        },
        "<"
      );
      pageInTl.fromTo(
        "[page-in='header-black'] .char",
        {
          color: "#00DDB3",
        },
        {
          color: "#000",
          duration: 0.4,
          stagger: { each: 0.04 },
          ease: stdEase,
        },
        "<"
      );
    }
    if (document.querySelector("[page-in='header-white'] .char")) {
      pageInTl.fromTo(
        "[page-in='header-white'] .char",
        {
          opacity: 0,
          yPercent: 100,
        },
        {
          opacity: 1,
          yPercent: 0,
          duration: 0.6,
          stagger: { each: 0.02 },
          ease: stdEase,
        },
        "<"
      );
      pageInTl.fromTo(
        "[page-in='header-white'] .char",
        {
          color: "#00DDB3",
        },
        {
          color: "#FFF",
          duration: 0.4,
          stagger: { each: 0.04 },
          ease: stdEase,
        },
        "<"
      );
    }

    if (document.querySelector("[page-in='rotate']")) {
      pageInTl.fromTo(
        "[page-in='rotate']",
        {
          opacity: 0,
          rotateX: 30,
          scale: 0.9,
          yPercent: 50,
        },
        {
          opacity: 1,
          scale: 1,
          rotateX: 0,
          yPercent: 0,
          duration: 2,
          delay: 0.5,
          ease: stdEase,
        },
        "<"
      );
    }

    if (document.querySelector("[page-in='up']")) {
      pageInTl.fromTo(
        "[page-in='up']",
        {
          yPercent: 10,
        },
        {
          yPercent: 0,
          duration: 7,
          ease: stdEase,
        },
        "<"
      );
      pageInTl.fromTo(
        "[page-in='up']",
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.4,
          ease: "power1.out",
        },
        "<"
      );
    }
    if (document.querySelector("[page-in='up']")) {
      pageInTl.fromTo(
        "[page-in='up']",
        {
          yPercent: 10,
        },
        {
          yPercent: 0,
          duration: 7,
          ease: stdEase,
        },
        "<"
      );
      pageInTl.fromTo(
        "[page-in='up']",
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.4,
          ease: "power1.out",
        },
        "<"
      );
    }

    if (document.querySelector("[page-in='fade']")) {
      pageInTl.fromTo(
        "[page-in='fade']",
        {
          opacity: 0,
        },
        {
          opacity: 1,
          ease: "power2.in",
        },
        "<+5%"
      );
    }

    if (document.querySelector("[page-in='reveal2'] .line")) {
      pageInTl.fromTo(
        "[page-in='reveal2'] .line",
        {
          yPercent: 100,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          yPercent: 0,
          duration: 1.3,
          stagger: { each: 0.2 },
          ease: "power2.out",
        },
        "<+50%"
      );
    }

    if (document.querySelector("[page-in='reveal'] .line")) {
      pageInTl.fromTo(
        "[page-in='reveal'] .line",
        {
          yPercent: 100,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          yPercent: 0,
          duration: 1,
          ease: "power2.out",
          onComplete: () => {
            // lenis.start();
          },
        },
        "<+50%"
      );
    }

    if (document.querySelector("[page-in='btn-pop']")) {
      pageInTl.fromTo(
        "[page-in='btn-pop']",
        {
          opacity: 0,
          scale: 0.8,
        },
        {
          scale: 1,
          opacity: 1,
          duration: 0.8,
          stagger: { each: 0.2 },
          ease: CustomEase.create(
            "custom",
            "M0,0 C0,0 0.065,0.284 0.09,0.373 0.11,0.448 0.154,0.589 0.18,0.654 0.202,0.714 0.255,0.849 0.28,0.905 0.305,0.963 0.357,1.072 0.38,1.113 0.404,1.156 0.431,1.226 0.48,1.26 0.503,1.276 0.593,1.27 0.64,1.232 0.743,1.147 1,1 1,1 "
          ),
        },
        "<"
      );
    }
    if (document.querySelector("[page-in='stagger']")) {
      pageInTl.fromTo(
        "[scroll='stagger'] > *",
        {
          yPercent: 100,
          opacity: 0,
        },
        {
          yPercent: 0,
          opacity: 0.7,
          duration: 2,
          stagger: { each: 0.2 },
        },
        "<"
      );
    }
  }

  pageIn();

  // ++++++++++++ pageOut(); +++++++++++++ //

  function hoverText() {
    console.log("hoverText");
    $(".page_main").each(function () {
      // ———— animation
      const staggerLinks = document.querySelectorAll("[stagger-link]");
      if (staggerLinks.length) {
        staggerLinks.forEach((link) => {
          const letters = link.querySelectorAll("[stagger-link-text] .char");
          if (letters.length) {
            link.addEventListener("mouseenter", function () {
              gsap.to(letters, {
                yPercent: -100,
                duration: 0.4,
                ease: stdEase,
                overwrite: true,
              });
            });

            link.addEventListener("mouseleave", function () {
              gsap.to(letters, {
                yPercent: 0,
                duration: 0.4,
                ease: stdEase,
              });
            });
          }
        });
      }
    });
  }

  let homeLoader;

  $(".home-page").each(function () {
    let homePage = $(this);
    let navComp = homePage.find(".nav_comp");
    let headerText = homePage.find("[home-text]");
    let halfText = homePage.find("[half-blur]");
    let homeBlurWrap = homePage.find("[home-blur]");
    let textIn = homeBlurWrap.find(".word");
    let homeRevealWrap = homePage.find("[home-reveal]");
    let textInReveal = homeRevealWrap.find(".line");
    let homeStaggerWrap = homePage.find("[home-stagger]");
    let homeStagger = homeStaggerWrap.find(".trusted_logo_holder");
    let homeBtn = homePage.find("[home-btn]");
    let opacityHoverText = homePage.find("[opacity-hover]");

    homeLoader = gsap.timeline({
      paused: true,
      onStart: () => {
        navComp.removeClass("muted");
        lenis.stop();
        $("html, body").scrollTop(0);
      },
      onComplete: () => {
        lenis.start();
      },
    });
    // homeLoader.fromTo(
    //   headerText,
    //   {
    //     // filter: "blur(10px)",
    //     scale: 0.7,
    //     yPercent: 30,
    //     opacity: 0,
    //   },
    //   {
    //     // filter: "blur(0px)",
    //     scale: 1,
    //     yPercent: 0,
    //     opacity: 1,
    //     duration: 1.6,
    //     ease: "power1.out",
    //   },
    //   "<"
    // );
    homeLoader.fromTo(
      headerText,
      {
        yPercent: 100,
        clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
      },
      {
        yPercent: 0,
        clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
        ease: "expo.inOut",
      },
      "<"
    );
    onDesktop(() => {
      homeLoader.fromTo(
        textInReveal,
        {
          filter: "blur(10px)",
        },
        {
          filter: "blur(0px)",
          duration: 2.5,
          ease: "power2.out",
        },
        "<"
      );
    });
    homeLoader.fromTo(
      textInReveal,
      {
        yPercent: 100,
        clipPath: "polygon(0% 0%, 110% 0%, 110% 0%, 0% 0%)",
      },
      {
        yPercent: 0,
        clipPath: "polygon(0% 0%, 110% 0%, 110% 110%, 0% 110%)",
        duration: 2.5,
        ease: "power2.out",
      },
      "<"
    );
    homeLoader.fromTo(
      homeBlurWrap,
      {
        opacity: 0,
      },
      {
        opacity: 1,
      },
      "<+60%"
    );

    homeLoader.fromTo(
      textIn,
      {
        clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        yPercent: 100,
      },
      {
        clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
        yPercent: 0,
        duration: 2,
        ease: "expo.out",
        stagger: 0.02,
      },
      "<"
    );

    homeLoader.fromTo(
      homeBtn,
      {
        scale: 0.8,
        opacity: 0,
      },
      {
        scale: 1,
        opacity: 1,
        duration: 1,
        ease: bounceEase,
      },
      "<"
    );
    homeLoader.fromTo(
      homeStagger,
      {
        yPercent: 100,
        opacity: 0,
      },
      {
        yPercent: 0,
        opacity: 0.7,
        duration: 0.6,
        stagger: { each: 0.1 },
        ease: "expo.Out",
      },
      "<"
    );
    homeLoader.to(
      opacityHoverText,
      {
        opacity: 0.5,
        duration: 1,
        ease: "power1.out",
      },
      "<"
    );

    homeLoader.fromTo(
      halfText,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 1,
        ease: "power1.out",
      },
      "<"
    );
    homeLoader.fromTo(
      navComp,
      {
        opacity: 0,
        yPercent: -100,
      },
      {
        opacity: 1,
        yPercent: 0,
        duration: 1.2,
        ease: "expo.out",
      },
      "<"
    );
  });

  // function homeLoad() {
  //   lenis.stop();
  // }
  onDesktop(() => {
    let lineh3 = gsap.timeline({
      defaults: { duration: 1 },
      scrollTrigger: {
        trigger: "[linesplitrich]",
        start: "top bottom",
        end: "bottom bottom",
        toggleActions: "play none none reset",
      },
    });
    if (document.querySelector("[linesplitrich] h3 .line")) {
      lineh3.fromTo(
        "[linesplitrich] h3 .line",
        {
          yPercent: 100,
          // xPercent: -5,
          clipPath: "polygon(110% 0%, 0% 0%, 0% 0%, 110% 0%)",
        },
        {
          yPercent: 0,
          // xPercent: 0,
          clipPath: "polygon(110% 110%, 0% 110%, 0% 0%, 110% 0%)",
          stagger: {
            each: 0.15,
          },
          duration: 1.7,
          ease: "expo.out",
        },
        "<"
      );
    }
  });
  function introTextLoad() {
    let introTextLoad = gsap.timeline({
      scrollTrigger: {
        trigger: "[intro-text]",
        start: "top 85%",
        end: "bottom -10%",
        toggleActions: "play none none reverse",
      },
    });

    introTextLoad.fromTo(
      "[intro-text]",
      {
        rotateX: -30,
        scale: 0.9,
        opacity: 0,
        yPercent: 50,
      },
      {
        opacity: 1,
        scale: 1,
        rotateX: 0,
        yPercent: 0,
        duration: 2,
        delay: 0.5,
        ease: stdEase,
      }
    );
  }

  // function partnersSplineLoad() {
  //   let partnersSplineLoad = gsap.timeline({});

  //   partnersSplineLoad.fromTo(
  //     ".network_spline",
  //     {
  //       opacity: 0,
  //     },
  //     {
  //       opacity: 1,
  //       duration: 5,
  //       ease: "sine.out",
  //     }
  //   );
  // }

  function loadInputFlowScript(callback) {
    const script = document.createElement("script");
    script.src = "https://script.inputflow.io/i.js";
    script.type = "module";
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
  }

  function loadScript(src, callback) {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.onload = callback;
    document.head.appendChild(script);
  }

  // $(".page_main").each(function () {
  //   const staggerLinks = document.querySelectorAll("[stagger-link]");
  //   if (staggerLinks.length) {
  //     staggerLinks.forEach((link) => {
  //       const letters = link.querySelectorAll("[stagger-link-text] .char");
  //       if (letters.length) {
  //         link.addEventListener("mouseenter", function () {
  //           gsap.to(letters, {
  //             yPercent: -100,
  //             duration: 0.4,
  //             ease: stdEase,
  //             overwrite: true,
  //           });
  //         });

  //         link.addEventListener("mouseleave", function () {
  //           gsap.to(letters, {
  //             yPercent: 0,
  //             duration: 0.4,
  //             ease: stdEase,
  //           });
  //         });
  //       }
  //     });
  //   }
  // });

  // function stdPageLoad() {
  //   $(".page-std").each(function () {
  //     let standardPage = $(this);
  //     let navComp = standardPage.find(".nav_comp");
  //     let pageLoadLine = standardPage.find("[hero-line-load]");
  //     let pageLoadText = standardPage.find("[hero-text-load]");
  //     let pageLoadTextChar = pageLoadText.find(".char");
  //     let pageLoadBlur = standardPage.find("[hero-blur-load]");

  //     let stdPl = gsap.timeline({
  //       //   onStart: () => {
  //       //     $(".nav_comp").removeClass("muted");
  //       //   },
  //     });

  //     stdPl.to(pageLoadLine, {
  //       width: "0%",
  //     });
  //     stdPl.fromTo(
  //       pageLoadTextChar,
  //       {
  //         opacity: 0,
  //         yPercent: 100,
  //       },
  //       {
  //         opacity: 1,
  //         yPercent: 0,
  //         delay: 1,
  //         duration: 0.6,
  //         stagger: { each: 0.02 },
  //         ease: stdEase,
  //       }
  //     );

  //     stdPl.to(
  //       pageLoadTextChar,
  //       {
  //         color: "#000",
  //         duration: 0.4,
  //         stagger: { each: 0.04 },
  //         ease: stdEase,
  //       },
  //       "<+0.2"
  //     );

  //     stdPl.fromTo(
  //       pageLoadLine,
  //       {
  //         width: "0%",
  //       },
  //       {
  //         width: "100%",
  //         duration: 0.6,
  //         ease: "sine.out",
  //       },
  //       "<"
  //     );

  //     stdPl.fromTo(
  //       navComp,
  //       {
  //         opacity: 0,
  //         yPercent: -100,
  //       },
  //       {
  //         opacity: 1,
  //         yPercent: 0,
  //         duration: 1.2,
  //         ease: "expo.out",
  //       },
  //       "<50%"
  //     );

  //     stdPl.fromTo(
  //       pageLoadBlur,
  //       {
  //         opacity: 0,
  //       },
  //       {
  //         opacity: 1,
  //         duration: 1,
  //         ease: "sine.out",
  //       },
  //       "<50%"
  //     );
  //   });
  // }

  function navScript() {
    let menuHide = gsap.timeline({
      paused: true,
    });

    menuHide.fromTo(
      ".nav_comp",
      {
        yPercent: 0,
      },
      {
        yPercent: -110,
        duration: 0.4,
        ease: "power2.out",
      }
    );

    const SCROLL_THRESHOLD = 5;
    let lastScrollPosition = 0;

    lenis.on("scroll", ({ scroll, direction }) => {
      const isAtTop = scroll <= SCROLL_THRESHOLD;
      const hasScrolledDown = scroll > lastScrollPosition;

      if (isAtTop) {
        menuHide.reverse();
      } else if (direction === 1 && hasScrolledDown) {
        menuHide.play();
      } else if (direction === -1 && !hasScrolledDown) {
        menuHide.reverse();
      }

      lastScrollPosition = scroll;
    });

    const navComp = document.querySelector(".nav_comp");

    if (navComp) {
      navComp.addEventListener("mouseenter", () => {
        lenis.stop();
      });

      navComp.addEventListener("mouseleave", () => {
        lenis.start();
      });
    }

    $(".nav_dropdown_wrapper").on("mouseenter", function () {
      $(this).find(".nav_dropdown").addClass("show");
      $(this).find(".nav_overlay").addClass("show");
    });

    $(".nav_dropdown_wrapper").on("mouseleave", function () {
      const dropdown = $(this).find(".nav_dropdown");
      setTimeout(() => {
        if (!dropdown.is(":hover") && !$(this).is(":hover")) {
          dropdown.removeClass("show");
        }
      }, 100);
    });

    $(".nav_dropdown_wrapper, .nav_dropdown").on("mouseenter", function () {
      $(this)
        .closest(".nav_dropdown_wrapper")
        .find(".nav_dropdown")
        .addClass("show");
      $(this)
        .closest(".nav_dropdown_wrapper")
        .find(".nav_overlay")
        .addClass("show");
    });

    $(".nav_dropdown_wrapper, .nav_dropdown").on("mouseleave", function () {
      $(this)
        .closest(".nav_dropdown_wrapper")
        .find(".nav_dropdown")
        .removeClass("show");
      $(this)
        .closest(".nav_dropdown_wrapper")
        .find(".nav_overlay")
        .removeClass("show");
    });

    $(".nav_dropdown_wrapper").on("mouseenter mouseleave", function () {
      $(".nav_link_arrow").toggleClass("turn");
    });

    $(document).on("click", "a", function () {
      $(".nav_link_arrow").removeClass("turn");
    });
  }
  // pageIn();

  //Partner Footer Gradient Follow
  function partnerFooter() {
    onDesktop(() => {
      $(document).on("mousemove", function (e) {
        const $wrap = $(".follow_wrap");
        const $gradient = $(".follow_gradient");
        if ($wrap.length && $gradient.length) {
          const wrapOffset = $wrap.offset();
          const wrapWidth = $wrap.outerWidth();
          const wrapHeight = $wrap.outerHeight();
          const gradientWidth = $gradient.outerWidth();
          const gradientHeight = $gradient.outerHeight();
          let posX = e.pageX - wrapOffset.left - gradientWidth / 2;
          let posY = e.pageY - wrapOffset.top - gradientHeight / 2;
          posX = Math.max(0, Math.min(posX, wrapWidth - gradientWidth));
          posY = Math.max(0, Math.min(posY, wrapHeight - gradientHeight));
          gsap.to($gradient, {
            x: posX,
            y: posY,
            duration: 3,
            ease: "power3.out",
          });
        }
      });
    });
  }
  partnerFooter();

  function globalScript() {
    let prevScroll = window.scrollY;
    let colorEls = $("[data-color-change]");
    let scrollTimer;

    gsap.ticker.add(() => {
      let currentScroll = window.scrollY;
      let velocity = Math.abs(currentScroll - prevScroll);
      prevScroll = currentScroll;

      if (velocity > 1) {
        colorEls.each(function () {
          let chars = $(this).find(".char");
          let charCount = chars.length;
          let maxVelocity = charCount;
          let normalized = Math.min(velocity / maxVelocity, 1);
          let count = Math.ceil(charCount * normalized);

          gsap.to(chars.slice(0, count), {
            color: "#00DDB3",
            duration: 0.3,
            stagger: {
              each: 0.02,
              from: "start",
            },
            overwrite: "auto",
            ease: "power1.out",
          });
        });

        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
          colorEls.each(function () {
            gsap.to($(this).find(".char"), {
              color: "#000",
              duration: 0.8,
              stagger: {
                each: 0.01,
                from: "end",
              },
              overwrite: "auto",
              ease: "power1.out",
            });
          });
        }, 700);
      }
    });

    let formDisabled = false; // Track if form should be disabled

    $(".success_close").on("click", function () {
      $(".footer_success_wrap").fadeOut(300, function () {
        $(this).css("display", "none !important");
        formDisabled = true; // Disable form interactions after closing
        $(".sales_form_wrap").removeClass("show").css("pointer-events", "none");
      });
    });

    $(".footer_btn_left").on("click", function (e) {
      e.stopPropagation();
      if (!formDisabled) {
        // Allow clicks only if form is not disabled
        $(".sales_form_wrap").addClass("show");
      }
    });

    $(document).on("click", function (e) {
      if (!$(e.target).closest(".sales_form_wrap").length) {
        $(".sales_form_wrap").removeClass("show");
      }
    });

    //call me back form
    $("[callback]").on("click", function () {
      $(".footer_call_container").removeClass("hide");
      $(".call_btn_wrap").addClass("active");
    });
    $(".footer_close_trigger, .call_form_close").on("click", function () {
      $(".footer_call_container").addClass("hide");
      $(".call_btn_wrap").removeClass("active");
    });

    // runSplit();

    // $("a").on("click", function (e) {
    //   e.preventDefault();
    //   const url = $(this).attr("href");
    //   if ($(this).is("[transition-none]")) {
    //     window.location.href = url;
    //     return;
    //   }
    //   if ($(this).attr("data-bg") === "dark") {
    //     $(".transition.is-bg").css("background-color", "#000");
    //   } else {
    //     $(".transition.is-bg").css("background-color", "#FFF");
    //   }
    // });

    hoverText();
    lenis.resize();
    navScript();
    introTextLoad();
    // onLoad();
    lineInOut();
    footerFollow();
    gsap.to(".cashier_comp", {
      opacity: 1,
    });

    $("[append-cashier]").appendTo(".nav_device_list");

    // ----------- GLOBAL SCROLL ANIMATIONS ------------- //

    // PARALLAX
    onDesktop(() => {
      $("[scroll='y-parallax']").each(function () {
        let parallaxImgWrap = $(this);
        let parallaxImg = parallaxImgWrap.find("img");
        const imgScrollTimeline = gsap.timeline({
          scrollTrigger: {
            trigger: $(this),
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        });

        imgScrollTimeline.fromTo(
          parallaxImg,
          { yPercent: 0 },
          { yPercent: 20, ease: "linear" }
        );
      });
    });
    // TEXT ANIMATE 1 OPTIONS OF FAST AND SLOW ATTRIBUTES IN DESIGNER

    onDesktop(() => {
      $("[highlight-text]").each(function () {
        let highlightElement = $(this);
        let shineColor = highlightElement
          .find(".char")
          .not("[highlight] .char");
        let shineY = highlightElement.find(".word");
        const speed = highlightElement.attr("highlight-text") || "fast";

        const timing = {
          fast: {
            stagger: 0.001,
            duration: 0.03,
          },
          slow: {
            stagger: 0.05,
            duration: 0.1,
          },
        };

        let textShine = gsap.timeline({
          scrollTrigger: {
            trigger: shineColor,
            start: "top 85%",
            end: "bottom -20%",
            toggleActions: "play none none reverse",
          },
        });

        textShine.fromTo(
          shineY,
          {
            // rotateX: 90,
            // rotateY: 30,
            yPercent: 100,
          },
          {
            // rotateX: 0,
            // rotateY: 0,
            yPercent: 0,
            stagger: { each: 0.01 },
            duration: 0.8,
            ease: stdEase,
          }
        );

        textShine.fromTo(
          shineColor,
          {
            color: "#00DDB3",
          },
          {
            color: "",
            stagger: { each: timing[speed].stagger },
            duration: timing[speed].duration,
            delay: timing[speed].delay,
            ease: CustomEase.create(
              "custom",
              "M0,0 C0.126,0.382 0.117,0.706 0.275,0.854 0.467,1.034 0.818,1.001 1,1 "
            ),
          },
          "<"
        );
      });
    });
    // -----------Text BOX 2 rotatex
    let textBoxRotate = gsap.timeline({
      scrollTrigger: {
        trigger: "[scroll='up']",
        start: "top 100%",
        end: "bottom 90%",
        scrub: true,
      },
    });
    textBoxRotate.fromTo(
      "[scroll='up']",
      {
        y: "10rem",
      },
      {
        y: "0rem",
      }
    );

    // -----------Box Stagger
    let boxStagger = gsap.timeline({
      scrollTrigger: {
        trigger: "[scroll='stagger']",
        start: "top bottom",
        end: "bottom 95%",
        scrub: 0.2,
      },
    });
    boxStagger.fromTo(
      "[scroll='stagger'] > *",
      {
        y: "5rem",
        opacity: 0,
      },
      {
        y: "0rem",
        opacity: 1,
        stagger: { each: 0.2 },
      }
    );

    // -----------Box Stagger
    $("[scroll='fade']").each(function () {
      let scrollFade = gsap.timeline({
        scrollTrigger: {
          trigger: this,
          start: "top bottom",
          end: "bottom 85%",
          scrub: 0.2,
        },
      });

      scrollFade.fromTo(this, { opacity: 0 }, { opacity: 1 });
    });

    $("[scroll='fadeplay']").each(function () {
      let scrollFadePlay = gsap.timeline({
        scrollTrigger: {
          trigger: this,
          start: "top 85%",
          end: "top 85%",
          toggleActions: "play none none none",
        },
      });

      scrollFadePlay.fromTo(
        this,
        { opacity: 0, y: "10rem" },
        { opacity: 1, y: "0rem", duration: 1.5 }
      );
    });

    // +++++++++++++++ GLOBAL SCRUB ANIMATIONS +++++++++++++++ //

    function updateTheme(theme) {
      $(".nav_comp, .nav_dropdown, .menu_item, .core_layer").attr(
        "data-theme",
        theme
      );

      if (theme === "dark") {
        $(".nav_device_item").attr("nav-btn-dark", "");
      } else {
        $(".nav_device_item").removeAttr("nav-btn-dark");
      }
    }

    function updateThemeForSection(sectionTheme) {
      if (sectionTheme === "transparent-light") {
        updateTheme("transparentblacktext");
      } else if (sectionTheme === "transparent-dark") {
        updateTheme("transparentwhitetext");
      } else {
        updateTheme(sectionTheme);
      }
    }

    let currentSectionTheme = "";
    $("[section]").each(function () {
      const $section = $(this);
      const sectionTheme = $section.attr("section");

      ScrollTrigger.create({
        trigger: $section,
        start: "top 10%",
        end: "bottom 10%",
        onEnter: () => {
          currentSectionTheme = sectionTheme;
          updateThemeForSection(currentSectionTheme);
        },
        onEnterBack: () => {
          currentSectionTheme = sectionTheme;
          updateThemeForSection(currentSectionTheme);
        },
      });
    });

    $(".nav_comp").hover(
      function () {
        if (currentSectionTheme === "transparent-light") {
          updateTheme("light");
        } else if (currentSectionTheme === "transparent-dark") {
          updateTheme("dark");
        } else {
          updateTheme(currentSectionTheme);
        }
      },
      function () {
        updateThemeForSection(currentSectionTheme);
      }
    );

    $(".nav_comp").each(function () {
      const theme = $(this).attr("data-theme");
      $(this).attr("data-theme", theme);
      let navComponent = $(this);
      let selector = navComponent.find(".dropdown_selector_holder");
      let coreHolder = navComponent.find(".core_copy_holder");

      $(selector).on("mouseenter", function () {
        $(coreHolder).removeClass("is-active");
      });
      $(selector).on("mouseleave", function () {
        $(coreHolder).addClass("is-active");
      });

      const dropdownWrapper = document.querySelector(".nav_dropdown_wrapper");

      dropdownWrapper.addEventListener("click", function (e) {
        if (e.target.tagName === "A") {
          dropdownWrapper.classList.add("no-hover");

          setTimeout(() => {
            dropdownWrapper.classList.remove("no-hover");
          }, 3000);
        }
      });
    });

    const fadeOutTl = gsap.timeline({ paused: true }).to(".chat_holder", {
      opacity: 0,
      duration: 0.5,
      delay: 0.8,
      ease: "power1.out",
    });

    let scrollTimeout;

    lenis.on("scroll", () => {
      clearTimeout(scrollTimeout);

      fadeOutTl.play();

      scrollTimeout = setTimeout(() => {
        fadeOutTl.reverse();
      }, 200);
    });

    $("[tr-marquee-element='component']").each(function (index) {
      let componentEl = $(this),
        panelEl = componentEl.find("[tr-marquee-element='panel']"),
        speedSetting = attr(100, componentEl.attr("tr-marquee-speed")),
        verticalSetting = attr(false, componentEl.attr("tr-marquee-vertical")),
        reverseSetting = attr(false, componentEl.attr("tr-marquee-reverse")),
        moveDistanceSetting = -100;
      if (reverseSetting) moveDistanceSetting = 100;
      let marqueeTimeline = gsap.timeline({
        repeat: -1,
        onReverseComplete: () => marqueeTimeline.progress(1),
      });
      if (verticalSetting) {
        speedSetting = panelEl.first().height() / speedSetting;
        marqueeTimeline.fromTo(
          panelEl,
          { yPercent: 0 },
          {
            yPercent: moveDistanceSetting,
            ease: "none",
            duration: speedSetting,
          }
        );
      } else {
        speedSetting = panelEl.first().width() / speedSetting;
        marqueeTimeline.fromTo(
          panelEl,
          { xPercent: 0 },
          {
            xPercent: moveDistanceSetting,
            ease: "none",
            duration: speedSetting,
          }
        );
      }
    });

    $(".footer_link").hover(
      function () {
        $(".footer_link .u-text-style-main.opacity_70")
          .not($(this).find(".u-text-style-main.opacity_70"))
          .css("opacity", "0.2");
        $(this).find(".u-text-style-main.opacity_70").css("opacity", "1");
      },
      function () {
        $(".footer_link .u-text-style-main.opacity_70").css("opacity", "0.7");
      }
    );

    let isMenuOpen = false;

    function menuOpen() {
      $(".nav_comp").each(function () {
        let menuEl = $(this).find(".menu_wrap");
        let menuBotEl = $(this).find(".menu_bot");
        let menuMidEl = $(this).find(".menu_mid");
        let menuLinkChars = $(this).find(".menu_link .char");
        let menuToggle = $(this).find(".menu_toggle");
        let menuFade = $(this).find("[menu-fade]");
        let menuText = $(this).find("[menu-text] .char");

        let menuTl = gsap.timeline({
          paused: true,
          onReverseComplete: () => {
            lenis.start();
          },
        });

        // menuTl.set(menuLinkChars, {
        //   yPercent: 100,
        // });
        // menuTl.set(menuBotEl, { opacity: 0 });
        // menuTl.set(menuMidEl, { opacity: 0 });

        menuTl.fromTo(
          menuEl,
          { display: "none", opacity: 0 },
          {
            display: "flex",
            opacity: 1,
            duration: 0.2,
            ease: "power3.out",
            onStart: () => menuEl.scrollTop(0),
            onComplete: () => lenis.stop(),
            onReverseComplete: () => menuEl.css("display", "none"),
          }
        );

        menuTl.fromTo(
          menuText,
          { yPercent: 100 },
          {
            yPercent: 0,
            duration: 1.2,
            ease: "expo.out",
          },
          "<+0.2"
        );

        menuTl.fromTo(
          menuFade,
          { opacity: 0 },
          { opacity: 1, duration: 0.8, ease: "power3.out" },
          "<"
        );

        menuToggle.on("click", function () {
          if (!isMenuOpen) {
            menuTl.timeScale(1).play();
            menuToggle.text("Close");
          } else {
            menuTl
              .timeScale(2)
              .reverse()
              .eventCallback("onComplete", function () {
                menuTl.timeScale(1);
              });
            menuToggle.text("Menu");
          }
          isMenuOpen = !isMenuOpen;
        });

        $("a").on("click", function () {
          menuTl.reverse();
          $(".menu_toggle").text("Menu");
          isMenuOpen = false;
        });

        $(".core_layout").on("click", function () {
          $(".core_layer").addClass("show");
          $(".nav_logo_holder").addClass("hide");
          $(".menu_back").addClass("show");
        });

        $(".menu_back").on("click", function () {
          $(".core_layer").removeClass("show");
          $(this).removeClass("show");
          $(".nav_logo_holder").removeClass("hide");
        });

        $(".core_layout").on("click", function () {
          $(".menu_back").addClass("show");
          $(".nav_logo_holder").addClass("hide");
        });
        $(".menu_toggle").on("click", function () {
          $(".core_layer").removeClass("show");
          $(".menu_back").removeClass("show");
          $(".nav_logo_holder").removeClass("hide");
        });
        $(".core_layer_link").on("click", function () {
          $(".menu_back").removeClass("show");
          $(".nav_logo_holder").removeClass("hide");
          menuTl.reverse();
        });
        $(".menu_deep_link").on("click", function () {
          $(".menu_back").removeClass("show");
          $(".nav_logo_holder").removeClass("hide");
          $(".core_layer").removeClass("show");
          menuTl.reverse();
        });
        $(".dropdown_stretch").on("click", function () {
          $(this).find(".core_toggle_vert").addClass("open");
        });
        $(".faq_card_wrap").on("click", function () {
          $(this).find(".faq_card_content").toggleClass("open");
        });
        $(".menu_deep_link").on("click", function () {
          $(".faq_card_content").removeClass("open");
        });
      });
    }

    menuOpen();
  }

  globalScript();

  function footerFollow() {
    onDesktop(() => {
      const $revealImgList = $(".reveal_wrap");
      if ($revealImgList.length === 0) return; // Exit if footer not present

      const $revealImgs = $(".reveal_img");
      const baseRotationY = 0;

      let lastMouseX = null;
      let lastMouseY = null;

      const updateImagePositions = () => {
        if (lastMouseX === null || lastMouseY === null) return;

        const rect = $revealImgList[0].getBoundingClientRect();

        const isInside =
          lastMouseX >= rect.left &&
          lastMouseX <= rect.right &&
          lastMouseY >= rect.top &&
          lastMouseY <= rect.bottom;

        if (!isInside) {
          $revealImgs.each(function () {
            gsap.to($(this), {
              rotationX: 0,
              rotationY: baseRotationY,
              x: 0,
              y: 0,
              ease: "power1.out",
              duration: 2,
            });
          });
          return;
        }

        const mouseX = lastMouseX - rect.left;
        const mouseY = lastMouseY - rect.top;

        $revealImgs.each(function () {
          const $img = $(this);
          const imgRect = $img[0].getBoundingClientRect();
          const imgCenterX = imgRect.left + imgRect.width / 2 - rect.left;
          const imgCenterY = imgRect.top + imgRect.height / 2 - rect.top;

          const deltaX = mouseX - imgCenterX;
          const deltaY = mouseY - imgCenterY;
          const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);

          const maxDistance = Math.sqrt(rect.width ** 2 + rect.height ** 2) / 2;
          const intensity = 1 - Math.min(distance / maxDistance, 1);

          const rotateX = (deltaY / rect.height) * -85 * intensity;
          const rotateY =
            ((deltaX / rect.width) * 85 + baseRotationY) * intensity;
          const moveX = (deltaX / rect.width) * -400 * intensity;
          const moveY = (deltaY / rect.height) * 400 * intensity;

          gsap.to($img, {
            rotationX: rotateX,
            rotationY: rotateY,
            x: moveX,
            y: moveY,
            ease: stdEase,
            duration: 2,
          });
        });
      };

      $(document).on("mousemove", function (e) {
        lastMouseX = e.clientX;
        lastMouseY = e.clientY;
        updateImagePositions();
      });

      $(window).on("scroll", function () {
        updateImagePositions();
      });
    });
  }

  function stdSwiper() {
    $(".review_swiper_section").each(function (index) {
      let swiperEl = $(this).find(".swiper.is-home");
      let swiperNext = $(this).find(".home_next");
      let swiperPrev = $(this).find(".home_prev");
      let homeSwiper = new Swiper(swiperEl[0], {
        freeMode: false,
        controller: true,
        centeredSlides: false,
        loop: false,
        slideActiveClass: "is-active",
        breakpoints: {
          320: {
            slidesPerView: 1.3,
            spaceBetween: 16,
            slidesOffsetBefore: 16,
            slidesOffsetAfter: 16,
          },
          480: {
            slidesPerView: 1.3,
            spaceBetween: 16,
            slidesOffsetBefore: 16,
            slidesOffsetAfter: 16,
          },
          640: {
            slidesPerView: 3.1,
            spaceBetween: 20,
            slidesOffsetBefore: 20,
            slidesOffsetAfter: 20,
          },
        },
        navigation: {
          nextEl: swiperNext[0],
          prevEl: swiperPrev[0],
        },
      });
    });
  }

  function stickySection() {
    $(".sticky_img_section").each(function () {
      let stickySectionWrap = $(this);
      let stickyEndTrigger = stickySectionWrap.find(".sticky_section_bot");
      let stickyItem = stickySectionWrap.find(".sticky_section_item");
      let stickyContent = $(this).find(".sticky_progress_content");
      let stickyImg = $(this).find(".sticky_img_holder");

      stickySectionWrap.find(".sticky_section_left").each(function () {
        let stickyImgPin = $(this);

        ScrollTrigger.create({
          trigger: stickyEndTrigger,
          start: "top 30%",
          end: "bottom 55%",
          pin: stickyImgPin[0],
          pinSpacing: false,
          scrub: true,
        });
      });

      stickyItem.each(function (index) {
        let stickyContent = $(this).find(".sticky_progress_content");
        let initialOpacity = index === 0 ? 1 : 0.3;

        let stickyContentFadeIn = gsap.timeline({
          scrollTrigger: {
            trigger: stickyContent,
            start: "top 40%",
            end: "top 30%",
            scrub: true,
          },
        });

        stickyContentFadeIn.fromTo(
          stickyContent,
          { opacity: initialOpacity },
          { opacity: 1 }
        );

        let stickyContentFadeOut = gsap.timeline({
          scrollTrigger: {
            trigger: stickyContent,
            start: "top 15%",
            end: "top 10%",
            scrub: true,
          },
        });

        stickyContentFadeOut.to(
          stickyContent,

          {
            opacity: 0.3,
          }
        );
      });

      stickyItem.each(function () {
        let stickyLines = $(this).find(".sticky_line_progress");
        let stickyImg = $(this).find(".sticky_img_holder");
        let stickyLineProgress = gsap.timeline({
          scrollTrigger: {
            trigger: $(this),
            start: "top 40%",
            end: "top 10%",
            scrub: true,
          },
          overwrite: "auto",
        });

        stickyLineProgress.fromTo(
          stickyLines,
          {
            width: "0%",
          },
          {
            width: "100%",
          }
        );

        let stickyLineFadeOut = gsap.timeline({
          scrollTrigger: {
            trigger: $(this),
            start: "top 20%",
            end: "top 10%",
            scrub: true,
          },
        });

        stickyLineFadeOut.to(stickyLines, {
          opacity: 0.3,
        });

        let stickySectionWrap = $(".sticky_section_wrap");
        let stickyItems = stickySectionWrap.find(".sticky_section_item");

        stickyItems.each(function (index) {
          let stickyImg = $(this).find(".sticky_img_holder");
          let initialOpacity = index === 0 ? 1 : 0;

          let stickyImageClip = gsap.timeline({
            scrollTrigger: {
              trigger: $(this),
              start: "top 40%",
              end: "top 30%",
              scrub: true,
            },
          });

          stickyImageClip.fromTo(
            stickyImg,
            { opacity: initialOpacity },
            { opacity: 1 }
          );
        });
      });
      ScrollTrigger.create({
        trigger: $(this)[0],
        start: "top bottom",
        onUpdate: (self) => {
          const velocity = self.getVelocity();
          gsap.to(stickyImg, {
            rotateX: velocity * -0.02,
            rotateY: velocity * -0.015,
            duration: 1,
            ease: "linear",
          });
        },
      });
    });
  }

  function cashierHeroSpin() {
    console.log("heroSpin");
    onDesktop(() => {
      $(".cashier_hero_wrap").each(function () {
        let swiperEl = $(this);
        let swipeItemsTrigger = swiperEl.find(".cashier_trigger_item");
        let swipeItems = swiperEl.find(".cashier_item");
        let swipeTriggers = swiperEl.find(".cashier_trigger");
        let opacityTrigger = swiperEl.find(".cashier_trigger_wrap");
        let swipeContent = swiperEl.find(".swiper_content");
        let cashierHero = swiperEl.find(".cashier_hero");
        let fade2 = swiperEl.find("[cashier-hero=fade2]");
        let fade = swiperEl.find("[cashier-hero=fade]");
        let headingSplit = swiperEl.find(".cashier_heading .char");
        let numberSplit = swiperEl.find(".cashier_number .char");
        let cashierContent = swiperEl.find(".cashier_content_wrap");
        let numberHolder = swiperEl.find(".cashier_number_holder");
        let cashierHeading = swiperEl.find(".cashier_hero_heading_holder");
        let cmsPin = swiperEl.find(".cashier_comp");
        let heroPin = swiperEl.find(".cashier_hero");

        let spinHolder = swiperEl.find(".cashier_hero_vid");
        let spinIntroHolder = swiperEl.find(".spin_intro")[0];
        let spinScrubHolder = swiperEl.find(".spin_scrub");
        let spinVideo = swiperEl.find(".spin_scrub video")[0];
        let spinIntroVideo = swiperEl.find(".spin_intro video")[0];

        function cashierOpen() {
          let introCashierEl = gsap.timeline({});

          introCashierEl.fromTo(
            spinHolder,
            {
              scale: 1,
            },
            {
              scale: 1,
              duration: 1,
              ease: "expo.out",
              onStart: function () {
                spinIntroVideo.play();
              },
              onComplete: function () {
                if (spinIntroHolder) {
                  setTimeout(() => {
                    spinIntroHolder.style.display = "none";
                    lenis.start();
                  }, 1000);
                }
                gsap.set(".spin_scrub", { opacity: 1, delay: 0.8 });
              },
            }
          );
        }
        setTimeout(() => {
          cashierOpen();
        }, 2500);

        // let introOpacity = gsap.timeline({
        //   scrollTrigger: {
        //     trigger: opacityTrigger,
        //     start: "top bottom",
        //     end: "top bottom",
        //     scrub: true,
        //   },
        // });

        // introOpacity.fromTo(
        //   spinIntroHolder,
        //   {
        //     opacity: 1,
        //   },
        //   {
        //     opacity: 0,
        //     duration: 0.001,
        //   }
        // );

        // let scrubOpacity = gsap.timeline({
        //   scrollTrigger: {
        //     trigger: opacityTrigger,
        //     start: "top bottom",
        //     end: "top bottom",
        //     scrub: true,
        //   },
        // });

        // scrubOpacity.fromTo(
        //   spinScrubHolder,
        //   {
        //     opacity: 0,
        //   },
        //   {
        //     opacity: 1,
        //     duration: 0.001,
        //   }
        // );

        let numberOpacity = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top 110%",
            end: "top 100%",
            scrub: 0.3,
          },
        });

        numberOpacity.fromTo(
          numberHolder,
          {
            opacity: 0,
          },
          {
            opacity: 1,
            duration: 0.2,
          }
        );

        let contentOpacity = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top 150%",
            end: "top 110%",
            scrub: 0.3,
          },
        });

        contentOpacity.fromTo(
          cashierContent,
          {
            opacity: 1,
          },
          {
            opacity: 0,
          }
        );

        // let cashierHeadingOpacity = gsap.timeline({
        //   scrollTrigger: {
        //     trigger: opacityTrigger,
        //     start: "top 150%",
        //     end: "top 110%",
        //     scrub: true,
        //   },
        // });

        // cashierHeadingOpacity.to(
        //   cashierHeading,

        //   {
        //     opacity: 0,
        //   }
        // );

        ScrollTrigger.create({
          trigger: swiperEl[0],
          start: "top top",
          endTrigger: swipeTriggers.last()[0],
          end: "top top",
          pin: spinHolder[0],
          pinSpacing: false,
          scrub: 0.3,
        });
        ScrollTrigger.create({
          trigger: heroPin[0],
          start: "bottom top",
          endTrigger: swipeTriggers.last()[0],
          end: "bottom bottom",
          pin: cmsPin[0],
          pinSpacing: false,
          scrub: 0.3,
        });

        swipeItems.each(function (index) {
          let swipeItem = $(this);
          let item = swipeTriggers.eq(index);
          let cashierFade2 = fade2.eq(index);
          let cashierHeading = swipeItem.find(".cashier_heading .char");
          let cashierNumber = swipeItem.find(".cashier_number .char");
          let cashierNumberFirst = swipeItem.find(
            ".cashier_number_first .char"
          );
          gsap.set(item, {
            zIndex: index + 1,
          });

          // let spinAlignDesk = gsap.matchMedia();
          // spinAlignDesk.add("(min-width: 992px)", () => {
          //   if (index === 1) {
          //     let spinAlign = gsap.timeline({
          //       scrollTrigger: {
          //         trigger: opacityTrigger,
          //         start: "top bottom",
          //         end: "top center",
          //         scrub: true,
          //       },
          //     });

          //     spinAlign.fromTo(
          //       spinHolder,
          //       {
          //         y: "5vh",
          //       },
          //       {
          //         y: "-10vh",
          //       }
          //     );
          //   }
          // });
          // let spinAlignMob = gsap.matchMedia();
          // spinAlignMob.add("(max-width: 991px)", () => {
          //   if (index === 1) {
          //     let spinAlign = gsap.timeline({
          //       scrollTrigger: {
          //         trigger: opacityTrigger,
          //         start: "top bottom",
          //         end: "top center",
          //         scrub: true,
          //       },
          //     });

          //     spinAlign.fromTo(
          //       spinHolder,
          //       {
          //         y: "-10vh",
          //       },
          //       {
          //         y: "-20vh",
          //       }
          //     );
          //   }
          // });

          const video = document.querySelector('[data-video="video"]');
          video.preload = "auto";
          video.load();
          video.pause();

          const proxy = { currentTime: 0 };
          let videoScrub = gsap.timeline({
            scrollTrigger: {
              trigger: "[data-video='track']",
              start: "top 215%",
              end: "bottom 100%",
              scrub: 0.3,
              onUpdate: (self) => {
                const targetTime = self.progress * video.duration;

                gsap.to(proxy, {
                  currentTime: targetTime,
                  duration: 0.05,
                  ease: "power4.out",
                  onUpdate: () => {
                    if (video.readyState >= 2) {
                      if (video.fastSeek) {
                        video.fastSeek(proxy.currentTime);
                      } else {
                        video.currentTime = proxy.currentTime;
                      }
                    }
                  },
                });
              },
            },
          });
          video.addEventListener("loadeddata", () => {});

          let numberFirstSplitDown = gsap.timeline({
            scrollTrigger: {
              trigger: opacityTrigger,
              start: "top 110%",
              end: "top 100%",
              scrub: 0.3,
            },
          });

          numberFirstSplitDown.fromTo(
            cashierNumberFirst,
            {
              yPercent: 0,
            },
            {
              yPercent: -100,
              stagger: { each: 0.04 },
              ease: "power1.inOut",
              duration: 0.4,
            }
          );

          ScrollTrigger.create({
            trigger: item,
            start: "bottom 150%",
            end: "bottom top",
            onEnter: () => swipeItem.addClass("index_up"),
            onLeave: () => swipeItem.removeClass("index_up"),
            onEnterBack: () => swipeItem.addClass("index_up"),
            onLeaveBack: () => swipeItem.removeClass("index_up"),
          });

          let tl2 = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 95%",
              end: "top 95%",
              scrub: 0.3,
            },
          });

          tl2.fromTo(
            cashierFade2,
            {
              opacity: 0,
            },
            {
              opacity: 1,
              duration: 0.2,
            }
          );

          let tlSplitDown = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 70%",
              end: "top 50%",
              scrub: 0.3,
            },
          });

          tlSplitDown.fromTo(
            cashierHeading,
            {
              yPercent: 100,
            },
            {
              yPercent: 0,
              stagger: { each: 0.01 },
              ease: "power1.inOut",
              duration: 0.4,
            }
          );

          let numberSplitDown = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 110%",
              end: "top 90%",
              scrub: 0.3,
            },
          });

          numberSplitDown.fromTo(
            cashierNumber,
            {
              yPercent: 100,
            },
            {
              yPercent: 0,
              stagger: { each: 0.04 },
              ease: "power1.inOut",
              duration: 0.4,
            }
          );

          if (index !== swipeItems.length - 1) {
            let tl3 = gsap.timeline({
              scrollTrigger: {
                trigger: item[0],
                start: "top 5%",
                end: "top 5%",
                toggleActions: "play none reverse none",
              },
            });

            tl3.to(cashierFade2, {
              opacity: 0,
              duration: 0.2,
            });
            let tlSplitUp = gsap.timeline({
              scrollTrigger: {
                trigger: item[0],
                start: "top 15%",
                end: "top -50%",
                scrub: 0.3,
              },
            });

            tlSplitUp.to(cashierHeading, {
              yPercent: -100,
              stagger: { each: 0.01 },
              ease: "power1.inOut",
              duration: 0.4,
            });
            let numberSplitUp = gsap.timeline({
              scrollTrigger: {
                trigger: item[0],
                start: "top 3%",
                end: "top -5%",
                scrub: 0.3,
              },
            });

            numberSplitUp.to(cashierNumber, {
              yPercent: -100,
              stagger: { each: 0.04 },
              ease: "power1.inOut",
              duration: 0.4,
            });
          }
        });
      });
    });
    onMobile(() => {
      setTimeout(() => {
        lenis.start();
      }, 500);
    });
  }

  function ecomScript() {
    lenis.stop();
    // heroGradientFollow();
    // ecomHeroSpin();
    cashierHeroSpin();
    heroInset();
    stdSwiper();
    stickySection();
    perspectiveModal();
  }

  function ecomHeroSpin() {
    $(".cashier_hero_wrap").each(function () {
      let swiperEl = $(this);
      let swipeItemsTrigger = swiperEl.find(".cashier_trigger_item");
      let swipeItems = swiperEl.find(".cashier_item");
      let swipeTriggers = swiperEl.find(".cashier_trigger");
      let opacityTrigger = swiperEl.find(".cashier_trigger_wrap");
      let swipeContent = swiperEl.find(".swiper_content");
      let cashierHero = swiperEl.find(".cashier_hero");
      let fade2 = swiperEl.find("[cashier-hero=fade2]");
      let fade = swiperEl.find("[cashier-hero=fade]");
      let headingSplit = swiperEl.find(".cashier_heading .char");
      let numberSplit = swiperEl.find(".cashier_number .char");
      let cashierContent = swiperEl.find(".cashier_content_wrap");
      let numberHolder = swiperEl.find(".cashier_number_holder");
      let cashierHeading = swiperEl.find(".cashier_hero_heading_holder");
      let spinHolder = swiperEl.find(".hero_spin_holder");
      let spinVideo = swiperEl.find(".spin_vid_holder.scrub video")[0];
      let spinIntroVideo = swiperEl.find(".spin_vid_holder.intro video")[0];
      function ecomOpen() {
        let introEl = gsap.timeline({});
        onDesktop(() => {
          introEl.fromTo(
            spinHolder,
            {
              yPercent: 80,
            },
            {
              yPercent: -95,
              duration: 2.5,
              ease: "expo.out",
              onStart: function () {
                spinIntroVideo.play();
              },
            }
          );
        });
        onMobile(() => {
          introEl.fromTo(
            spinHolder,
            {
              yPercent: 80,
            },
            {
              yPercent: -80,
              duration: 2.5,
              ease: "expo.out",
              onStart: function () {
                spinIntroVideo.play();
              },
            }
          );
        });
      }
      setTimeout(() => {
        ecomOpen();
      }, 500);

      onDesktop(() => {
        let introShrink = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top bottom",
            end: "top 30%",
            scrub: true,
          },
        });

        introShrink.to(spinHolder, {
          scale: 0.9,
          yPercent: -100,
        });
      });
      onMobile(() => {
        let introShrink = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top bottom",
            end: "top 30%",
            scrub: true,
          },
        });

        introShrink.to(spinHolder, {
          scale: 0.9,
          yPercent: -90,
        });
      });

      let introOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top center",
          end: "top bottom",
          scrub: true,
        },
      });

      introOpacity.fromTo(
        spinIntroVideo,
        {
          opacity: 1,
        },
        {
          opacity: 0,
          duration: 0.001,
        }
      );

      let scrubOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top bottom",
          end: "top bottom",

          scrub: true,
        },
      });

      scrubOpacity.fromTo(
        spinVideo,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.001,
        }
      );

      let numberOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top 150%",
          end: "top 100%",
          scrub: true,
        },
      });

      numberOpacity.fromTo(
        numberHolder,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.2,
        }
      );

      let contentOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top 150%",
          end: "top 110%",
          scrub: true,
        },
      });

      contentOpacity.fromTo(
        cashierContent,
        {
          opacity: 1,
        },
        {
          opacity: 0,
        }
      );

      let cashierHeadingOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top 150%",
          end: "top 110%",
          scrub: true,
        },
      });

      cashierHeadingOpacity.fromTo(
        cashierHeading,
        {
          opacity: 1,
        },
        {
          opacity: 0,
        }
      );

      ScrollTrigger.create({
        trigger: swiperEl[0],
        start: "top top",
        endTrigger: swipeTriggers.last()[0],
        end: "top top",
        pin: cashierHero[0],
        pinSpacing: false,
        scrub: true,
      });

      swipeItems.each(function (index) {
        let swipeItem = $(this);
        let item = swipeTriggers.eq(index);
        let cashierFade2 = fade2.eq(index);
        let cashierHeading = swipeItem.find(".cashier_heading .char");
        let cashierNumber = swipeItem.find(".cashier_number .char");
        let cashierNumberFirst = swipeItem.find(".cashier_number_first .char");
        gsap.set(item, {
          zIndex: index + 1,
        });

        const video = document.querySelector('[data-video="video"]');
        video.preload = "auto";
        video.load();
        video.pause();

        const proxy = { currentTime: 0 };

        let videoScrub = gsap.timeline({
          scrollTrigger: {
            trigger: "[data-video='track']",
            start: "top 30%",
            end: "bottom 100%",

            scrub: 0.5,
            onUpdate: (self) => {
              const targetTime = self.progress * video.duration;

              gsap.to(proxy, {
                currentTime: targetTime,
                duration: 0.05,
                ease: "power4.out",
                onUpdate: () => {
                  if (video.readyState >= 2) {
                    if (video.fastSeek) {
                      video.fastSeek(proxy.currentTime);
                    } else {
                      video.currentTime = proxy.currentTime;
                    }
                  }
                },
              });
            },
          },
        });
        video.addEventListener("loadeddata", () => {});

        let numberFirstSplitDown = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top 95%",
            end: "top 80%",
            scrub: true,
          },
        });

        numberFirstSplitDown.fromTo(
          cashierNumberFirst,
          {
            yPercent: 0,
          },
          {
            yPercent: -100,
            stagger: { each: 0.04 },
            ease: "power1.inOut",
            duration: 0.4,
          }
        );

        ScrollTrigger.create({
          trigger: item,
          start: "bottom bottom",
          end: "bottom top",
          onEnter: () => swipeItem.addClass("index_up"),
          onLeave: () => swipeItem.removeClass("index_up"),
          onEnterBack: () => swipeItem.addClass("index_up"),
          onLeaveBack: () => swipeItem.removeClass("index_up"),
        });

        let tl2 = gsap.timeline({
          scrollTrigger: {
            trigger: item[0],
            start: "top 95%",
            end: "top 80%",
            scrub: true,
          },
        });

        tl2.fromTo(
          cashierFade2,
          {
            opacity: 0,
          },
          {
            opacity: 1,
            duration: 0.2,
          }
        );

        let tlSplitDown = gsap.timeline({
          scrollTrigger: {
            trigger: item[0],
            start: "top 95%",
            end: "top 80%",
            scrub: true,
          },
        });

        tlSplitDown.fromTo(
          cashierHeading,
          {
            yPercent: 100,
          },
          {
            yPercent: 0,
            stagger: { each: 0.01 },
            ease: "power1.inOut",
            duration: 0.4,
          }
        );

        let numberSplitDown = gsap.timeline({
          scrollTrigger: {
            trigger: item[0],
            start: "top 95%",
            end: "top 80%",
            scrub: true,
          },
        });

        numberSplitDown.fromTo(
          cashierNumber,
          {
            yPercent: 100,
          },
          {
            yPercent: 0,
            stagger: { each: 0.04 },
            ease: "power1.inOut",
            duration: 0.4,
          }
        );

        if (index !== swipeItems.length - 1) {
          let tl3 = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 10%",
              end: "top 0%",
              scrub: true,
            },
          });

          tl3.to(cashierFade2, {
            opacity: 0,
            duration: 0.2,
          });
          let tlSplitUp = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 10%",
              end: "top 0%",
              scrub: true,
            },
          });

          tlSplitUp.to(cashierHeading, {
            yPercent: -100,
            stagger: { each: 0.01 },
            ease: "power1.inOut",
            duration: 0.4,
          });
          let numberSplitUp = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 10%",
              end: "top 0%",
              scrub: true,
            },
          });

          numberSplitUp.to(cashierNumber, {
            yPercent: -100,
            stagger: { each: 0.04 },
            ease: "power1.inOut",
            duration: 0.4,
          });
        }
      });
    });
  }

  function paycloudHeroSpin() {
    $(".cashier_hero_wrap").each(function () {
      let swiperEl = $(this);
      let swipeItemsTrigger = swiperEl.find(".cashier_trigger_item");
      let swipeItems = swiperEl.find(".cashier_item");
      let swipeTriggers = swiperEl.find(".cashier_trigger");
      let opacityTrigger = swiperEl.find(".cashier_trigger_wrap");
      let swipeContent = swiperEl.find(".swiper_content");
      let cashierHero = swiperEl.find(".cashier_hero");
      let fade2 = swiperEl.find("[cashier-hero=fade2]");
      let fade = swiperEl.find("[cashier-hero=fade]");
      let headingSplit = swiperEl.find(".cashier_heading .char");
      let numberSplit = swiperEl.find(".cashier_number .char");
      let cashierContent = swiperEl.find(".cashier_content_wrap");
      let numberHolder = swiperEl.find(".cashier_number_holder");
      let cashierHeading = swiperEl.find(".cashier_hero_heading_holder");
      let spinHolder = swiperEl.find(".hero_spin_holder");
      let spinVideo = swiperEl.find(".spin_vid_holder.scrub video")[0];
      let spinIntroVideo = swiperEl.find(".spin_vid_holder.intro video")[0];

      function ecomOpen() {
        let introEl = gsap.timeline({});
        onDesktop(() => {
          introEl.fromTo(
            spinHolder,
            {
              yPercent: 30,
            },
            {
              yPercent: 10,
              duration: 2.5,
              ease: "expo.out",
              onStart: function () {
                spinIntroVideo.play();
              },
              onComplete: function () {
                lenis.start();
              },
            }
          );
        });
        onMobile(() => {
          introEl.fromTo(
            spinHolder,
            {
              yPercent: 80,
            },
            {
              yPercent: -115,
              duration: 2.5,
              ease: "expo.out",
              onStart: function () {
                spinIntroVideo.play();
              },
            }
          );
        });
      }

      setTimeout(() => {
        ecomOpen();
      }, 2500);

      onDesktop(() => {
        let introShrink = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top bottom",
            end: "top 30%",
            scrub: 0.3,
          },
        });

        introShrink.to(spinHolder, {
          scale: 0.9,
          yPercent: -10,
        });
      });
      onMobile(() => {
        let introShrink = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top bottom",
            end: "top 30%",
            scrub: true,
          },
        });

        introShrink.to(spinHolder, {
          scale: 0.9,
          yPercent: -115,
        });
      });

      let introOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top center",
          end: "top bottom",
          scrub: true,
        },
      });

      introOpacity.fromTo(
        spinIntroVideo,
        {
          opacity: 1,
        },
        {
          opacity: 0,
          duration: 0.001,
        }
      );

      let scrubOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top bottom",
          end: "top bottom",

          scrub: true,
        },
      });

      scrubOpacity.fromTo(
        spinVideo,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.001,
        }
      );

      let numberOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top 150%",
          end: "top 100%",
          scrub: true,
        },
      });

      numberOpacity.fromTo(
        numberHolder,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 0.2,
        }
      );

      let contentOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top 150%",
          end: "top 110%",
          scrub: true,
        },
      });

      contentOpacity.fromTo(
        cashierContent,
        {
          opacity: 1,
        },
        {
          opacity: 0,
        }
      );

      let cashierHeadingOpacity = gsap.timeline({
        scrollTrigger: {
          trigger: opacityTrigger,
          start: "top 150%",
          end: "top 110%",
          scrub: true,
        },
      });

      cashierHeadingOpacity.to(cashierHeading, {
        opacity: 0,
      });

      ScrollTrigger.create({
        trigger: swiperEl[0],
        start: "top top",
        endTrigger: swipeTriggers.last()[0],
        end: "top top",
        pin: cashierHero[0],
        pinSpacing: false,
        scrub: true,
      });

      swipeItems.each(function (index) {
        let swipeItem = $(this);
        let item = swipeTriggers.eq(index);
        let cashierFade2 = fade2.eq(index);
        let cashierHeading = swipeItem.find(".cashier_heading .char");
        let cashierNumber = swipeItem.find(".cashier_number .char");
        let cashierNumberFirst = swipeItem.find(".cashier_number_first .char");
        gsap.set(item, {
          zIndex: index + 1,
        });

        const video = document.querySelector('[data-video="video"]');
        video.preload = "auto";
        video.load();
        video.pause();

        const proxy = { currentTime: 0 };
        let videoScrub = gsap.timeline({
          scrollTrigger: {
            trigger: "[data-video='track']",
            start: "top 30%",
            end: "bottom 100%",

            scrub: 0.5,
            onUpdate: (self) => {
              const targetTime = self.progress * video.duration;

              gsap.to(proxy, {
                currentTime: targetTime,
                duration: 0.05,
                ease: "power4.out",
                onUpdate: () => {
                  if (video.readyState >= 2) {
                    if (video.fastSeek) {
                      video.fastSeek(proxy.currentTime);
                    } else {
                      video.currentTime = proxy.currentTime;
                    }
                  }
                },
              });
            },
          },
        });

        video.addEventListener("loadeddata", () => {});

        let numberFirstSplitDown = gsap.timeline({
          scrollTrigger: {
            trigger: opacityTrigger,
            start: "top 95%",
            end: "top 70%",
            scrub: true,
          },
        });

        numberFirstSplitDown.fromTo(
          cashierNumberFirst,
          {
            yPercent: 0,
          },
          {
            yPercent: -100,
            stagger: { each: 0.04 },
            ease: "power1.inOut",
            duration: 0.4,
          }
        );

        ScrollTrigger.create({
          trigger: item,
          start: "bottom 150%",
          end: "bottom 50%",
          onEnter: () => swipeItem.addClass("index_up"),
          onLeave: () => swipeItem.removeClass("index_up"),
          onEnterBack: () => swipeItem.addClass("index_up"),
          onLeaveBack: () => swipeItem.removeClass("index_up"),
        });

        let tl2 = gsap.timeline({
          scrollTrigger: {
            trigger: item[0],
            start: "top top",
            end: "top -5%",
            scrub: true,
          },
        });

        tl2.fromTo(
          cashierFade2,
          {
            opacity: 0,
          },
          {
            opacity: 1,
            duration: 0.2,
          }
        );

        let tlSplitDown = gsap.timeline({
          scrollTrigger: {
            trigger: item[0],
            start: "top 80%",
            end: "top 60%",
            scrub: 0.3,
          },
        });

        tlSplitDown.fromTo(
          cashierHeading,
          {
            yPercent: 101,
          },
          {
            yPercent: 0,
            stagger: { each: 0.01 },
            ease: "power1.inOut",
            duration: 0.4,
          }
        );

        let numberSplitDown = gsap.timeline({
          scrollTrigger: {
            trigger: item[0],
            start: "top 80%",
            end: "top 60%",
            scrub: 0.3,
          },
        });

        numberSplitDown.fromTo(
          cashierNumber,
          {
            yPercent: 101,
          },
          {
            yPercent: 0,
            stagger: { each: 0.04 },
            ease: "power1.inOut",
            duration: 0.4,
          }
        );

        if (index !== swipeItems.length - 1) {
          let tl3 = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 20%",
              end: "top 0%",
              scrub: 0.3,
            },
          });

          tl3.to(cashierFade2, {
            opacity: 0,
            duration: 0.2,
          });
          let tlSplitUp = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 5%",
              end: "top 0%",
              scrub: 0.3,
            },
          });

          tlSplitUp.to(cashierHeading, {
            yPercent: -101,
            stagger: { each: 0.01 },
            ease: "power1.inOut",
            duration: 0.4,
          });
          let numberSplitUp = gsap.timeline({
            scrollTrigger: {
              trigger: item[0],
              start: "top 20%",
              end: "top 0%",
              scrub: 0.3,
            },
          });

          numberSplitUp.to(cashierNumber, {
            yPercent: -101,
            stagger: { each: 0.04 },
            ease: "power1.inOut",
            duration: 0.4,
          });
        }
      });
    });
  }

  // function platformPreLoad() {
  //   gsap.set(".cashier_comp", {
  //     opacity: 0,
  //   });
  // }

  function platformStdLoad() {
    onDesktop(() => {
      $(".cashier_hero_wrap").each(function () {
        let platformStdEl = $(this);
        let platformVidHolder = platformStdEl.find(".platform_std");
        let platformIntroVid = platformVidHolder.find("video").get(0);
        function platformLoad() {
          let platformVidPlay = gsap.timeline({});
          platformVidPlay.fromTo(
            platformVidHolder,
            {
              yPercent: 80,
            },
            {
              yPercent: 0,
              duration: 2.5,
              ease: "expo.out",
              onStart: function () {
                platformIntroVid.play();
              },
            }
          );
        }
        setTimeout(() => {
          let platformIntroVid = platformVidHolder.find("video").get(0);

          if (platformIntroVid) {
            platformIntroVid.play();
          }
        }, 1500);
      });
    });
  }

  function heroInset() {
    onDesktop(() => {
      $(".page_main").each(function () {
        let cashierMain = $(this);
        let cashierHero = $(this).find(".cashier_hero_wrap");
        let cashierHeroClip = gsap.timeline({
          scrollTrigger: {
            trigger: cashierHero,
            start: "bottom bottom",
            end: "bottom top",
            scrub: true,
          },
        });

        cashierHeroClip.fromTo(
          cashierHero,
          {
            clipPath: "inset(0 0 0 0)",
          },
          {
            clipPath: "inset(0 1.7rem 0 1.75rem)",
          }
        );
      });
    });
  }

  function clipSwiper() {
    $(".slider_wrap").each(function () {
      let childArrow = $(this).find(".slider_btn");
      let childItems = $(this).find(".slider_cms_item").hide();
      let childDots = $(this).find(".slider_dot_item");
      let totalSlides = childItems.length;
      let activeIndex = 0;

      childItems.first().css("display", "flex");
      gsap.set(childDots.eq(0).find(".slider_dot_line"), { x: "0%" });

      let tl2 = gsap.timeline({ repeat: -1 });
      childDots.each(function (index) {
        tl2.addLabel(`step${index}`);
        tl2.to($(this).find(".slider_dot_line"), {
          scaleX: "1.0",
          ease: "none",
          duration: 5,
          onComplete: () => {
            goNext(index + 1);
          },
        });
      });
      function moveSlide(nextIndex, forwards) {
        let tl3 = gsap.timeline();
        tl3.set(childDots.eq(nextIndex).find(".slider_dot_line"), { x: "0%" });
        tl3.fromTo(
          childDots.eq(activeIndex).find(".slider_dot_line"),
          { x: "0%" },
          { x: "100%" }
        );

        tl2.seek(`step${nextIndex}`);

        let titleFrom = -100;
        let titleDelay = "<";
        if (forwards) {
          titleFrom = 100;
          titleDelay = "<50%";
        }
        //
        childItems.hide();
        let prevItem = childItems.eq(activeIndex).css("display", "flex");
        let nextItem = childItems.eq(nextIndex).css("display", "flex");
        let tl = gsap.timeline({
          defaults: { duration: 1, ease: "power2.inOut" },
        });
        if (forwards) {
          tl.fromTo(
            nextItem,
            { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" },
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }
          );
          tl.fromTo(
            prevItem,
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
            { clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)" },
            "<"
          );
        } else {
          tl.fromTo(
            nextItem,
            { clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)" },
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }
          );
          tl.fromTo(
            prevItem,
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
            { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" },
            "<"
          );
        }
        tl.fromTo(
          nextItem.find(".slider_cms_title .char"),
          { yPercent: titleFrom },
          { yPercent: 0, duration: 1, stagger: { amount: 0.2 } },
          titleDelay
        );

        tl.fromTo(
          nextItem.find(".slider_eyebrow, .slider_copy_box"),
          { opacity: 0 },
          { opacity: 1 },
          "<+0.2"
        );

        activeIndex = nextIndex;
      }
      function goNext(num) {
        let nextIndex = num;
        if (nextIndex > totalSlides - 1) nextIndex = 0;
        moveSlide(nextIndex, true);
      }
      childArrow.filter(".is-next").on("click", function () {
        goNext(activeIndex + 1);
      });
      childArrow.filter(".is-prev").on("click", function () {
        let nextIndex = activeIndex - 1;
        if (nextIndex < 0) nextIndex = totalSlides - 1;
        moveSlide(nextIndex, false);
      });

      childDots.on("click", function () {
        let dotIndex = $(this).index();
        if (activeIndex > dotIndex) {
          moveSlide(dotIndex, false);
        } else if (activeIndex < dotIndex) {
          moveSlide(dotIndex, true);
        }
      });
    });
  }

  //nav lottie hover open
  const logoContainer = document.getElementById("lottie-logo");

  const animation = lottie.loadAnimation({
    container: logoContainer,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "https://cdn.prod.website-files.com/678f61a520f4d267ba440e8d/6849631542d09bc3a67070e3_hover.json",
  });

  const holder = document.getElementById("logo-hover");

  holder.addEventListener("mouseenter", () => {
    animation.setDirection(1);
    animation.play();
  });

  holder.addEventListener("mouseleave", () => {
    animation.setDirection(-1);
    animation.play();
  });
  //nav lottie hover close

  function perspectiveModal() {
    $("[popup-component]").each(function (index) {
      let curateHeader = $(this).find("[curate-header]");
      let curateLines = curateHeader.find(".line");
      let teamLeftOpacity = $(this).find("[team-modal-opacity]");
      let modalHeaderText = $(this).find("[modal-header] .char");
      let modalfadeIn = $(this).find("[modal-fade-in]");
      let popupTlCurate = gsap.timeline({ paused: true });

      popupTlCurate.set("[popup-wrapper]", {
        display: "flex",
      });

      popupTlCurate.fromTo(
        ".modal_overlay",
        { opacity: 0 },
        {
          opacity: 1,
          duration: 0.5,
          ease: "power3.out",
          onStart: () => $(".modal_right").scrollTop(0),
          onComplete: () => {
            lenis.stop();
          },
        }
      );

      popupTlCurate.fromTo(
        modalHeaderText,
        {
          yPercent: 100,
        },
        {
          yPercent: 0,
          stagger: 0.02,
          duration: 0.8,
          ease: "power1.out",
        },
        "<"
      );
      popupTlCurate.fromTo(
        modalfadeIn,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          stagger: 0.2,
          duration: 0.8,
          ease: "power1.out",
        },
        "<+0.5"
      );

      popupTlCurate.fromTo(
        ".modal_right",
        {
          yPercent: 30,
          opacity: 0,
          // transform: "rotateX(90deg)",
        },
        {
          yPercent: 0,
          opacity: 1,
          // transform: "rotateX(0deg)",
          duration: 1.5,
          ease: "power3.inOut",
        },
        "<"
      );

      $("[popup-trigger]").on("click", function () {
        popupTlCurate.timeScale(1).restart();
        if (typeof lenis !== "undefined") lenis.stop();
        $("[popup-wrapper]").css("display", "flex");
      });

      $(".modal_close, .modal_overlay").on("click", function () {
        popupTlCurate
          .timeScale(1.5)
          .reverse()
          .eventCallback("onReverseComplete", () => {
            $("[popup-wrapper]").css("display", "none");
            if (typeof lenis !== "undefined") lenis.start();
          });
      });
    });
  }

  function heroGradientFollow() {
    onDesktop(() => {
      let lastMouseX = null;
      let lastMouseY = null;

      const updateHeroGradient = () => {
        if (lastMouseX === null || lastMouseY === null) return;

        const $holder = $(".cashier_hero_gradient_holder");
        if ($holder.length === 0) return;

        const $gradient = $holder.find(".cashier_hero_gradient");
        const holderOffset = $holder.offset();
        if (!holderOffset) return;

        const holderWidth = $holder.width();
        const holderHeight = $holder.height();

        // Convert viewport coordinates to page coordinates
        let mouseX = lastMouseX + $(window).scrollLeft() - holderOffset.left;
        let mouseY = lastMouseY + $(window).scrollTop() - holderOffset.top;

        const clampedX = Math.max(0, Math.min(mouseX, holderWidth));
        const clampedY = Math.max(0, Math.min(mouseY, holderHeight));

        const xPercent = (clampedX / holderWidth) * 100;
        const yPercent = (clampedY / holderHeight) * 100;

        gsap.to($gradient, {
          x: xPercent - 50 + "%",
          y: yPercent - 50 + "%",
          ease: "power2.out",
          duration: 3,
        });
      };

      $(document)
        .off("mousemove.heroGradient")
        .on("mousemove.heroGradient", function (e) {
          // Store viewport coordinates
          lastMouseX = e.clientX;
          lastMouseY = e.clientY;
          updateHeroGradient();
        });

      $(window).on("scroll.heroGradient", function () {
        updateHeroGradient();
      });
    });
  }

  function homeScripts() {
    onMobile(() => {
      $(".rive.desktop-show").remove();
      $(".hero_spline.desktop-show").remove();
      Webflow.require("ix2").destroy();
    });

    onDesktop(() => {
      $(".hero_thumb_holder").on("click", function () {
        gsap.fromTo(
          ".video-player-wrapper",
          {
            display: "none",
          },
          {
            display: "block",
          }
        );
        gsap.fromTo(
          ".video-player-wrapper",
          {
            clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
            pointerEvents: "none",
          },
          {
            clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
            pointerEvents: "auto",
            duration: 0.5,
            ease: "power2.out",
          }
        ),
          "<";
      });
    });

    onMobile(() => {
      $(".hero_thumb_holder").on("click", function () {
        gsap.fromTo(
          ".video-player-wrapper",
          {
            display: "none",
          },
          {
            display: "flex",
          }
        );
        gsap.fromTo(
          ".video-player-wrapper",
          {
            clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
            pointerEvents: "none",
          },
          {
            clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
            pointerEvents: "auto",
            duration: 0.5,
            ease: "power2.out",
          }
        ),
          "<";
      });
    });

    $(".hero_thumb_holder").on("click", function () {
      document.querySelector("[f-data-video='play-button']")?.click();
    });

    $(".plyr_close").on("click", function () {
      document.querySelector("[f-data-video='pause-button']")?.click();

      gsap.fromTo(
        ".video-player-wrapper",
        {
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
          pointerEvents: "auto",
        },
        {
          clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
          pointerEvents: "none",
          duration: 0.5,
          ease: "power2.out",
        }
      );
      gsap.fromTo(
        ".video-player-wrapper",
        {
          display: "block",
        },
        {
          display: "flex",
        }
      );
    });

    // function autoScroll() {
    //   $("html, body").animate(
    //     {
    //       scrollTop: 5,
    //     },
    //     500
    //   );
    // }
    // autoScroll();

    onDesktop(() => {
      gsap.set(
        ".home_intro, .home_select, .commerce_bot, .commerce_heading, .commerce_gradient",
        {
          opacity: 0,
        }
      );
    });

    onMobile(() => {
      gsap.set(".home_intro, .home_select", {
        opacity: 0,
      });
    });

    onDesktop(() => {
      $(document).ready(function () {
        let lastMouseX = null;
        let lastMouseY = null;

        const updateGradientPosition = () => {
          if (lastMouseX === null || lastMouseY === null) return;

          const $wrap = $(".follow_wrap");
          const $gradient = $(".follow_gradient");

          if ($wrap.length && $gradient.length) {
            const wrapOffset = $wrap.offset();
            const wrapWidth = $wrap.outerWidth();
            const wrapHeight = $wrap.outerHeight();
            const gradientWidth = $gradient.outerWidth();
            const gradientHeight = $gradient.outerHeight();

            let mouseX = lastMouseX + $(window).scrollLeft();
            let mouseY = lastMouseY + $(window).scrollTop();

            let posX = mouseX - wrapOffset.left - gradientWidth / 2;
            let posY = mouseY - wrapOffset.top - gradientHeight / 2;

            posX = Math.max(0, Math.min(posX, wrapWidth - gradientWidth));
            posY = Math.max(0, Math.min(posY, wrapHeight - gradientHeight));

            gsap.to($gradient, {
              x: posX,
              y: posY,
              duration: 3,
              ease: "power3.out",
            });
          }
        };

        $(document).on("mousemove", function (e) {
          lastMouseX = e.clientX;
          lastMouseY = e.clientY;
          updateGradientPosition();
        });

        $(window).on("scroll", function () {
          updateGradientPosition();
        });
      });
    });

    onMobile(() => {
      $(".box_list").each(function () {
        let boxEl = $(this);
        let boxGradient = boxEl.find(".follow_wrap");
        ScrollTrigger.create({
          trigger: boxEl,
          start: "top 25%",
          end: "bottom 75%",
          pin: boxGradient,
          pinSpacing: false,
          scrub: true,
        });
      });
    });

    onDesktop(() => {
      var grid = document.querySelector(".box_list");
      var msnry = new Masonry(grid, {
        itemSelector: ".box_item",
        columnWidth: ".box_item",
        percentPosition: true,
        gutter: 0,
      });

      imagesLoaded(grid).on("progress", function () {
        msnry.layout();
      });
    });

    $(".box_list").each(function (index) {
      let swiperElDevice = $(this).find(".swiper.devices");
      let swiperNextDevice = $(this).find(".device_next");
      let swiperPrevDevice = $(this).find(".device_prev");
      let deviceSwiper = new Swiper(swiperElDevice[0], {
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        freeMode: false,
        slidesPerView: 1,
        speed: 500,
        centeredSlides: false,
        loop: true,
        slideActiveClass: "is-active",
        navigation: {
          nextEl: swiperNextDevice[0],
          prevEl: swiperPrevDevice[0],
        },
      });
    });

    //DEVICE FRAMES
    onDesktop(() => {
      $(".swiper-slide.devices").each(function () {
        const frameItems = $(this).find(".frame");
        const frameCount = frameItems.length;

        frameItems.hide().first().show();

        $(window).on("mousemove", function (e) {
          const screenWidth = $(window).width();
          const mouseX = e.pageX;
          const index = Math.floor((mouseX / screenWidth) * frameCount);
          const clampedIndex = Math.min(Math.max(index, 0), frameCount - 1);

          frameItems.hide();
          frameItems.eq(clampedIndex).show();
        });
      });
    });

    onDesktop(() => {
      $(".box_item").each(function () {
        let boxWrap = $(this);
        let boxImg = $(this).find(".box_png");
        let boxParallax = gsap.timeline({
          scrollTrigger: {
            trigger: boxWrap,
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        });

        boxParallax.fromTo(
          boxImg,
          {
            yPercent: 20,
          },
          {
            yPercent: 0,
          }
        );
      });
    });

    // onDesktop(() => {
    $(".spline_track_wrap").each(function () {
      let trackWrap = $(this);
      let heroTrigger = $(this).find(".spline_track");
      let homeHero = $(this).find(".home_hero");
      let homeIntro = $(this).find(".home_intro");
      let homeSpline = $(this).find(".hero_spline");
      let heroOutWord = $(this).find("[hero-out]");
      let heroOutLine = $(this).find("[hero-out] .line");
      let heroFadeOut = $(this).find("[hero-fade-out]");
      let heroFadeOut2 = $(this).find("[hero-fade-out] .btn_main_wrap.hero");
      let heroSelectText = $(this).find(".select_text");
      let heroBtnFadeOut = $(this).find("[hero-fade-out] .g_clickable_wrap");
      let homeIntroWord = $(this).find("[word-ani] .word");
      let homeIntroLine = $(this).find("[word-ani] .line");
      let pinTrack = $(this).find(".hero_spline_track");
      let homeSelect = $(this).find(".home_select");
      let selectText = $(this).find(".select_text");
      let homeCommerce = $(this).find(".home_commerce");
      let commerceGradient = $(this).find(".commerce_gradient");
      let commerceHeading = $(this).find(".commerce_heading");
      let commerceBot = $(this).find(".commerce_bot");
      let headerFadeOut = $(this).find("[home-text]");
      let introMobile = $(this).find("[mobile-intro-ani]");

      ScrollTrigger.create({
        trigger: heroTrigger,
        start: "top bottom",
        end: "bottom bottom",
        pin: pinTrack,
        pinSpacing: false,
        scrub: true,
      });

      let heroFadeOutAnimation = gsap.timeline({
        scrollTrigger: {
          trigger: heroTrigger,
          start: "top bottom",
          end: "top 90%",
          scrub: true,
        },
      });

      heroFadeOutAnimation.to(heroFadeOut, {
        opacity: 0,
        pointerEvents: "none",
      });
      heroFadeOutAnimation.to(heroBtnFadeOut, {
        pointerEvents: "none",
      });
      heroFadeOutAnimation.to(heroFadeOut2, {
        pointerEvents: "none",
      });

      let heroOutWordAnimation = gsap.timeline({
        scrollTrigger: {
          trigger: heroTrigger,
          start: "top bottom",
          end: "top 80%",
          scrub: true,
        },
      });

      heroOutWordAnimation.to(
        heroOutLine,
        // {
        //   yPercent: 0,
        //   clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
        // },
        {
          yPercent: -100,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          ease: "power1.out",
        }
      );

      let homeIntroFadeIn = gsap.timeline({
        scrollTrigger: {
          trigger: heroTrigger,
          start: "top 70%",
          end: "top 70%",
          scrub: true,
        },
      });

      homeIntroFadeIn.fromTo(
        homeIntro,
        {
          opacity: 0,
        },
        {
          opacity: 1,
        }
      );

      onMobile(() => {
        let mobileIntroAni = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "top 25%",
            end: "25% center",
            scrub: true,
          },
        });

        mobileIntroAni.fromTo(
          introMobile,
          {
            yPercent: 40,
            opacity: 0,
          },
          {
            yPercent: 0,
            opacity: 1,
          }
        );
      });

      onDesktop(() => {
        let wordIntroAnimation = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "top 25%",
            end: "25% 75%",
            scrub: true,
          },
        });

        wordIntroAnimation.fromTo(
          homeIntroWord,
          {
            opacity: 0,
          },
          {
            opacity: 1,
            stagger: { amount: 2 },
          }
        );

        let lineIntroAnimation = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "top 25%",
            end: "25% 75%",
            scrub: true,
          },
        });

        lineIntroAnimation.fromTo(
          homeIntroLine,
          {
            yPercent: 80,
          },
          {
            yPercent: 0,
            stagger: { amount: 1 },
          }
        );

        let colorIntroAnimation = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "top 25%",
            end: "25% 75%",
            scrub: true,
          },
        });

        colorIntroAnimation
          .to(homeIntroWord, {
            color: "#00DDB3",
            duration: 0.001,
            stagger: { each: 0.35 },
            delay: 0.5,
          })
          .to(
            homeIntroWord,
            {
              color: "#FFF",
              duration: 0.001,
              stagger: { each: 0.35 },
              delay: 0.5,
            },
            "<+0.00001"
          );

        let introOutWordAnimation = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "25% center",
            end: "25% top",
            scrub: true,
          },
        });

        introOutWordAnimation.to(homeIntroWord, {
          opacity: 0,
          stagger: { amount: 1 },
        });

        let introOutLineAnimation = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "25% center",
            end: "25% top",
            scrub: true,
          },
        });

        introOutLineAnimation.to(homeIntroLine, {
          yPercent: -80,
          stagger: { amount: 0.15 },
        });
      });

      onMobile(() => {
        let mobileIntroAni = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "25% top",
            end: "25% -50%",
            scrub: true,
          },
        });

        mobileIntroAni.to(introMobile, {
          opacity: 0,
          yPercent: -40,
        });
      });

      let homeSelectFadeIn = gsap.timeline({
        scrollTrigger: {
          trigger: heroTrigger,
          start: "center 47%",
          end: "center top",
          toggleActions: "play reverse play reverse",
          onEnter: () => selectText.css("pointer-events", "auto"),
          onLeave: () => selectText.css("pointer-events", "none"),
          onEnterBack: () => selectText.css("pointer-events", "auto"),
          onLeaveBack: () => selectText.css("pointer-events", "none"),
        },
      });

      homeSelectFadeIn.to(homeSelect, {
        opacity: 1,
        duration: 0.4,
        ease: stdEase,
      });

      onDesktop(() => {
        let homeCommerceFadeIn = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "50% bottom",
            end: "75% bottom",
            scrub: true,
          },
        });

        homeCommerceFadeIn.fromTo(
          homeCommerce,
          {
            opacity: 0,
          },
          {
            opacity: 1,
          }
        );

        let commerceGradientFadeIn = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "75% bottom",
            end: "bottom 95%",
            scrub: true,
          },
        });

        commerceGradientFadeIn.fromTo(
          commerceGradient,
          {
            // filter: "blur(10px)",
            opacity: 0,
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
          }
        );

        let commerceHeadingFadeIn = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "90% bottom",
            end: "bottom 90%",
            scrub: true,
          },
        });

        commerceHeadingFadeIn.fromTo(
          commerceHeading,
          {
            opacity: 0,
          },
          {
            opacity: 1,
          }
        );

        let commerceBotFadeIn = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "90% bottom",
            end: "95% bottom",
            scrub: true,
          },
        });

        commerceBotFadeIn.fromTo(
          commerceBot,
          {
            opacity: 0,
            // filter: "blur(10px)",
          },
          {
            opacity: 1,
            // filter: "blur(0px)",
          }
        );
      });
      onMobile(() => {
        let homeCommerceFadeIn = gsap.timeline({
          scrollTrigger: {
            trigger: heroTrigger,
            start: "70% bottom",
            end: "75% center",
            scrub: true,
          },
        });

        homeCommerceFadeIn.fromTo(
          homeCommerce,
          {
            yPercent: 40,
            opacity: 0,
          },
          {
            yPercent: 0,
            opacity: 1,
          }
        );

        // let commerceGradientFadeIn = gsap.timeline({
        //   scrollTrigger: {
        //     trigger: heroTrigger,
        //     start: "50% bottom",
        //     end: "bottom 95%",
        //     scrub: true,

        //   },
        // });

        // commerceGradientFadeIn.fromTo(
        //   commerceGradient,
        //   {
        //     // filter: "blur(10px)",
        //     opacity: 0,
        //   },
        //   {
        //     // filter: "blur(0px)",
        //     opacity: 1,
        //   }
        // );

        // let commerceHeadingFadeIn = gsap.timeline({
        //   scrollTrigger: {
        //     trigger: heroTrigger,
        //     start: "90% bottom",
        //     end: "bottom 90%",
        //     scrub: true,
        //   },
        // });

        // commerceHeadingFadeIn.fromTo(
        //   commerceHeading,
        //   {
        //     opacity: 0,
        //   },
        //   {
        //     opacity: 1,
        //   }
        // );

        // let commerceBotFadeIn = gsap.timeline({
        //   scrollTrigger: {
        //     trigger: heroTrigger,
        //     start: "90% bottom",
        //     end: "95% bottom",
        //     scrub: true,
        //   },
        // });

        // commerceBotFadeIn.fromTo(
        //   commerceBot,
        //   {
        //     opacity: 0,
        //     // filter: "blur(10px)",
        //   },
        //   {
        //     opacity: 1,
        //     // filter: "blur(0px)",
        //   }
        // );
      });
    });
  }

  // function homeVimeo() {
  //   $(".plyr_component").each(function () {
  //     let existingPlayer = this.querySelector(".plyr_video")?.plyr;
  //     if (existingPlayer) {
  //       existingPlayer.destroy();
  //     }
  //   });

  //   $(".page_main").each(function () {
  //     $(".plyr_component").each(function (index) {
  //       let thisComponent = $(this);

  //       let player = new Plyr(thisComponent.find(".plyr_video")[0], {
  //         controls: ["play", "progress", "current-time", "mute"],
  //         resetOnEnd: true,
  //       });

  //       thisComponent.find(".plyr_cover").on("click", function () {
  //         player.play();
  //       });
  //       player.on("ended", (event) => {
  //         thisComponent.removeClass("hide-cover");
  //       });

  //       player.on("play", (event) => {
  //         $(".plyr_component").removeClass("hide-cover");
  //         thisComponent.addClass("hide-cover");
  //         let prevPlayingComponent = $(".plyr--playing")
  //           .closest(".plyr_component")
  //           .not(thisComponent);
  //         if (prevPlayingComponent.length > 0) {
  //           prevPlayingComponent.find(".plyr_pause-trigger")[0].click();
  //         }
  //       });
  //       thisComponent.find(".plyr_pause-trigger").on("click", function () {
  //         player.pause();
  //       });

  //       player.on("ended", (event) => {
  //         if (player.fullscreen.active) {
  //           player.fullscreen.exit();
  //         }
  //       });
  //       player.on("enterfullscreen", (event) => {
  //         thisComponent.addClass("contain-video");
  //       });
  //       player.on("exitfullscreen", (event) => {
  //         thisComponent.removeClass("contain-video");
  //       });
  //     });

  //     $(".hero_vid_thumb")
  //       .off("click")
  //       .on("click", function () {
  //         $(".plyr_wrap").addClass("show");
  //         lenis.stop();
  //       });
  //     let isPlyrActive = false;

  //     $(".hero_vid_thumb")
  //       .off("click")
  //       .on("click", function () {
  //         $(".plyr_wrap").addClass("show");
  //         lenis.stop();
  //         isPlyrActive = true;

  //         setTimeout(() => {
  //           isPlyrActive = false;
  //         }, 100);
  //       });

  //     $(document)
  //       .off("click")
  //       .on("click", function (e) {
  //         if ($(".plyr_wrap").hasClass("show") && !isPlyrActive) {
  //           if (!$(e.target).closest(".plyr_component").length) {
  //             $(".plyr_wrap").removeClass("show");
  //             $(".plyr_component").each(function () {
  //               let playerInstance = this.querySelector(".plyr_video");
  //               if (playerInstance && playerInstance.plyr) {
  //                 playerInstance.plyr.pause();
  //               }
  //             });
  //             lenis.start();
  //           }
  //         }
  //       });
  //   });
  // }

  // function homeVimeoKill() {
  //   $(".plyr_component").each(function () {
  //     let existingPlayer = this.querySelector(".plyr_video")?.plyr;
  //     if (existingPlayer) {
  //       existingPlayer.destroy();
  //     }
  //   });
  // }

  function deviceScript() {
    // heroGradientFollow();

    //   if (window.matchMedia("(min-width: 992px)").matches) {
    //     heroInset();
    // }

    // deviceVimeo();
    clipSwiper();
    deviceFollow();

    onDesktop(() => {
      var deviceGrid = document.querySelector(".device_masonry_wrap");
      var devicemasonry = new Masonry(deviceGrid, {
        itemSelector: ".device_masonry_item",
        columnWidth: ".device_masonry_item",
        percentPosition: true,
        gutter: 0,
      });

      imagesLoaded(deviceGrid).on("progress", function () {
        devicemasonry.layout();
      });
    });

    function deviceVidLoad() {
      $(".device_hero_wrap").each(function () {
        let deviceVideoHolder = $(this).find(".device_hero_vid_holder");
        let deviceVideo = deviceVideoHolder.find("video").get(0);

        if (deviceVideo) {
          let deviceVidPlay = gsap.timeline({});
          deviceVidPlay.fromTo(
            deviceVideoHolder,
            {
              scale: 1,
            },
            {
              scale: 1,
              duration: 1,
              ease: "expo.out",
              onStart: function () {
                deviceVideo.play();
              },
            }
          );
        }
      });
    }

    lenis.start();
    deviceVidLoad();

    $(".device_swiper_section").each(function (index) {
      let swiperDeviceEl = $(this).find(".swiper.is-device");
      let swiperDeviceNext = $(this).find(".device_next");
      let swiperDevicePrev = $(this).find(".device_prev");
      let deviceSwiper = new Swiper(swiperDeviceEl[0], {
        freeMode: false,
        controller: true,
        centeredSlides: false,
        loop: false,
        slideActiveClass: "is-active",
        breakpoints: {
          320: {
            slidesPerView: 1.3,
            spaceBetween: 12,
            slidesOffsetBefore: 20,
            slidesOffsetAfter: 20,
          },
          480: {
            slidesPerView: 1.3,
            spaceBetween: 12,
            slidesOffsetBefore: 20,
            slidesOffsetAfter: 20,
          },
          640: {
            slidesPerView: 3.1,
            spaceBetween: 16,
            slidesOffsetBefore: 56,
            slidesOffsetAfter: 56,
          },
        },
        navigation: {
          nextEl: swiperDeviceNext[0],
          prevEl: swiperDevicePrev[0],
        },
      });
    });

    $(".page_main").each(function () {
      let deviceMain = $(this);
      let deviceHero = $(this).find(".device_hero_wrap");
      let deviceHeroClip = gsap.timeline({
        scrollTrigger: {
          trigger: deviceHero,
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
      });
      onDesktop(() => {
        deviceHeroClip.fromTo(
          deviceHero,
          {
            clipPath: "inset(0 0 0 0)",
          },
          {
            clipPath: "inset(0 1.7rem 0 1.75rem)",
          }
        );
      });
    });
  }

  function deviceFollow() {
    const $holder = $(".device_hero_gradient_holder");

    $(document).off("mousemove.gradientAnimation");

    if ($holder.length === 0) return;

    $(document).on("mousemove.gradientAnimation", function (e) {
      const $gradient = $holder.find(".device_hero_gradient");
      if ($gradient.length === 0) return;
      const holderOffset = $holder.offset();
      if (!holderOffset) return;
      const holderWidth = $holder.width();
      const holderHeight = $holder.height();
      let mouseX = e.pageX - holderOffset.left;
      let mouseY = e.pageY - holderOffset.top;
      const clampedX = Math.max(0, Math.min(mouseX, holderWidth));
      const clampedY = Math.max(0, Math.min(mouseY, holderHeight));
      const xPercent = (clampedX / holderWidth) * 100;
      const yPercent = (clampedY / holderHeight) * 100;

      gsap.to($gradient, {
        x: xPercent - 50 + "%",
        y: yPercent - 50 + "%",
        ease: "power2.out",
        duration: 3,
      });
    });
  }

  function deviceVimeo() {
    // $(".plyr_component.device").each(function () {
    //   let existingPlayer = this.querySelector(".device_plyr_video")?.plyr;
    //   if (existingPlayer) {
    //     existingPlayer.destroy();
    //   }
    // });
    // $(".page_main").each(function () {
    //   $(".plyr_component.device").each(function (index) {
    //     let deviceComponent = $(this);
    //     let devicePlayer = new Plyr(
    //       deviceComponent.find(".device_plyr_video")[0],
    //       {
    //         controls: ["play", "progress", "current-time", "mute"],
    //         resetOnEnd: true,
    //       }
    //     );
    //     deviceComponent.find(".plyr_cover.device").on("click", function () {
    //       devicePlayer.play();
    //     });
    //     devicePlayer.on("ended", (event) => {
    //       deviceComponent.removeClass("hide-cover");
    //     });
    //     devicePlayer.on("play", (event) => {
    //       $(".plyr_component.device").removeClass("hide-cover");
    //       deviceComponent.addClass("hide-cover");
    //       let prevPlayingDevice = $(".plyr--playing")
    //         .closest(".plyr_component.device")
    //         .not(deviceComponent);
    //       if (prevPlayingDevice.length > 0) {
    //         prevPlayingDevice.find(".plyr_pause-trigger")[0].click();
    //       }
    //     });
    //     deviceComponent.find(".plyr_pause-trigger").on("click", function () {
    //       devicePlayer.pause();
    //     });
    //     devicePlayer.on("ended", (event) => {
    //       if (devicePlayer.fullscreen.active) {
    //         devicePlayer.fullscreen.exit();
    //       }
    //     });
    //     devicePlayer.on("enterfullscreen", (event) => {
    //       deviceComponent.addClass("contain-video");
    //     });
    //     devicePlayer.on("exitfullscreen", (event) => {
    //       deviceComponent.removeClass("contain-video");
    //     });
    //   });
    //   $(".device_intro_vid_holder")
    //     .off("click")
    //     .on("click", function () {
    //       $(".plyr_wrap").addClass("show");
    //       lenis.stop();
    //     });
    //   let devicePlyrActive = false;
    //   $(".device_intro_vid_holder")
    //     .off("click")
    //     .on("click", function () {
    //       $(".plyr_wrap.device").addClass("show");
    //       lenis.stop();
    //       devicePlyrActive = true;
    //       setTimeout(() => {
    //         devicePlyrActive = false;
    //       }, 100);
    //     });
    //   $(document)
    //     .off("click")
    //     .on("click", function (e) {
    //       if ($(".plyr_wrap.device").hasClass("show") && !devicePlyrActive) {
    //         if (!$(e.target).closest(".plyr_component.device").length) {
    //           $(".plyr_wrap.device").removeClass("show");
    //           $(".plyr_component.device").each(function () {
    //             let devicePlyrInstance =
    //               this.querySelector(".device_plyr_video");
    //             if (devicePlyrInstance && devicePlyrInstance.plyr) {
    //               devicePlyrInstance.plyr.pause();
    //             }
    //           });
    //           lenis.start();
    //         }
    //       }
    //     });
    // });
  }

  function deviceVimeoKill() {
    $(".plyr_component.device").each(function () {
      let existingPlayer = this.querySelector(".device_plyr_video")?.plyr;
      if (existingPlayer) {
        existingPlayer.destroy();
      }
    });
  }

  function cashierScript() {
    lenis.stop();
    // heroGradientFollow();
    cashierHeroSpin();
    stdSwiper();
    perspectiveModal();
    // stdPageLoad();

    // let mobileScroll = gsap.matchMedia();
    // mobileScroll.add("(max-width: 991px)", () => {
    //   lenis.start();
    // });

    var cashierGrid = document.querySelector(".cashier_masonry_wrap");
    var cashiermasonry = new Masonry(cashierGrid, {
      itemSelector: ".cashier_masonry_item",
      columnWidth: ".cashier_masonry_item",
      percentPosition: true,
      gutter: 0,
    });

    imagesLoaded(cashierGrid).on("progress", function () {
      cashiermasonry.layout();
    });

    onDesktop(() => {
      $(".page_main").each(function () {
        let cashierMain = $(this);
        let cashierHero = $(this).find(".cashier_hero_wrap");
        let cashierHeroClip = gsap.timeline({
          scrollTrigger: {
            trigger: cashierHero,
            start: "bottom bottom",
            end: "bottom top",
            scrub: true,
          },
        });

        cashierHeroClip.fromTo(
          cashierHero,
          {
            clipPath: "inset(0 0 0 0)",
          },
          {
            clipPath: "inset(0 1.7rem 0 1.75rem)",
          }
        );
      });
    });
  }

  function paycloudScript() {
    lenis.stop();
    // heroGradientFollow();
    heroInset();
    cashierHeroSpin();
    // paycloudHeroSpin();
    stdSwiper();
    stickySection();
    perspectiveModal();

    $(".page_main").each(function () {
      let cashierMain = $(this);
      let cashierHero = $(this).find(".cashier_hero_wrap");
      let cashierHeroClip = gsap.timeline({
        scrollTrigger: {
          trigger: cashierHero,
          start: "bottom bottom",
          end: "bottom top",
          scrub: true,
        },
      });
    });

    // let altModalIndex = gsap.matchMedia();
    // altModalIndex.add("(max-width: 991px)", () => {
    //   $(".modal_trigger").on("click", function () {
    //     $(".cashier_comp").css("z-index", "17");
    //     $(".cashier_comp").css("transform", "translate(0, -2vh)");
    //     $(".cashier_content_wrap.alt_modal").css("margin-top", "0rem");
    //   });
    //   $(".modal_close").on("click", function () {
    //     $(".cashier_comp").css("z-index", "4");
    //     $(".cashier_comp").css("transform", "translate(0, -12vh)");
    //     $(".cashier_content_wrap.alt_modal").css("margin-top", "12rem");
    //   });
    // });
  }

  function tmsScript() {
    heroInset();
    platformStdLoad();
    heroGradientFollow();
    stdSwiper();
    stickySection();

    $(document).on("mousemove", function (e) {
      const $manageGradientHolder = $(".manage_gradient_holder");
      const $manageGradient = $manageGradientHolder.find(".manage_gradient");
      const holderOffset = $manageGradientHolder.offset();
      const holderWidth = $manageGradientHolder.width();
      const holderHeight = $manageGradientHolder.height();
      let mouseX = e.pageX - holderOffset.left;
      let mouseY = e.pageY - holderOffset.top;
      const clampedX = Math.max(0, Math.min(mouseX, holderWidth));
      const clampedY = Math.max(0, Math.min(mouseY, holderHeight));

      const xPercent = (clampedX / holderWidth) * 100;
      const yPercent = (clampedY / holderHeight) * 550;
      gsap.to($manageGradient, {
        x: `${xPercent - 50}%`,
        y: `${yPercent - 50}%`,
        ease: "power2.out",
        duration: 0.3,
      });
    });
  }

  function onboardingScript() {
    heroInset();
    heroGradientFollow();
    platformStdLoad();
    stdSwiper();
    stickySection();
  }

  function collectionsScript() {
    heroInset();
    heroGradientFollow();
    platformStdLoad();
    stdSwiper();
    stickySection();

    var cashierGrid = document.querySelector(".cashier_masonry_wrap");
    var cashiermasonry = new Masonry(cashierGrid, {
      itemSelector: ".cashier_masonry_item",
      columnWidth: ".cashier_masonry_item",
      percentPosition: true,
      gutter: 0,
    });

    imagesLoaded(cashierGrid).on("progress", function () {
      cashiermasonry.layout();
    });
  }

  function lineInOut() {
    $(".page_main").each(function () {
      let pageLine = $(this);
      let homeIntroWord = pageLine.find("[main-ani] .word");
      let homeIntroLine = pageLine.find("[main-ani] .line");
      let lineTrigger = pageLine.find("[main-ani]");
      let mainTextAni = gsap.timeline({
        scrollTrigger: {
          trigger: lineTrigger,
          start: "top 80%",
          end: "bottom -10%",
          toggleActions: "play none none reverse",
        },
      });

      mainTextAni.fromTo(
        homeIntroWord,
        {
          opacity: 0,
          yPercent: 60,
        },
        {
          opacity: 1,
          yPercent: 0,
          duration: 1.2,
          stagger: { amount: 0.4 },
        }
      );
    });
  }

  function ecommerceScript() {
    // heroGradientFollow();
    // ecomHeroSpin();
    cashierHeroSpin();
    // paycloudHeroSpin();
    heroInset();
    stdSwiper();
    stickySection();
    perspectiveModal();
  }
  function partnersScript() {
    heroGradientFollow();
    platformStdLoad();
    heroInset();

    $(document).ready(function () {
      $(".partners_section .filter_text_holder").each(function () {
        let filterText = $(this)
          .text()
          .trim()
          .replace(/\(\d+\)$/, "")
          .trim();

        let matchCount = $(
          ".partners_section .partners_list .filter_hide"
        ).filter(function () {
          return $(this).text().trim() === filterText;
        }).length;
        $(this).find(".filter_number").text(matchCount);
      });
    });

    $("[popup-component]").each(function () {
      const popupComponent = $(this);
      const curateHeader = popupComponent.find("[curate-header]");
      const curateLines = curateHeader.find(".line");
      const teamLeftOpacity = popupComponent.find("[team-modal-opacity]");
      const popupWrapper = popupComponent.find("[popup-wrapper]");
      const popupTrigger = popupComponent.find("[popup-trigger]");
      const modalOverlay = popupComponent.find(".modal_overlay");
      const modalRight = popupComponent.find(".modal_right");
      const modalHeaderText = popupComponent.find("[modal-header] .char");
      const modalfadeIn = popupComponent.find("[modal-fade-in]");
      const modalClose = popupComponent.find(".modal_close, .modal_overlay");

      const partnersModal = gsap.timeline({ paused: true });

      partnersModal.set(popupWrapper, {
        display: "flex",
      });

      partnersModal.fromTo(
        modalOverlay,
        { opacity: 0 },
        {
          opacity: 1,
          duration: 0.5,
          ease: "power3.out",
          onStart: () => modalRight.scrollTop(0),
        }
      );

      partnersModal.fromTo(
        modalRight,
        {
          yPercent: 30,
          opacity: 0,
        },
        {
          opacity: 1,
          yPercent: 0,
          duration: 1.5,
          ease: "power3.inOut",
        },
        "<"
      );
      partnersModal.fromTo(
        modalHeaderText,
        {
          yPercent: 100,
        },
        {
          yPercent: 0,
          stagger: 0.02,
          duration: 0.8,
          ease: "power1.out",
        },
        "<"
      );
      partnersModal.fromTo(
        modalfadeIn,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          stagger: 0.2,
          duration: 0.8,
          ease: "power1.out",
        },
        "<+0.5"
      );

      popupTrigger.on("click", function () {
        partnersModal.timeScale(1).restart();
        if (typeof lenis !== "undefined") lenis.stop();
        popupWrapper.css("display", "flex");
      });

      modalClose.on("click", function () {
        partnersModal
          .timeScale(1.5)
          .reverse()
          .eventCallback("onReverseComplete", () => {
            popupWrapper.css("display", "none");
            if (typeof lenis !== "undefined") lenis.start();
          });
      });
    });
  }

  function incubationScript() {
    stdSwiper();

    $(".manage_section").each(function () {
      let manageSection = $(this);
      let pathTrigger = $(this).find(".eco_img_holder");
      let ecoCircleBg = $(this).find(".eco_circle_bg");
      let circleText = $(this).find(".circle_text_holder");

      let ecoPathLeftHolder1 = $(this).find(".circle_left.is-1");
      let ecoPathLeft1 = ecoPathLeftHolder1.find("path");
      let ecoPathRightHolder1 = $(this).find(".circle_right.is-1");
      let ecoPathRight1 = ecoPathRightHolder1.find("path");
      let ecoLine1 = $(this).find(".eco_line.is-1");
      let ecoTextHolder1 = $(this).find(".circle_text_holder.is-1");
      let ecoText1 = ecoTextHolder1.find(".circle_text .line");

      let ecoPathLeftHolder2 = $(this).find(".circle_left.is-2");
      let ecoPathLeft2 = ecoPathLeftHolder2.find("path");
      let ecoPathRightHolder2 = $(this).find(".circle_right.is-2");
      let ecoPathRight2 = ecoPathRightHolder2.find("path");
      let ecoLine2 = $(this).find(".eco_line.is-2");
      let ecoTextHolder2 = $(this).find(".circle_text_holder.is-2");
      let ecoText2 = ecoTextHolder2.find(".circle_text .line");

      let ecoPathLeftHolder3 = $(this).find(".circle_left.is-3");
      let ecoPathLeft3 = ecoPathLeftHolder3.find("path");
      let ecoPathRightHolder3 = $(this).find(".circle_right.is-3");
      let ecoPathRight3 = ecoPathRightHolder3.find("path");
      let ecoLine3 = $(this).find(".eco_line.is-3");
      let ecoTextHolder3 = $(this).find(".circle_text_holder.is-3");
      let ecoText3 = ecoTextHolder3.find(".circle_text .line");

      let ecoPathLeftHolder4 = $(this).find(".circle_left.is-4");
      let ecoPathLeft4 = ecoPathLeftHolder4.find("path");
      let ecoPathRightHolder4 = $(this).find(".circle_right.is-4");
      let ecoPathRight4 = ecoPathRightHolder4.find("path");
      let ecoLine4 = $(this).find(".eco_line.is-4");
      let ecoTextHolder4 = $(this).find(".circle_text_holder.is-4");
      let ecoText4 = ecoTextHolder4.find(".circle_text .line");

      let ecoPathLeftHolder5 = $(this).find(".circle_left.is-5");
      let ecoPathLeft5 = ecoPathLeftHolder5.find("path");
      let ecoPathRightHolder5 = $(this).find(".circle_right.is-5");
      let ecoPathRight5 = ecoPathRightHolder5.find("path");
      let ecoTextHolder5 = $(this).find(".circle_text_holder.is-5");
      let ecoText5 = ecoTextHolder5.find(".circle_text .line");

      ecoCircleBg;

      //-------Master Timeline - All animations triggered together
      let masterTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: pathTrigger,
          start: "top 100%",
          end: "bottom bottom",
          toggleActions: "play none none reset",
        },
      });

      masterTimeline.fromTo(
        circleText,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 1,
          stagger: { each: 1 },
        }
      );
      // Background fade in
      masterTimeline.fromTo(
        ecoCircleBg,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          duration: 1,
        },
        "<"
      );

      // Path animations - all circles
      masterTimeline.fromTo(
        [ecoPathLeft1, ecoPathRight1],
        {
          drawSVG: "0% 0%",
        },
        {
          drawSVG: "100% 0%",
          ease: "expo.out",
          duration: 1.5,
        },
        0.2
      );

      masterTimeline.fromTo(
        [ecoPathLeft2, ecoPathRight2],
        {
          drawSVG: "0% 0%",
        },
        {
          drawSVG: "100% 0%",
          ease: "expo.out",
          duration: 3,
        },
        0.4
      );

      masterTimeline.fromTo(
        [ecoPathLeft3, ecoPathRight3],
        {
          drawSVG: "0% 0%",
        },
        {
          drawSVG: "100% 0%",
          ease: "expo.out",
          duration: 4,
        },
        0.6
      );

      masterTimeline.fromTo(
        [ecoPathLeft4, ecoPathRight4],
        {
          drawSVG: "0% 0%",
        },
        {
          drawSVG: "100% 0%",
          ease: "expo.out",
          duration: 5,
        },
        0.8
      );

      masterTimeline.fromTo(
        [ecoPathLeft5, ecoPathRight5],
        {
          drawSVG: "0% 0%",
        },
        {
          drawSVG: "100% 0%",
          ease: "expo.out",
          duration: 6,
        },
        1.0
      );

      // Line animations
      masterTimeline.fromTo(
        ecoLine1,
        {
          height: "0%",
        },
        {
          height: "10%",
          duration: 1,
        },
        1.2
      );

      masterTimeline.fromTo(
        ecoLine2,
        {
          height: "0%",
        },
        {
          height: "10%",
          duration: 1,
        },
        1.4
      );

      masterTimeline.fromTo(
        ecoLine3,
        {
          height: "0%",
        },
        {
          height: "10%",
          duration: 1,
        },
        1.6
      );

      masterTimeline.fromTo(
        ecoLine4,
        {
          height: "0%",
        },
        {
          height: "10%",
          duration: 1,
        },
        1.8
      );

      // Text animations
      masterTimeline.fromTo(
        ecoText1,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          duration: 1,
        },
        1.4
      );

      masterTimeline.fromTo(
        ecoText2,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          duration: 1,
        },
        1.6
      );

      masterTimeline.fromTo(
        ecoText3,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          duration: 1,
        },
        1.8
      );

      masterTimeline.fromTo(
        ecoText4,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          duration: 1,
        },
        2.0
      );

      masterTimeline.fromTo(
        ecoText5,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          duration: 1,
        },
        2.2
      );
    });

    $(".program_section").each(function () {
      let programSection = $(this);
      let programCards = programSection.find(".program_card");

      programCards.each(function () {
        let programCard = $(this);
        let leftPin = programCard.find(".program_left");
        let programRight = programCard.find(".program_right");

        ScrollTrigger.create({
          trigger: leftPin,
          start: "top 15%",
          endTrigger: programRight,
          end: "bottom 70%",
          pin: leftPin,
          pinSpacing: false,
          scrub: true,
        });
      });
    });
  }

  function supportScript() {
    lenis.start();
    stickySection();
    stdSwiper();

    $(".program_section").each(function () {
      let programSection = $(this);
      let programCards = programSection.find(".program_card");

      programCards.each(function () {
        let programCard = $(this);
        let leftPin = programCard.find(".program_left");
        let programRight = programCard.find(".program_right");

        ScrollTrigger.create({
          trigger: leftPin,
          start: "top 15%",
          endTrigger: programRight,
          end: "bottom 45%",
          pin: leftPin,
          pinSpacing: false,
          scrub: true,
        });
      });
    });
  }

  function aboutScript() {
    stickySection();
    // stdPageLoad();

    // $(".team_item").each(function () {
    //   let item = $(this);

    //   let scrollStaggerPlay = gsap.timeline({
    //     scrollTrigger: {
    //       trigger: item,
    //       start: "top 100%",
    //       end: "top 100%",
    //       toggleActions: "play none none none",
    //     },
    //   });

    //   scrollStaggerPlay.fromTo(
    //     item,
    //     { yPercent: 10, opacity: 0 },
    //     { yPercent: 0, opacity: 1, duration: 0.8 }
    //   );
    // });

    $(".about_swiper").each(function () {
      let childItems = $(this).find(".about_cms_item").hide();
      let copyholder = $(this).find(".about_copy_item").hide();
      let swiperImages = $(this).find(".about_cms_item").hide();
      let childDots = $(this).find(".about_dot_item");
      let toggle = $(this).find(".about_bot_item");
      let totalSlides = childItems.length;
      let activeIndex = 0;
      let isAnimating = false;
      let mainTimeline = gsap.timeline({ repeat: -1 });

      childItems.first().css("display", "flex");
      copyholder.first().css("display", "flex");
      swiperImages.first().css("display", "flex");
      gsap.set(childDots.eq(0).find(".about_dot_line"), { x: "0%" });
      gsap.set(toggle.eq(0).find(".about_slider_name"), { opacity: 1 });
      gsap.set(toggle.eq(0).find(".about_slider_indicator"), { opacity: 1 });

      childDots.each(function (index) {
        mainTimeline.addLabel(`step${index}`);
        mainTimeline.to($(this).find(".about_dot_line"), {
          scaleX: "1.0",
          ease: "none",
          duration: 5,
          onComplete: () => {
            gsap.set(toggle.find(".about_slider_name"), {
              opacity: 0.6,
            });
            gsap.set(toggle.find(".about_slider_indicator"), {
              opacity: 0,
            });
            gsap.to(
              toggle.eq((index + 1) % totalSlides).find(".about_slider_name"),
              {
                opacity: 1,
                duration: 0.3,
                ease: "none",
              }
            );
            gsap.to(
              toggle
                .eq((index + 1) % totalSlides)
                .find(".about_slider_indicator"),
              {
                opacity: 1,
                duration: 0.3,
                ease: "none",
              }
            );

            goNext(index + 1);
          },
        });
      });

      function moveSlide(nextIndex, forwards) {
        if (isAnimating) return;
        isAnimating = true;

        mainTimeline.pause();

        let tl3 = gsap.timeline();
        tl3.set(childDots.eq(nextIndex).find(".about_dot_line"), { x: "0%" });
        tl3.fromTo(
          childDots.eq(activeIndex).find(".about_dot_line"),
          { x: "0%" },
          { x: "100%" }
        );

        gsap.set(toggle.find(".about_slider_name"), { opacity: 0.6 });
        gsap.set(toggle.find(".about_slider_indicator"), { opacity: 0 });
        gsap.to(toggle.eq(nextIndex).find(".about_slider_name"), {
          opacity: 1,
          duration: 0.3,
        });
        gsap.to(toggle.eq(nextIndex).find(".about_slider_indicator"), {
          opacity: 1,
          duration: 0.3,
        });

        childItems.hide();
        let prevItem = childItems.eq(activeIndex).css("display", "flex");
        let nextItem = childItems.eq(nextIndex).css("display", "flex");
        let swiperImgLeftNext = swiperImages
          .eq(nextIndex)
          .find(".is-left")
          .css("display", "flex");
        let swiperImgLeftPrev = swiperImages
          .eq(activeIndex)
          .find(".is-left")
          .css("display", "flex");
        let swiperImgRightNext = swiperImages
          .eq(nextIndex)
          .find(".is-right")
          .css("display", "flex");
        let swiperImgRightPrev = swiperImages
          .eq(activeIndex)
          .find(".is-right")
          .css("display", "flex");
        let prevItemCopy = copyholder.eq(activeIndex).css("display", "flex");
        let nextItemCopy = copyholder.eq(nextIndex).css("display", "flex");

        let tl = gsap.timeline({
          defaults: { duration: 1, ease: "power2.inOut" },
          onComplete: () => {
            isAnimating = false;
            mainTimeline.seek(`step${nextIndex}`);
            mainTimeline.resume();
          },
        });

        if (forwards) {
          tl.fromTo(
            swiperImgLeftNext,
            {
              opacity: 0,
            },
            {
              opacity: 1,
              duration: 1,
              ease: "power3.inOut",
            }
          );
          tl.fromTo(
            swiperImgRightNext,
            {
              opacity: 0,
            },
            {
              opacity: 1,
              duration: 1,
              ease: "power3.inOut",
            },
            "<"
          );
          tl.fromTo(
            swiperImgLeftPrev,
            {
              yPercent: 0,
              opacity: 1,
            },
            {
              opacity: 0,
              duration: 1,
              ease: "power3.inOut",
            },
            "<"
          );
          tl.fromTo(
            swiperImgRightPrev,
            {
              opacity: 1,
            },
            {
              opacity: 0,
              duration: 1,
              ease: "power3.inOut",
            },
            "<"
          );
          tl.fromTo(
            nextItemCopy,
            { opacity: 0 },
            { opacity: 1, duration: 1 },
            "<+=0.3"
          );
          tl.fromTo(
            prevItemCopy,
            { opacity: 1 },
            { opacity: 0, duration: 1 },
            "<"
          );
        } else {
          tl.fromTo(
            swiperImgLeftNext,
            {
              opacity: 0,
            },
            {
              opacity: 1,
              duration: 0.6,
              ease: "power3.inOut",
            }
          );
          tl.fromTo(
            swiperImgRightNext,
            {
              opacity: 0,
            },
            {
              opacity: 1,
              duration: 0.6,
              ease: "power3.inOut",
            },
            "<"
          );
          tl.fromTo(
            swiperImgLeftPrev,
            {
              opacity: 1,
            },
            {
              opacity: 0,
              duration: 0.6,
              ease: "power3.inOut",
            },
            "<"
          );
          tl.fromTo(
            swiperImgRightPrev,
            {
              opacity: 1,
            },
            {
              opacity: 0,
              duration: 0.6,
              ease: "power3.inOut",
            },
            "<"
          );

          tl.fromTo(
            nextItemCopy,
            { opacity: 0 },
            { opacity: 1, duration: 1 },
            "<+=0.3"
          );
          tl.fromTo(
            prevItemCopy,
            { opacity: 1 },
            { opacity: 0, duration: 1 },
            "<"
          );
        }

        tl.fromTo(
          nextItemCopy.find(".slider_line_height"),
          { opacity: 0 },
          { opacity: 1, duration: 1.2, ease: "power3.inOut" },
          "<+=0.3"
        );

        activeIndex = nextIndex;
      }

      function goNext(num) {
        let nextIndex = num;
        if (nextIndex > totalSlides - 1) nextIndex = 0;
        moveSlide(nextIndex, true);
      }

      toggle.on("click", function () {
        if (isAnimating) return;
        let toggleIndex = $(this).index();
        if (activeIndex > toggleIndex) {
          moveSlide(toggleIndex, false);
        } else if (activeIndex < toggleIndex) {
          moveSlide(toggleIndex, true);
        }
      });
    });

    // // FLIP Modal Animation
    // document.querySelectorAll("[item-main]").forEach((main) => {
    //   const move = main.querySelector("[item-move]");
    //   const final = document.querySelector("[item-final]");
    //   const modalWrapper = document.querySelector(".modal_wrapper");
    //   const modalOverlay = document.querySelector(".modal_overlay");
    //   const close = document.querySelector("[modal-close]");
    //   const btnClose = document.querySelector(".modal_close.partners");
    //   const modalEntry = document.querySelectorAll(".modal_entry");
    //   const allFinalSlugs = document.querySelectorAll("[final-slug]");
    //   const rightContent = document.querySelector(".team_modal_wrapper");

    //   let state;

    //   main.addEventListener("click", () => {
    //     const originalParent = move.parentElement;

    //     document.querySelectorAll(".team_item").forEach((item) => {
    //       item.style.zIndex = "1";
    //     });
    //     main.closest(".team_item").style.zIndex = "99";

    //     const partnersModalRight = document.querySelector(
    //       ".partners_modal_right.u-vflex-center-center"
    //     );
    //     const mainValue = main.getAttribute("item-main");

    //     allFinalSlugs.forEach((slug) => {
    //       slug.style.display =
    //         slug.getAttribute("final-slug") === mainValue ? "block" : "none";
    //     });

    //     state = Flip.getState(move);
    //     final.appendChild(move);

    //     gsap
    //       .timeline()
    //       .add(
    //         Flip.from(state, {
    //           duration: 1,
    //           ease: "expo.out",
    //           absolute: true,
    //         })
    //       )
    //       .fromTo(
    //         move,
    //         { rotationY: 20, rotationX: 20 },
    //         { rotationY: 0, rotationX: 0, duration: 1, ease: "expo.out" },
    //         0
    //       );

    //     let modalOpen = gsap.timeline();
    //     modalOpen.set(btnClose, { pointerEvents: "auto", important: true });
    //     modalOpen.set(modalEntry, {
    //       clipPath: "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)",
    //     });
    //     modalOpen.set(modalWrapper, { opacity: 1 });
    //     modalOpen.set(rightContent, {
    //       clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
    //     });
    //     modalOpen.set(close, { pointerEvents: "auto" });
    //     modalOpen.set(partnersModalRight, { opacity: 1, clearProps: "all" });
    //     modalOpen.fromTo(
    //       modalOverlay,
    //       { opacity: 0 },
    //       { opacity: 1, duration: 1, ease: "power1.out", important: true }
    //     );
    //     modalOpen.fromTo(
    //       partnersModalRight,
    //       { opacity: 0, pointerEvents: "none" },
    //       {
    //         opacity: 1,
    //         pointerEvents: "auto",
    //         duration: 0.0001,
    //         ease: "power1.out",
    //         important: true,
    //       }
    //     );
    //     modalOpen.fromTo(
    //       modalEntry,
    //       { width: "0%" },
    //       {
    //         width: "100%",
    //         stagger: { each: 0.1, from: "start" },
    //         duration: 0.8,
    //         ease: "expo.inOut",
    //         important: true,
    //       },
    //       "<-0.2"
    //     );
    //     modalOpen.fromTo(
    //       rightContent,
    //       { clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)" },
    //       {
    //         clipPath: "polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)",
    //         duration: 0.8,
    //         ease: "expo.out",
    //         important: true,
    //       },
    //       "<+0.6"
    //     );
    //     modalOpen.fromTo(
    //       btnClose,
    //       { opacity: 0 },
    //       { opacity: 1, duration: 0.4, ease: "expo.out", important: true }
    //     );

    //     [close, btnClose].forEach((el) => {
    //       el.addEventListener(
    //         "click",
    //         () => {
    //           const partnersModalRight = document.querySelector(
    //             ".partners_modal_right.u-vflex-center-center"
    //           );
    //           // gsap.to(btnClose, { pointerEvents: "none", important: true });
    //           gsap.to(modalOverlay, {
    //             opacity: 0,
    //             duration: 0.00001,
    //           });
    //           gsap.to(btnClose, { opacity: 0, duration: 0.4 }, "<-0.5");
    //           gsap.to(rightContent, {
    //             clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
    //             duration: 0.5,
    //           });

    //           gsap.to(modalEntry, {
    //             clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",
    //             duration: 0.5,
    //             delay: 0.2,
    //             onComplete: () => {
    //               gsap.set(modalWrapper, { opacity: 0, pointerEvents: "none" });
    //               gsap.set(close, { pointerEvents: "none" });
    //               gsap.set(modalOverlay, { pointerEvents: "none" });
    //               gsap.to(modalOverlay, { opacity: 0, duration: 1 });
    //               gsap.set(partnersModalRight, { pointerEvents: "none" });
    //             },
    //           });

    //           const returnState = Flip.getState(move);
    //           originalParent.appendChild(move);

    //           gsap
    //             .timeline()
    //             .add(
    //               Flip.from(returnState, {
    //                 duration: 1,
    //                 delay: 0.5,
    //                 ease: "expo.inOut",
    //                 absolute: true,
    //               })
    //             )
    //             .fromTo(
    //               move,
    //               { rotationY: 0, rotationX: 0 },
    //               {
    //                 rotationY: 15,
    //                 rotationX: 15,
    //                 duration: 0.5,
    //                 delay: 0.5,
    //                 ease: "expo.inOut",
    //               },
    //               0
    //             )
    //             .to(
    //               move,
    //               {
    //                 rotationY: 0,
    //                 rotationX: 0,
    //                 duration: 0.3,
    //                 ease: "expo.inOut",
    //               },
    //               "<0.2"
    //             ); // This will start after the previous animation

    //           setTimeout(() => {
    //             main.closest(".team_item").style.zIndex = "1";
    //           }, 2000);
    //         },
    //         { once: true }
    //       );
    //     });
    //   });
    // });

    $(".track_section").each(function () {
      document.querySelectorAll(".stat_final").forEach((stat) => {
        const targetNumber = parseFloat(stat.textContent);

        gsap.fromTo(
          stat,
          {
            textContent: 0,
          },
          {
            textContent: targetNumber,
            duration: 1,
            ease: "expo.out",
            snap: { textContent: 1 },
            scrollTrigger: {
              trigger: stat,
              start: "top bottom",
              toggleActions: "play none none reverse",
            },

            onUpdate: function () {
              stat.textContent = Math.round(stat.textContent);
            },
          }
        );
      });
    });
  }

  function industriesScript() {
    // stdPageLoad();
    $(".detail_swiper").each(function (index) {
      let swiperEl = $(this).find(".swiper.detail");
      let swiperNext = $(this).find(".home_next");
      let swiperPrev = $(this).find(".home_prev");
      let homeSwiper = new Swiper(swiperEl[0], {
        slidesPerView: "auto",
        speed: 1000,
        delay: 0.1,
        spaceBetween: 16,
        controller: true,
        centeredSlides: false,
        loop: true,
        slideActiveClass: "is-active",
        navigation: {
          nextEl: swiperNext[0],
          prevEl: swiperPrev[0],
        },
      });

      $(swiperEl).find(".swiper-slide:nth-child(even)").css("width", "20%");
      $(swiperEl).find(".swiper-slide:nth-child(odd)").css("width", "40%");
    });

    $(".slider_wrap.industry").each(function () {
      let childArrow = $(this).find(".slider_btn");
      let childItems = $(this).find(".slider_cms_item").hide();
      let childDots = $(this).find(".slider_dot_item");
      let logoHolders = $(this).find(".industry_logo_holder"); // Direct reference to logo holders
      let totalSlides = childItems.length;
      let activeIndex = 0;

      childItems.first().css("display", "flex");
      gsap.set(childDots.eq(0).find(".slider_dot_line"), { x: "0%" });

      logoHolders.css("opacity", 0.6);
      logoHolders.eq(0).css("opacity", 1);

      // DOT LINES
      let tl2 = gsap.timeline({ repeat: -1 });
      childDots.each(function (index) {
        tl2.addLabel(`step${index}`);
        tl2.to($(this).find(".slider_dot_line"), {
          scaleX: "1.0",
          ease: "none",
          duration: 5,
          onComplete: () => {
            let nextIndex = (index + 1) % totalSlides;

            // Animate opacities directly using indices
            gsap.to(logoHolders.eq(index), {
              opacity: 0.6,
              duration: 0.3,
              ease: "none",
            });

            gsap.to(logoHolders.eq(nextIndex), {
              opacity: 1,
              duration: 0.3,
              ease: "none",
            });

            goNext(nextIndex);
          },
        });
      });

      // MAIN SLIDER CODE
      function moveSlide(nextIndex, forwards) {
        let tl3 = gsap.timeline();
        tl3.set(childDots.eq(nextIndex).find(".slider_dot_line"), { x: "0%" });
        tl3.fromTo(
          childDots.eq(activeIndex).find(".slider_dot_line"),
          { x: "0%" },
          { x: "100%" }
        );

        tl2.seek(`step${nextIndex}`);

        let titleFrom = -100;
        let titleDelay = "<";
        if (forwards) {
          titleFrom = 100;
          titleDelay = "<50%";
        }

        childItems.hide();
        let prevItem = childItems.eq(activeIndex).css("display", "flex");
        let nextItem = childItems.eq(nextIndex).css("display", "flex");
        let tl = gsap.timeline({
          defaults: { duration: 1, ease: "power2.inOut" },
        });

        gsap.to(logoHolders.eq(activeIndex), {
          opacity: 0.6,
          duration: 0.3,
          ease: "none",
        });

        gsap.to(logoHolders.eq(nextIndex), {
          opacity: 1,
          duration: 0.3,
          ease: "none",
        });

        if (forwards) {
          tl.fromTo(
            nextItem,
            { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" },
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, -30% 100%)" }
          );
          tl.fromTo(
            prevItem,
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
            { clipPath: "polygon(0% 0%, 0% 0%, -30% 100%, 0% 100%)" },
            "<"
          );
        } else {
          tl.fromTo(
            nextItem,
            { clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)" },
            { clipPath: "polygon(0% 0%, 100% 0%, 130% 100%, 0% 100%)" }
          );
          tl.fromTo(
            prevItem,
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
            { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 130% 100%)" },
            "<"
          );
        }
        tl.fromTo(
          nextItem.find(".slider_cms_title .char"),
          { yPercent: titleFrom },
          { yPercent: 0, duration: 1, stagger: { amount: 0.2 } },
          titleDelay
        );

        activeIndex = nextIndex;
      }

      // ARROWS
      function goNext(num) {
        let nextIndex = num;
        if (nextIndex > totalSlides - 1) nextIndex = 0;
        moveSlide(nextIndex, true);
      }
    });
  }

  function clientScript() {
    $(document).ready(function () {
      $(".partners_section .filter_text_holder").each(function () {
        let filterText = $(this)
          .text()
          .trim()
          .replace(/\(\d+\)$/, "")
          .trim();

        let matchCount = $(
          ".partners_section .partners_list .filter_hide"
        ).filter(function () {
          return $(this).text().trim() === filterText;
        }).length;

        $(this).find(".filter_number").text(matchCount);
      });
    });
    $(".slider_wrap").each(function () {
      let childArrow = $(this).find(".slider_btn");
      let childItems = $(this).find(".slider_cms_item").hide();
      let childDots = $(this).find(".slider_dot_item");
      let logoHolders = $(this).find(".industry_logo_holder");
      let totalSlides = childItems.length;
      let activeIndex = 0;

      childItems.first().css("display", "flex");
      gsap.set(childDots.eq(0).find(".slider_dot_line"), { x: "0%" });
      logoHolders.css("opacity", 0.6);
      logoHolders.eq(0).css("opacity", 1);

      // DOT LINES
      let tl2 = gsap.timeline({ repeat: -1 });
      childDots.each(function (index) {
        tl2.addLabel(`step${index}`);
        tl2.to($(this).find(".slider_dot_line"), {
          scaleX: "1.0",
          ease: "none",
          duration: 5,
          onComplete: () => {
            let nextIndex = (index + 1) % totalSlides;
            gsap.to(logoHolders.eq(index), {
              opacity: 0.6,
              duration: 0.3,
              ease: "none",
            });

            gsap.to(logoHolders.eq(nextIndex), {
              opacity: 1,
              duration: 0.3,
              ease: "none",
            });

            goNext(nextIndex);
          },
        });
      });

      // MAIN SLIDER CODE
      function moveSlide(nextIndex, forwards) {
        let tl3 = gsap.timeline();
        tl3.set(childDots.eq(nextIndex).find(".slider_dot_line"), { x: "0%" });
        tl3.fromTo(
          childDots.eq(activeIndex).find(".slider_dot_line"),
          { x: "0%" },
          { x: "100%" }
        );

        tl2.seek(`step${nextIndex}`);

        let titleFrom = -100;
        let titleDelay = "<";
        if (forwards) {
          titleFrom = 100;
          titleDelay = "<50%";
        }

        childItems.hide();
        let prevItem = childItems.eq(activeIndex).css("display", "flex");
        let nextItem = childItems.eq(nextIndex).css("display", "flex");
        let tl = gsap.timeline({
          defaults: { duration: 1, ease: "power2.inOut" },
        });

        gsap.to(logoHolders.eq(activeIndex), {
          opacity: 0.6,
          duration: 0.3,
          ease: "none",
        });

        gsap.to(logoHolders.eq(nextIndex), {
          opacity: 1,
          duration: 0.3,
          ease: "none",
        });

        if (forwards) {
          tl.fromTo(
            nextItem,
            { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" },
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, -30% 100%)" }
          );
          tl.fromTo(
            prevItem,
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
            { clipPath: "polygon(0% 0%, 0% 0%, -30% 100%, 0% 100%)" },
            "<"
          );
        } else {
          tl.fromTo(
            nextItem,
            { clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)" },
            { clipPath: "polygon(0% 0%, 100% 0%, 130% 100%, 0% 100%)" }
          );
          tl.fromTo(
            prevItem,
            { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
            { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 130% 100%)" },
            "<"
          );
        }
        tl.fromTo(
          nextItem.find(".slider_cms_title .char"),
          { yPercent: titleFrom },
          { yPercent: 0, duration: 1, stagger: { amount: 0.2 } },
          titleDelay
        );

        activeIndex = nextIndex;
      }

      // ARROWS
      function goNext(num) {
        let nextIndex = num;
        if (nextIndex > totalSlides - 1) nextIndex = 0;
        moveSlide(nextIndex, true);
      }
    });
  }
  function newsScript() {
    $(document).ready(function () {
      $(".partners_section .filter_text_holder").each(function () {
        let filterText = $(this)
          .text()
          .trim()
          .replace(/\(\d+\)$/, "")
          .trim();
        let matchCount = $(
          ".partners_section .partners_list .filter_hide"
        ).filter(function () {
          return $(this).text().trim() === filterText;
        }).length;
        $(this).find(".filter_number").text(matchCount);
      });
    });
  }
  function networkScript() {
    function autoScroll() {
      $("html, body").animate(
        {
          scrollTop: 5,
        },
        500
      );
    }
    autoScroll();

    stickySection();
    stdSwiper();
    clipSwiper();

    $(".network_section").each(function () {
      let networkWrap = $(this);
      let networkWrapPin = networkWrap.find(".network_spline_track");
      let networkPinTrigger = networkWrap.find(".network_track");
      let networkSpline = networkWrap.find(".network_spline");
      let networkIntro = networkWrap.find(".network_hero.intro");
      let networkDevice = networkWrap.find(".network_hero.device");
      let deviceCard = networkDevice.find(".port_item_holder");
      let networkPlatform = networkWrap.find(".network_hero.platform");
      let platformCard = networkPlatform.find(".port_item_holder");
      let networkEcom = networkWrap.find(".network_hero.ecom");
      let ecomCard = networkEcom.find(".port_item_holder");
      let networkPartners = networkWrap.find(".network_hero.partners");
      let partnersCard = networkPartners.find(".port_item_holder");
      let networkOutro = networkWrap.find(".network_hero.outro");
      let gradientOutro = networkOutro.find(".network_final_gradient");
      let panel = networkWrap.find(".port_bot");
      let finalContent = networkWrap.find(".network_hero_bot");
      

      onDesktop(() => {
        ScrollTrigger.create({
          trigger: networkPinTrigger,
          start: "top top",
          end: "bottom bottom",
          pin: networkWrapPin,
          pinSpacing: false,
          scrub: true,
        });

        let splineIntro = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "top -5%",
            end: "top -10%",
            scrub: true,
          },
        });

        splineIntro.fromTo(
          networkIntro,
          {
            opacity: 1,
            zIndex: 2,
          },
          {
            opacity: 0,
            zIndex: 1,
          }
        );

        let splineDeviceIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "15% 70%",
            end: "15% 50%",
            scrub: true,
          },
        });

        let splineCardIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "15% 70%",
            end: "15% 10%",
            scrub: true,
          },
        });

        splineDeviceIn.fromTo(
          panel,
          {
            display: "none",
            pointerEvents: "none",
          },
          {
            display: "block",
            pointerEvents: "auto",
          }
        );

        splineDeviceIn.fromTo(
          networkDevice,
          {
            // filter: "blur(10px)",
            opacity: 0,
            zIndex: 1,
            pointerEvents: "none",
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
            zIndex: 2,
            duration: 0.4,
            ease: stdEase,
            pointerEvents: "auto",
          }
        );

        splineCardIn.fromTo(
          deviceCard,
          {
            // filter: "blur(10px)",
            opacity: 0,
            yPercent: 10
          },
          {
            // filter: "blur(0px)",
            yPercent: 0,
            opacity: 1,
            stagger: { each: 0.01 },
            duration: 0.2,
            ease: stdEase,
          },
          "<"
        );

        let splineDeviceOut = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "20% 80%",
            end: "20% 6%",
            scrub: true,
          },
        });

        splineDeviceOut.to(
          networkDevice,
          {
            opacity: 0,
            pointerEvents: "none",
          }
        );

        splineDeviceOut.to(
          panel,
          {
            display: "none",
            pointerEvents: "none",
          }
        );

        let splinePlatformIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "26% 0%",
            end: "26% -5%",
            scrub: true,
          },
        });

        let platformCardIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "26% 0%",
            end: "27% 0%",
            scrub: true,
          },
        });

        splinePlatformIn.to(
          panel,
          {
            display: "block",
            pointerEvents: "auto",
          }
        );

        splinePlatformIn.fromTo(
          networkPlatform,
          {
            // filter: "blur(10px)",
            opacity: 0,
            zIndex: 1,
            pointerEvents: "none",
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
            zIndex: 2,
            duration: 0.4,
            ease: stdEase,
            pointerEvents: "auto",
          }
        );

        splinePlatformIn.fromTo(
          platformCard,
          {
            // filter: "blur(10px)",
            opacity: 0,
            yPercent: 10
          },
          {
            // filter: "blur(0px)",
            yPercent: 0,
            opacity: 1,
            stagger: { each: 0.01 },
            duration: 0.2,
            ease: stdEase,
          },
          "<"
        );

        let splinePlatformOut = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "31% 0%",
            end: "33% 0%",
            scrub: true,
          },
        });

        splinePlatformOut.to(
          networkPlatform,
          {
            opacity: 0,
            pointerEvents: "none",
          }
        );

        splinePlatformOut.to(
          panel,
          {
            display: "none",
            pointerEvents: "none",
          }
        ),"<";

        let splineEcomformIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "44% 100%",
            end: "46% 100%",
            scrub: true,
          },
        });

        let ecomCardCardIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "44% 100%",
            end: "46% 100%",
            scrub: true,
          },
        });

        splineEcomformIn.to(
          panel,
          {
            display: "block",
            pointerEvents: "auto",
          }
        );

        splineEcomformIn.fromTo(
          networkEcom,
          {
            // filter: "blur(10px)",
            opacity: 0,
            zIndex: 1,
            pointerEvents: "none",
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
            zIndex: 2,
            duration: 0.4,
            ease: stdEase,
            pointerEvents: "auto",
          }
        );

        splineEcomformIn.fromTo(
          ecomCard,
          {
            // filter: "blur(10px)",
            opacity: 0,
            yPercent: 10
          },
          {
            // filter: "blur(0px)",
            yPercent: 0,
            opacity: 1,
            stagger: { each: 0.01 },
            duration: 0.2,
            ease: stdEase,
          },
          "<"
        );

        let splineEcomformOut = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "49% 100%",
            end: "54% 100%",
            scrub: true,
            
          },
        });

        splineEcomformOut.to(
          networkEcom,
          {
            opacity: 0,
            pointerEvents: "none",
          }
        );

        splineEcomformOut.to(
          panel,
          {
            display: "none",
            pointerEvents: "none",
          }
        );

        let splinePartnersformIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "59% 100%",
            end: "61% 100%",
            scrub: true,
          },
        });

        let partnersCardIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "59% 100%",
            end: "61% 100%",
            scrub: true,
          },
        });

        partnersCardIn.to(
          panel,
          {
            display: "block",
            pointerEvents: "auto",
          }
        );

        splinePartnersformIn.fromTo(
          networkPartners,
          {
            // filter: "blur(10px)",
            opacity: 0,
            zIndex: 1,
            pointerEvents: "none",
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
            zIndex: 2,
            duration: 0.4,
            ease: stdEase,
            pointerEvents: "auto",
          }
        );

        partnersCardIn.fromTo(
          partnersCard,
          {
            // filter: "blur(10px)",
            opacity: 0,
            yPercent: 10
          },
          {
            // filter: "blur(0px)",
            yPercent: 0,
            opacity: 1,
            stagger: { each: 0.01 },
            duration: 0.2,
            ease: stdEase,
          },
          "<"
        );
        let partnersOut = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "63% 100%",
            end: "65% 100%",
            scrub: true,
          },
        });

        partnersOut.to(
          networkPartners,
          {
            opacity: 0,
            pointerEvents: "none",
          }
        );

        partnersOut.to(
          panel,
          {
            display: "none",
            pointerEvents: "none",
          }
        );
        let splineFinalIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "80% 100%",
            end: "85% 100%",
            scrub: true,
          },
        });
        let splineGradientIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "85% 100%",
            end: "90% 100%",
            scrub: true,
          },
        });
        let splineContentIn = gsap.timeline({
          scrollTrigger: {
            trigger: networkPinTrigger,
            start: "90% 100%",
            end: "100% 100%",
            scrub: true,
          },
        });

        splineFinalIn.fromTo(
          networkOutro,
          {
            // filter: "blur(10px)",
            opacity: 0,
            zIndex: 1,
            pointerEvents: "none",
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
            zIndex: 2,
            duration: 0.4,
            ease: stdEase,
            pointerEvents: "auto",
          }
        );

        splineContentIn.fromTo(
          finalContent,
          {
            // filter: "blur(10px)",
            opacity: 0,
          },
          {
            // filter: "blur(0px)",
            opacity: 1,
          }
        );

        splineGradientIn.fromTo(
          gradientOutro,
          {
            // filter: "blur(0px)",
            opacity: 0,
          },
          {
            // filter: "blur(10px)",
            opacity: 0.2,
          },
          "<"
        );
      });
      // onMobile(() => {
      //   ScrollTrigger.create({
      //     trigger: networkPinTrigger,
      //     start: "top top",
      //     end: "75% 75%",
      //     pin: networkSpline,
      //     pinSpacing: false,
      //     scrub: true,
      //   });
      // });
    });
  }

  function quizScript() {
    // document.addEventListener("DOMContentLoaded", function () {
    //   const radioButton = document.querySelector(
    //     'input[type="radio"][if-id="b2a633d6-1aca-f935-44de-da771c9da33a"]'
    //   );
    //   if (radioButton) {
    //     radioButton.checked = true;
    //   }
    // });
    $(".starter_btn").on("click", function () {
      $(".starter_btn").removeClass("is-active");

      $("[quiz-hide]").css({ opacity: 1, pointerEvents: "auto" });

      $("[service-step], [info-step], [quiz-step]").css({ opacity: 0 });

      $(this).addClass("is-active");

      if ($(this).is("[service-btn]")) {
        $("[quiz-hide]").css({ opacity: 0, pointerEvents: "none" });
        $("[service-step]").css({ opacity: 1 });
      } else if ($(this).is("[info-btn]")) {
        $("[quiz-hide]").css({ opacity: 0, pointerEvents: "none" });
        $("[info-step]").css({ opacity: 1 });
      } else if ($(this).is("[quiz-btn]")) {
        $("[quiz-hide]").css({ opacity: 0, pointerEvents: "none" });
        $("[quiz-step]").css({ opacity: 1 });
      }
    });

    function toggleQuizProgressWrap() {
      if ($(".starter_btn").hasClass("is-active")) {
        $(".quiz_progress_wrap").css({ opacity: 1 });
      } else {
        $(".quiz_progress_wrap").css({ opacity: 0 });
      }
    }

    $(".starter_btn").on("click", function () {
      $(".starter_btn").removeClass("is-active");
      $(this).addClass("is-active");
      toggleQuizProgressWrap();
    });
    toggleQuizProgressWrap();
  }

  function reloadScript() {
    gsap.fromTo(
      ".page_main",
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 1,
        ease: stdEase,
      }
    );
  }

  function preloader() {
    let preloadPercent = gsap.timeline({
      onStart: () => {
        lenis.stop();
        $(".page_main").scrollTop(0);
      },
    });

    // gsap.set(".nav_comp", { pointerEvents: "none", opacity: 0 });

    const animation = lottie.loadAnimation({
      container: document.getElementById("lottieEmbed"),
      renderer: "svg",
      loop: false,
      autoplay: false,
      path: "https://cdn.prod.website-files.com/678f61a520f4d267ba440e8d/679737d60a5b4bc34459c5e0_desktop.json",
    });

    preloadPercent.to(".preloader_wrap", {
      backgroundColor: "#00DDB3",
      delay: 1,
      duration: 0.1,
      onComplete: () => {
        animation.play();
      },
    });

    preloadPercent.to(
      ".preloader_text_wrap",
      {
        opacity: 1,
        duration: 0.2,
      },
      "<+0.3"
    );

    preloadPercent.to(
      ".loader_number",
      {
        innerText: 100,
        snap: { innerText: 1 },
        duration: 5,
        ease: CustomEase.create(
          "custom",
          "M0,0 C0.087,0.257 0.063,0.3 0.2,0.3 0.303,0.3 0.499,0.406 0.499,0.486 0.566,0.832 0.89,1 1,1 "
        ),
        onUpdate: function () {
          $(".loader_number").text(Math.floor(this.targets()[0].innerText));
        },
      },
      "<+0.5"
    );

    preloadPercent.fromTo(
      ".preloader_text_wrap",
      {
        width: "100%",
      },
      {
        width: "100%",
        duration: 6.3,
        // delay: 1,
        ease: CustomEase.create(
          "custom",
          "M0,0 C0.041,0.081 0.609,0.123 0.666,0.2 0.82,0.409 0.881,1.028 1,1 "
        ),
      },
      "<+1.2"
    );

    preloadPercent.fromTo(
      ".preloader_wrap",
      {
        opacity: 1,
      },
      {
        opacity: 0,
        duration: 0.4,
        ease: CustomEase.create(
          "custom",
          "M0,0 C0.041,0.081 0.609,0.123 0.666,0.2 0.82,0.409 0.881,1.028 1,1 "
        ),
        onStart: () => {
          homeLoader.play();
        },
        onComplete: () => {
          $(".body").removeClass("home-page");
        },
      },

      "<+5"
    );
    preloadPercent.to(
      ".preloader",
      {
        scale: 1.4,
        duration: 1,
      },
      "<-1"
    );
    preloadPercent.to(".preloader_wrap", {
      display: "none",
    });
  }

  globalScript();

  // PAGES //
  $("[data-barba-namespace='home']").each(function () {
    // preHomeLoad();

    if (!sessionStorage.getItem("preloaderPlayed")) {
      preloader();
      $("body").addClass("no-load");

      setTimeout(function () {
        $("body").removeClass("no-load");
      }, 5000);
      // gsap.delayedCall(15, function () {
      //   $(".cookie_wrap").addClass("active");
      //   lenis.stop();
      // });

      $(".cookie_btn_wrap").on("click", function () {
        $(".cookie_wrap").removeClass("active");
        lenis.start();
      });

      sessionStorage.setItem("preloaderPlayed", "true");
    } else {
      document.querySelector(".preloader_wrap").style.opacity = "0";

      //     // document.querySelector("[home-text], [opacity-hover], [home-btn]").style.opacity = "1";
      //   //   document.querySelectorAll(".trusted_logo_holder").forEach(el => {
      //   //     el.style.opacity = "0.7";
      //   // });

      setTimeout(() => {
        homeLoader.play();
      }, 1000); // delay in milliseconds (e.g. 1000 = 1s)

      //     // pageIn();
    }

    // preloader();

    homeScripts();
    // homeVimeo();
    stdSwiper();
    clipSwiper();
    // homeVimeoKill();
  });

  $("[data-barba-namespace='network']").each(function () {
    networkScript();
  });

  $("[data-barba-namespace='device']").each(function () {
    deviceScript();
    // deviceVimeoKill();
  });
  $("[data-barba-namespace='cashier']").each(function () {
    cashierScript();
  });
  $("[data-barba-namespace='paycloud']").each(function () {
    paycloudScript();
  });
  $("[data-barba-namespace='tms']").each(function () {
    tmsScript();
  });
  $("[data-barba-namespace='onboarding']").each(function () {
    onboardingScript();
  });
  $("[data-barba-namespace='collections']").each(function () {
    collectionsScript();
  });
  $("[data-barba-namespace='ecom']").each(function () {
    ecomScript();
  });
  $("[data-barba-namespace='partners']").each(function () {
    partnersScript();
  });
  $("[data-barba-namespace='incubation']").each(function () {
    incubationScript();
  });
  $("[data-barba-namespace='support']").each(function () {
    supportScript();
  });
  $("[data-barba-namespace='about']").each(function () {
    aboutScript();
  });
  $("[data-barba-namespace='industries']").each(function () {
    industriesScript();
  });
  $("[data-barba-namespace='client']").each(function () {
    clientScript();
  });
  $("[data-barba-namespace='client-detail']").each(function () {
    clientDetailScript();
  });
  $("[data-barba-namespace='news']").each(function () {
    newsScript();
    loadScript(
      "https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
    );
  });
  $("[data-barba-namespace='solution']").each(function () {
    loadInputFlowScript();
    quizScript();
  });
  window.addEventListener("load", () => {
    window.scrollTo(0, 0);
  });
}

// import SwupPreloadPlugin from '@swup/preload-plugin';

const swup = new Swup({
  animateHistoryBrowsing: true,
  plugins: [
    new SwupPreloadPlugin({
      // Preload on hover after 200ms delay
      throttle: 200,
      preloadVisibleLinks: true,
      // Also preload on mousedown for even faster loading
      preloadOnMouseDown: true,

      // Don't preload external links
      ignoreExternalLinks: true,

      // Custom selector to exclude certain links if needed
      // selector: 'a[href]:not([data-no-preload])'
    }),
  ],
});

if (document.readyState === "complete") {
  init();
} else {
  document.addEventListener("DOMContentLoaded", () => init());
}

swup.hooks.replace("animation:out:await", async (visit) => {
  $(document).on("click", "a[data-bg]", function (e) {
    e.preventDefault(); // Prevent default navigation if needed
    $(".transition.is-bg").css(
      "background-color",
      $(this).attr("data-bg") === "dark" ? "#000" : "#FFF"
    );
  });

  let pageOutTl = gsap.timeline({
    defaults: { duration: 1.2 },
    onStart: () => lenis.stop(),
  });

  gsap.set(".transition", { transformOrigin: "0% 100%" });
  pageOutTl.set(".transition", { rotateX: "40" });
  pageOutTl.set(".transition_holder", { opacity: 1 });
  pageOutTl.set(".transition_holder", { display: "flex" });
  pageOutTl.set(".transition", { yPercent: -100 });

  // pageOutTl.fromTo(
  //   ".nav_comp",
  //   { opacity: 1, yPercent: 0 },
  //   { opacity: 100, yPercent: 0, delay: 0.6, duration: 1.2, ease: "expo.out" }
  // );

  // pageOutTl.fromTo(
  //   ".transition_holder",
  //   { opacity: 0 },
  //   { opacity: 1, duration: 0.1, ease: "power2.out" },
  //   "<+0.2"
  // );
  pageOutTl.fromTo(
    ".transition_overlay",
    {
      opacity: 0,
    },
    {
      opacity: 1,
      duration: 0.4,
      ease: "power2.out",
    },
    "<"
  );
  onDesktop(() => {
    pageOutTl.fromTo(
      ".page_main",
      {
        filter: "blur(0px)",
      },
      {
        filter: "blur(20px)",
        duration: 0.4,
        ease: "power2.out",
      },
      "<"
    );
  });
  pageOutTl.fromTo(
    ".transition",
    { rotateX: "40", yPercent: -100 },
    {
      rotateX: "0",
      yPercent: 0,
      duration: 0.8,
      ease: "power1.inOut",
    },
    "<"
  );

  await pageOutTl; // Wait for the animation to finish before changing page

  // destroySpline(); // Properly kill the Spline scene

  visit.continue(); // Only now allow Swup to change the page
});

swup.hooks.replace("animation:in:await", () => {
  return new Promise((resolve) => {
    const pageTransitionIn = gsap.timeline({
      onComplete: resolve, // ✅ resolves when animation completes
    });

    pageTransitionIn.set(".transition_holder", { display: "none" });
  });
});

swup.hooks.on("page:view", () => {
  init();
  initSpline(); // Reinitialize Spline on new page
  if (window.location.pathname.includes("/devices/")) {
    // Find other device links on the page and preload their videos
    setTimeout(() => {
      $('a[href*="/devices/"]').each(function () {
        const href = $(this).attr("href");
        if (href !== window.location.pathname) {
          preloadCMSVideo(href);
        }
      });
    }, 1000);
  }
});

swup.hooks.on("link:hover", (visit, { el }) => {
  console.log("Hovered:", el.href);
});

swup.hooks.on("page:preload", (visit, { page }) => {
  console.log("Preloaded:", page.url);
});