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')";

const lenis = new Lenis();

lenis.on("scroll", ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

lenis.stop();

gsap.config({
  nullTargetWarn: false,
});

const onDesktop = (fn) => gsap.matchMedia().add("(min-width: 992px)", fn);
const onMobile = (fn) => gsap.matchMedia().add("(max-width: 991px)", fn);

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",
  });
}

function introSplit() {
  // if (splitInstances.line) {
  //   splitInstances.line.revert();
  // }

  const introselectors = ["[introsplit]"];
  const introElements = document.querySelectorAll(introselectors.join(", "));
  splitInstances.intro = new SplitText(introElements, {
    type: "lines, words",
    linesClass: "line",
    wordsClass: "word",
  });
}

charSplit();
wordSplit();
introSplit();
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();
  }
});
$("a").on("click", function () {
  const $nav = $(".nav_dropdown");
  $nav.css("transition", "none");
  $nav.removeClass("show");
  requestAnimationFrame(() => {
    $nav.css("transition", "");
  });
  const $overlay = $(".nav_overlay");
  $overlay.css("transition", "none");
  $overlay.removeClass("show");
  requestAnimationFrame(() => {
    $nav.css("transition", "");
  });
});

$(".nav_dropdown_wrapper")
  .on("mouseenter", function () {
    $(".nav_overlay").addClass("show");
  })
  .on("mouseleave", function () {
    $(".nav_overlay").removeClass("show");
  });

$("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_overlay", { opacity: 0 });

let pageInTl = gsap.timeline({
  defaults: { duration: 1 },
});

let homeInTl = gsap.timeline({
  defaults: { duration: 1 },
});

function homeIn() {
  
  console.log("homeIn");
  homeInTl.fromTo(
    "[home-reveal] .line",
    {
      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,
      stagger: { each: 0.2 },
      ease: "expo.out",
    },
    "<+1"
  );

  homeInTl.fromTo(
    "[home-blur]",
    {
      opacity: 0,
    },
    {
      opacity: 1,
    },
    "<20%"
  );

  homeInTl.fromTo(
    "[home-btn]",
    {
      scale: 0.8,
      opacity: 0,
    },
    {
      scale: 1,
      opacity: 1,
      duration: 1,
      ease: bounceEase,
    },
    "<"
  );

  homeInTl.fromTo(
    ".trusted_logo_holder",
    {
      yPercent: 100,
      opacity: 0,
    },
    {
      yPercent: 0,
      opacity: 0.7,
      duration: 0.6,
      stagger: { each: 0.1 },
      ease: "expo.Out",
    },
    "<"
  );

  homeInTl.to(
    "[opacity-hover]",
    {
      opacity: 0.5,
      duration: 1,
      ease: "power1.out",
    },
    "<"
  );

  homeInTl.fromTo(
    "[half-blur]",
    {
      opacity: 0,
    },
    {
      opacity: 1,
      duration: 1,
      ease: "power1.out",
      onComplete: () => lenis.start(),
    },
    "<"
  );
}

if (document.querySelector(".nav_comp")) {
  pageInTl.fromTo(
    ".nav_comp",
    {
      opacity: 0,
      yPercent: -100,
    },
    {
      opacity: 1,
      yPercent: 0,
      duration: 1.2,
      ease: "expo.out",
    },
    "<30%"
  );
}

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

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

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

  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,
    },
    "<"
  );

  pageInTl.fromTo(
    "[page-in='rotate']",
    {
      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,
      stagger: { each: 0.2 },
      ease: "expo.out",
    },
    "<"
  );

  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",
    },
    "<"
  );

  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",
    },
    "<"
  );

  pageInTl.fromTo(
    "[page-in='reveal2'] .line",
    {
      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,
      stagger: { each: 0.2 },
      ease: "expo.out",
    },
    "<+50%"
  );

  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,
      stagger: { each: 0.15 },
      ease: "power4.out",
    },
    "<-20%"
  );

  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 "
      ),
    },
    "<"
  );

  pageInTl.fromTo(
    "[scroll='stagger'] > *",
    {
      yPercent: 100,
      opacity: 0,
    },
    {
      yPercent: 0,
      opacity: 0.7,
      duration: 2,
      stagger: { each: 0.2 },
    },
    "<"
  );
}

function hoverText() {
  console.log("hoverText");
  $(".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,
            });
          });
        }
      });
    }
  });
}

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,
    }
  );
}
//QUIZ
// 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);
// }
//QUIZ END

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() {
  // Click on footer_btn_left
  $(".footer_btn_left .spline-point").on("click", function (e) {
    e.stopPropagation();
    $(".footer_content_layer").addClass("hide");
    $(".contact_form_wrap").addClass("active");
  });

  // Click outside
  $(document).on("click", function (e) {
    if (!$(e.target).closest(".footer_btn_left").length) {
      $(".footer_content_layer").removeClass("hide");
      $(".contact_form_wrap").removeClass("active");
    }
  });

  let formDisabled = false;

  $(".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) {
      $(".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");
  });

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

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

  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" }
      );
    });
    $("[scroll='y-parallax-h']").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: -10 },
        { yPercent: 10, ease: "linear" }
      );
    });
  });

  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,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          yPercent: 100,
        },
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          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.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;
    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) * -20 * intensity;
        const rotateY =
          ((deltaX / rect.width) * 20 + baseRotationY) * intensity;
        const moveX = (deltaX / rect.width) * -100 * intensity;
        const moveY = (deltaY / rect.height) * 100 * 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() {
  console.log("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 }
        );
      });
    });
   
  });
}

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 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,
        }
      );

      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,
        });

        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: "clamp(top 70%)",
            end: "clamp(top 50%)",
            scrub: 0.3,
          },
        });

        tlSplitDown.fromTo(
          cashierHeading,
          {
            clipPath: "polygon(0% 0%, 110% 0%, 110% 0%, 0% 0%",
            yPercent: 100,
          },
          {
            clipPath: "polygon(0% 0%, 110% 0%, 110% 110%, 0% 110%)",
            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,
            clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          },
          {
            yPercent: 0,
            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%",
            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: "clamp(top 15%)",
              end: "clamp(top -50%)",
              scrub: 0.3,
            },
          });

          tlSplitUp.to(cashierHeading, {
            yPercent: -100,
            clipPath: "polygon(0% 110%, 110% 110%, 110% 110%, 0% 110%)",
            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,
            clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%",
            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 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,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          yPercent: 0,
          duration: 1,
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
          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,
      },
      {
        yPercent: 0,
        opacity: 1,
        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) {
        lastMouseX = e.clientX;
        lastMouseY = e.clientY;
        updateHeroGradient();
      });

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

function homeScripts() {
  onDesktop(() => {
    const riveConfigs = {
      payment: 'https://cdn.prod.website-files.com/678f61a520f4d267ba440e8d/678f61a520f4d267ba440f22_Payment%20v001%20001%20from%20Dillan.riv',
      button: 'https://cdn.prod.website-files.com/678f61a520f4d267ba440e8d/678f61a520f4d267ba440f25_Button%20v001%20002%20from%20Dillan.riv',
      network: 'https://cdn.prod.website-files.com/678f61a520f4d267ba440e8d/678f61a520f4d267ba440f20_Network%20v001%20001%20from%20Dillan.riv',
      support: 'https://cdn.prod.website-files.com/678f61a520f4d267ba440e8d/678f61a520f4d267ba440f24_Support%20v001%20001%20from%20Dillan.riv'
    };
  
    function initRiveAnimations() {
      document.querySelectorAll('[data-rive]').forEach(canvas => {
        const riveName = canvas.getAttribute('data-rive');
        const riveSrc = riveConfigs[riveName];
        let hasLoaded = false;
  
        const observer = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting && !hasLoaded) {
            hasLoaded = true;
            
            try {
              const riveInstance = new rive.Rive({
                src: riveSrc,
                canvas: canvas,
                autoplay: true,
                stateMachines: 'State Machine 1',
                fit: rive.Fit.Contain,
                alignment: rive.Alignment.Center,
                onLoad: () => {
                  canvas.style.opacity = '1';
                  
                  // Resize canvas to match display size for quality
                  const resizeCanvas = () => {
                    const rect = canvas.getBoundingClientRect();
                    const dpr = window.devicePixelRatio || 1;
                    canvas.width = rect.width * dpr;
                    canvas.height = rect.height * dpr;
                    riveInstance.resizeDrawingSurfaceToCanvas();
                  };
                  
                  resizeCanvas();
                  window.addEventListener('resize', resizeCanvas);
                  
                  console.log(`${riveName} loaded and interactive`);
                },
                onLoadError: (error) => {
                  console.error(`${riveName} load error:`, error);
                }
              });
            } catch (error) {
              console.error(`${riveName} init error:`, error);
            }
            
            observer.disconnect();
          }
        }, { rootMargin: '100px' });
  
        observer.observe(canvas);
      });
    }
  
    if (typeof rive !== 'undefined') {
      initRiveAnimations();
    } else {
      window.addEventListener('load', initRiveAnimations);
    }
  });

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


  //flowplay
  // 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",
  //     }
  //   );
  // });
  let isVideoPlaying = false;

  $(".hero_vid_thumb").on("click", function () {
    document.querySelector("[f-data-video='play-button']")?.click();
    isVideoPlaying = true;
  
    gsap.to(".full_vid_holder", {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
      pointerEvents: "auto",
      duration: 0.5,
      ease: "power2.out",
    });
  
    gsap.set(".model-close-m", {
      pointerEvents: "auto",
      display: "block",
    });
  });
  
  $(".full_vid_holder").on("click", function (e) {
    if (
      $(e.target).closest(".video-volume-embed, .video-volum-embed").length ||
      $(e.target).closest(".slider").length
    ) {
      return;
    }
  
    if (isVideoPlaying) {
      document.querySelector("[f-data-video='pause-button']")?.click();
      isVideoPlaying = false;
    } else {
      document.querySelector("[f-data-video='play-button']")?.click();
      isVideoPlaying = true;
    }
  
    gsap.set(".model-close-m", {
      pointerEvents: "auto",
      display: "block",
    });
  });
  
  $(".model-close-m").on("click", function (e) {
    e.stopPropagation();
  
    if (isVideoPlaying) {
      document.querySelector("[f-data-video='pause-button']")?.click();
    }
    isVideoPlaying = false;
  
    gsap.to(".full_vid_holder", {
      clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      pointerEvents: "none",
      duration: 0.5,
      ease: "power2.out",
    });
  
    gsap.set(".model-close-m", {
      pointerEvents: "none",
      display: "none",
    });
  });
  
  function visualVolumeSlider() {
    const wraps = document.querySelectorAll(
      ".video-volume-embed, .video-volum-embed"
    );
  
    wraps.forEach((wrap) => {
      const slider = wrap.querySelector(".slider");
      if (!slider) return;
  
      function setValueFromClick(e) {
        const rect = wrap.getBoundingClientRect();
        let pct = (e.clientX - rect.left) / rect.width;
        pct = Math.min(Math.max(pct, 0), 1);
  
        const min = parseFloat(slider.min) || 0;
        const max = parseFloat(slider.max) || 1;
        const step = parseFloat(slider.step) || 0.01;
  
        let val = min + pct * (max - min);
        val = Math.round(val / step) * step;
  
        slider.value = val;
        slider.dispatchEvent(new Event("input"));
      }
  
      wrap.addEventListener("click", setValueFromClick);
  
      wrap.addEventListener(
        "touchstart",
        (e) => {
          if (e.touches && e.touches[0]) setValueFromClick(e.touches[0]);
        },
        { passive: true }
      );
    });
  
    document.querySelectorAll(".slider").forEach((slider) => {
      slider.addEventListener("input", () => {
        const min = parseFloat(slider.min) || 0;
        const max = parseFloat(slider.max) || 1;
        const val = parseFloat(slider.value) || 0;
  
        const pct = ((val - min) / (max - min)) * 100;
  
        slider.style.backgroundImage = `linear-gradient(to right, white ${pct}%, rgba(255,255,255,.2) ${pct}%)`;
      });
  
      slider.dispatchEvent(new Event("input"));
    });
  }
  
  visualVolumeSlider();
  

  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 = trackWrap.find(".spline_track");
    let homeHero = trackWrap.find(".home_hero");
    let homeIntro = trackWrap.find(".home_intro");
    let homeSpline = trackWrap.find(".hero_spline");
    let introSpline = trackWrap.find(".intro_spline");
    let ringsSpline = trackWrap.find(".spline_rings");
    let heroOutWord = trackWrap.find("[hero-out]");
    let heroOutLine = trackWrap.find("[hero-out] .line");
    let heroFadeOut = trackWrap.find("[hero-fade-out]");
    let heroFadeOut2 = trackWrap.find("[hero-fade-out] .btn_main_wrap.hero");
    // let heroSelectText = trackWrap.find(".select_text");
    let heroBtnFadeOut = trackWrap.find("[hero-fade-out] .g_clickable_wrap");
    let homeIntroWord = trackWrap.find("[word-ani] .word");
    let homeIntroLine = trackWrap.find("[word-ani] .line");
    let pinTrack = trackWrap.find(".hero_spline_track");
    let homeSelect = trackWrap.find(".home_select");
    let selectText = trackWrap.find(".home_select_wrap");
    let selectHoverText = trackWrap.find(".select_text");
    let homeCommerce = trackWrap.find(".home_commerce_wrap");
    let commerceGradient = trackWrap.find(".commerce_gradient");
    let commerceHeading = trackWrap.find(".commerce_heading");
    let commerceBot = trackWrap.find(".commerce_bot");
    let headerFadeOut = trackWrap.find("[home-text]");
    let introMobile = trackWrap.find("[mobile-intro-ani]");
// onDesktop(() => {
    ScrollTrigger.create({
      trigger: homeIntro,
      start: "top top",
      end: "bottom top",
      // endTrigger: heroTrigger,
      pin: homeIntro,
      pinSpacing: true,
      scrub: true,
    });

    ScrollTrigger.create({
      trigger: homeSelect,
      start: "top top",
      end: "bottom 60%",
      endTrigger: heroTrigger,
      pin: homeSelect,
      pinSpacing: true,
      scrub: true,
    });

    // let heroFadeOutAnimation = gsap.timeline({
    //   scrollTrigger: {
    //     trigger: heroTrigger,
    //     start: "top top",
    //     end: "top -10%",
    //     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 top",
    //     end: "top -10%",
    //     scrub: true,
    //   },
    // });

    // heroOutWordAnimation.to(heroOutLine, {
    //   opacity: 0,
    //   yPercent: -100,
    //   clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
    //   stagger: { each: 0.05 },
    //   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: homeIntro,
          start: "top 0%",
          end: "bottom 0%",
          scrub: true,
        },
      });

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

      let lineIntroAnimation = gsap.timeline({
        scrollTrigger: {
          trigger: homeIntro,
          start: "top 0%",
          end: "bottom 0%",
          scrub: true,
        },
      });

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

      let colorIntroAnimation = gsap.timeline({
        scrollTrigger: {
          trigger: homeIntro,
          start: "top 00%",
          end: "bottom 0%",
          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: homeSelect,
          start: "top 100%",
          end: "30% 100%",
          endTrigger: homeSelect,
          scrub: true,
        },
      });

      introOutWordAnimation.to(homeIntroWord, {
        opacity: 0,
        stagger: { amount: 0.1 },
      });
      introOutWordAnimation.to(
        homeIntroLine,
        {
          yPercent: -300,
          stagger: { amount: 0.15 },
        },
        "<"
      );
      // let introOutLineAnimation = gsap.timeline({
      //   scrollTrigger: {
      //     trigger: homeSelect,
      //     start: "top 90%",
      //     end: "top 20%",
      //     scrub: true,
      //   },
      // });
    });

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

      mobileIntroAni.to(introMobile, {
        opacity: 0,
        yPercent: -40,
      });
    });
    onDesktop(() => {
    let homeSelectFadeIn = gsap.timeline({
      scrollTrigger: {
        trigger: homeSelect,
        start: "top top",
        end: "center 150%",
        endTrigger: heroTrigger,
        scrub: true,
        // toggleActions: "play reverse play reverse",
      },
    });

    homeSelectFadeIn.fromTo(
      homeSelect,
      {
        opacity: 0,
        scale: 4.4,
      },
      {
        opacity: 1,
        scale: 1,
        ease: stdEase,
      }
    );

    let textSelectFadeIn = gsap.timeline({
      scrollTrigger: {
        trigger: heroTrigger,
        start: "27% 50%",
        end: "27% 30%",
        scrub: true,
      },
    });

    textSelectFadeIn.fromTo(
      selectText,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        ease: "expo.out",
      }
    );
    textSelectFadeIn.to(
      selectHoverText,
      {
        pointerEvents: "auto",
      },
      "<"
    );

    let homeSelectFadeOut = gsap.timeline({
      scrollTrigger: {
        trigger: heroTrigger,
        start: "30% 0%",
        end: "31% 0%",
        scrub: true,
      },
    });

    homeSelectFadeOut.to(selectText, {
      opacity: 0,
    });
    homeSelectFadeOut.to(
      selectHoverText,
      {
        pointerEvents: "none",
      },
      "<"
    );

    let homeSelectZoomIn = gsap.timeline({
      scrollTrigger: {
        trigger: heroTrigger,
        start: "31% 0%",
        end: "60% 0%",
        scrub: true,
      },
    });

    homeSelectZoomIn.to(ringsSpline, {
      scale: 4.2,
    });
  });
    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: "31% 100%",
          end: "35% 100%",
          scrub: true,
        },
      });

      commerceGradientFadeIn.fromTo(
        commerceGradient,
        {
          opacity: 0,
        },
        {
          opacity: 1,
        }
      );

      let commerceHeadingFadeIn = gsap.timeline({
        scrollTrigger: {
          trigger: heroTrigger,
          start: "40% 100%",
          end: "45% 0%",
          scrub: true,
        },
      });

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

      let commerceBotFadeIn = gsap.timeline({
        scrollTrigger: {
          trigger: heroTrigger,
          start: "50% 100%",
          end: "52% 100%",
          scrub: true,
        },
      });

      commerceBotFadeIn.fromTo(
        commerceBot,
        {
          opacity: 0,
        },
        {
          opacity: 1,
        }
      );
    });
    // 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 deviceScript() {
  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 cashierScript() {
  lenis.stop();
  cashierHeroSpin();
  stdSwiper();
  perspectiveModal();

  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();
  heroInset();
  cashierHeroSpin();
  stdSwiper();
  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,
      },
    });
  });
}

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

  $(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();
}

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

  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() {
  cashierHeroSpin();
  heroInset();
  stdSwiper();
  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 networkScript() {
  function autoScroll() {
    $("html, body").animate(
      {
        scrollTop: 0,
      },
      500
    );
  }
  autoScroll();
  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");
    let insetBg = networkWrap.find(".network_section_bg");
    let scrollTriggerRefresh = $("[data-scrolltrigger-refresh]");

    onDesktop(() => {
      ScrollTrigger.create({
        trigger: networkWrapPin,
        start: "clamp(top bottom)",
        end: "clamp(bottom bottom)",

        onEnter: () => {
          networkSpline.removeClass("h-hide");
          ScrollTrigger.refresh();
        },
      });

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

      let insetTl = gsap.timeline({
        scrollTrigger: {
          trigger: insetBg,
          start: "clamp(top center)",
          end: "clamp(top top)",
          scrub: true,
        },
      });

      insetTl.to(networkWrapPin, {
        clipPath:
          "polygon(0rem 0, calc(100% - 0rem) 0, calc(100% - 0rem) 100%, 0rem 100%)",
      });

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

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

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

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

      partnersCardIn.fromTo(
        partnersCard,
        {
          opacity: 0,
          yPercent: 10,
        },
        {
          yPercent: 0,
          opacity: 1,
          stagger: { each: 0.01 },
          duration: 0.2,
          ease: stdEase,
        },
        "<"
      );
      let splineFinalIn = gsap.timeline({
        scrollTrigger: {
          trigger: networkPinTrigger,
          start: "clamp(80% 100%)",
          end: "clamp(85% 100%)",
          scrub: true,
        },
      });
      let splineGradientIn = gsap.timeline({
        scrollTrigger: {
          trigger: networkPinTrigger,
          start: "clamp(85% 100%)",
          end: "clamp(95% 100%)",
          scrub: true,
        },
      });

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

      splineGradientIn.fromTo(
        gradientOutro,
        {
          opacity: 0,
        },
        {
          opacity: 0.2,
        },
        "<"
      );
    });
  });

  const slideSwiper = new Swiper(".swiper.h-swiper-slides", {
    slidesPerView: 1,
    autoplay: {
      delay: 4000,
    },
    effect: "fade",
    fadeEffect: {
      crossFade: true,
    },
    loop: true,
    pagination: {
      el: document.querySelector(".about_swiper_pagination_wrap"),
      bulletActiveClass: "active",
      bulletClass: "about_swiper_pagination_el",
      bulletElement: "button",
      clickable: true,
      type: "custom",
      currentClass: "active",
    },
  });
}

networkScript();
stickySection();

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;

    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();
  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() {
  $(".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);
      }
    });
  });


  $(".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 preloader() {
  lenis.stop();
  let preloadPercent = gsap.timeline({
    onStart: () => {
      lenis.stop();
      $(".page_main").scrollTop(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();
    },
    onStart: () => {
      $(".body").removeClass("home-page");
      $(".transition").addClass("is-black");
    },
  });

  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: () => {
        homeIn();
      },
      onComplete: () => {
        $(".body").removeClass("home-page");
      },
    },

    "<+5"
  );
  preloadPercent.to(
    ".preloader",
    {
      scale: 1.4,
      duration: 1,
    },
    "<-1"
  );
  preloadPercent.to(".preloader_wrap", {
    display: "none",
    onComplete: () => {
      $(".transition").removeClass("is-black");
    },
  });
}

globalScript();

// PAGES //
$("[data-barba-namespace='home']").each(function () {
  if (!sessionStorage.getItem("preloaderPlayed")) {
    lenis.stop();
    preloader();
    $("body").addClass("no-load");
    setTimeout(function () {
      $("body").removeClass("no-load");
    }, 5000);

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

    sessionStorage.setItem("preloaderPlayed", "true");
  } else {
    document.querySelector(".preloader_wrap").style.display = "none";
    lenis.stop();
    setTimeout(() => {
      // lenis.start();
    }, 3500);
    homeIn();
    // lenis.start();
  }
  homeScripts();
  stdSwiper();
  clipSwiper();
});

$("[data-barba-namespace='device']").each(function () {
  lenis.start();
  deviceScript();
});
$("[data-barba-namespace='cashier']").each(function () {
  cashierScript();
});
$("[data-barba-namespace='paycloud']").each(function () {
  paycloudScript();
});
$("[data-barba-namespace='tms']").each(function () {
  lenis.start();
  tmsScript();
});
$("[data-barba-namespace='onboarding']").each(function () {
  lenis.start();
  onboardingScript();
});
$("[data-barba-namespace='collections']").each(function () {
  lenis.start();
  collectionsScript();
});
$("[data-barba-namespace='ecom']").each(function () {
  ecomScript();
});
$("[data-barba-namespace='partners']").each(function () {
  lenis.start();
  partnersScript();
});
$("[data-barba-namespace='incubation']").each(function () {
  lenis.start();
  incubationScript();
});
$("[data-barba-namespace='support']").each(function () {
  supportScript();
});
$("[data-barba-namespace='about']").each(function () {
  lenis.start();
  aboutScript();
});

window.addEventListener("load", () => {
  window.scrollTo(0, 0);
});