gsap.registerPlugin(ScrollTrigger, SplitText, CustomEase);
let transitionDuration = 1;
let mm = gsap.matchMedia();

CustomEase.create("primary-ease", "M0,0 C0.15,0 0.15,1 1,1");
CustomEase.create(
  "loaderEase",
  "M0,0,C0,0,0.13,0.34,0.238,0.442,0.305,0.506,0.322,0.514,0.396,0.54,0.478,0.568,0.468,0.56,0.522,0.584,0.572,0.606,0.61,0.719,0.714,0.826,0.798,0.912,1,1,1,1"
);
const lenis = new Lenis({
  syncTouch: true,
  syncTouchLerp: 0.075,
  touchInertiaExponent: 1.7,
  touchMultiplier: 1,
});

lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

let counter = {
  value: 0,
};

let splitText;

function runSplit() {
  splitText = new SplitText("[charsplit]", {
    type: "chars, words, lines",
    linesClass: "s-line",
    wordsClass: "s-word",
    charsClass: "s-char",
  });
}
// runSplit();

//End Global Functions
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
  if (windowWidth !== $(window).innerWidth()) {
    windowWidth = $(window).innerWidth();
    splitText.revert();
    runSplit();
    // globalFunctions();
  }
});

lenis.on("scroll", ({ scroll, direction }) => {
  if (direction === 1) {
    menuHide.play();
  } else if (direction === -1) {
    if (!isAnimatingScroll) {
      menuHide.reverse();
    }
  }
});

function mapScripts() {
  // Function to handle updating data, including the image src
  function updateProjectData(data, targets) {
    targets.name.text(data.name);
    targets.type.text(data.type);
    targets.status.text(data.status);
    targets.location.text(data.location);
    targets.capacity.text(data.capacity);
    targets.contribution.text(data.contribution);
    targets.operating.text(data.operating);
    targets.writeup.text(data.writeup);
    targets.prevImg.attr("src", data.prevImg);
  }
  $(".map-points_item").each(function () {
    var xaxis = $(this).attr("xaxis");
    var yaxis = $(this).attr("yaxis");
    $(this).css({
      left: xaxis,
      top: yaxis,
    });
  });
  $(".map-section").each(function () {
    let mapEl = $(this);
    let mapPins = $(this).find(".map-points_item");
    let projectItems = $(this).find(".project-data_item");
    let itemCount = projectItems.length;
    //TOTAL WIND ITEMS
    let windItems = $(this).find(".project-data_item[p-data_type='Wind']");
    let windItemCount = windItems.length;

    //TOTAL SOLAR ITEMS
    let solarItems = $(this).find(".project-data_item[p-data_type='Solar']");
    let solarItemCount = solarItems.length;

    //TOTAL OPERATIONAL ITEMS
    let operationalItems = $(this).find(
      ".project-data_item[p-data_status='Operational']"
    );
    let operationalItemCount = operationalItems.length;

    //TOTAL PIPELINE ITEMS
    let pipelineItems = $(this).find(
      ".project-data_item[p-data_status='Pipeline']"
    );
    let pipelineItemCount = pipelineItems.length;

    let itemTotal = $(this).find("[project-count]");
    let windTotal = $(this).find("[wind-total-count]");
    let solarTotal = $(this).find("[solar-total-count]");
    let operationalTotal = $(this).find("[operational-total-count]");
    let pipelineTotal = $(this).find("[pipeline-total-count]");

    let menuItems = $(this).find(".project-menu_item");
    let mapBackBtn = $(".project-back-btn");

    itemTotal.text(itemCount);
    windTotal.text(windItemCount);
    solarTotal.text(solarItemCount);
    operationalTotal.text(operationalItemCount);
    pipelineTotal.text(pipelineItemCount);

    let dataTargets = {
      name: $(this).find("[p-data-target='name']"),
      type: $(this).find("[p-data-target='type']"),
      status: $(this).find("[p-data-target='status']"),
      location: $(this).find("[p-data-target='location']"),
      capacity: $(this).find("[p-data-target='capacity']"),
      contribution: $(this).find("[p-data-target='contribution']"),
      operating: $(this).find("[p-data-target='operating']"),
      writeup: $(this).find("[p-data-target='writeup']"),
      prevImg: $(this).find(".project-preview_img"),
    };

    // Helper function to check if preview image exists and manage no-prev class
    function checkPreviewImage(projectElement) {
      let projectThumb = projectElement.find(".project-thumb");
      if (projectThumb.hasClass("w-condition-invisible")) {
        mapEl.addClass("no-prev");
      } else {
        mapEl.removeClass("no-prev");
      }
    }

    // Helper function to remove no-prev class
    function clearPreviewState() {
      mapEl.removeClass("no-prev");
    }

    mapBackBtn.on("click", function () {
      $(".project-single_item").removeClass("is-active");
      $(".map-point").removeClass("active");
      $(".map-points_item").removeClass("inactive");
      $(".map-points_item").removeClass("active");
      mapEl.removeClass("show-popup");
      clearPreviewState(); // Clear no-prev class when closing popup
      lenis.start();
    });

    // Loop through each project item
    projectItems.each(function () {
      let projectData = {
        name: $(this).find(".project-data_name").text(),
        type: $(this).attr("p-data_type"),
        status: $(this).attr("p-data_status"),
        location: $(this).attr("p-data_location"),
        capacity: $(this).attr("p-data_capacity"),
        contribution: $(this).attr("p-data_contribution"),
        operating: $(this).attr("p-data_operating"),
        writeup: $(this).attr("p-data_writeup"),
        prevImg: $(this).find(".project-thumb").attr("src"), // Image src to be updated
      };

      // Attach event listener for hovering on the projectItems
      $(this).on("mouseenter", function () {
        updateProjectData(projectData, dataTargets);
        checkPreviewImage($(this));
      });

      // Add mouseleave event for project items
      $(this).on("mouseleave", function () {
        clearPreviewState();
      });

      menuItems.on("mouseenter", function () {
        mapEl.attr("map-state", "menu-info");
        let menuItemText = $(this).find(".project-menu_text").text().trim();
        if (menuItemText === projectData.name.trim()) {
          updateProjectData(projectData, dataTargets);
          // Find the matching project element to check for preview image
          let matchingProjectElement = mapEl.find(
            `.project-data_item:has(.project-data_name:contains("${projectData.name}"))`
          );
          checkPreviewImage(matchingProjectElement);
        }
        let matchingMapPoint = mapEl.find(
          `.map-overview .map-points_item[map-point='${menuItemText}'] .map-point`
        );
        matchingMapPoint.addClass("active");
      });

      menuItems.on("mouseleave", function () {
        mapEl.attr("map-state", "initial");
        mapEl.find(".map-overview .map-point").removeClass("active");
        clearPreviewState();
      });

      function activateMenuItemAndPopup(menuItemText) {
        let matchingMapPoint = mapEl.find(
          `.map-points_list .map-points_item[map-point='${menuItemText}']`
        );
        $(".map-points_item").addClass("inactive");
        matchingMapPoint.removeClass("inactive").addClass("active");
        matchingMapPoint.find(".map-point").addClass("active");

        // Activate matching popup
        let matchingPopup = mapEl.find(
          `.project-single_item[popup-id='${menuItemText}']`
        );
        matchingPopup.addClass("is-active");
        mapEl.addClass("show-popup");
        menuHide.play();
        // Set flag to prevent menuHide from triggering
        isAnimatingScroll = true;

        // Scroll to map section then stop
        lenis.scrollTo(".map-section", {
          duration: 0.4,
          immediate: false,
          onComplete: () => {
            lenis.stop();
            setTimeout(() => {
              isAnimatingScroll = false;
            }, 400);
          },
        });
      }

      menuItems.on("click", function () {
        let menuItemText = $(this).find(".project-menu_text").text().trim();
        activateMenuItemAndPopup(menuItemText);
        if ($(this).closest("[solar-projects]").length) {
          $(".project-current").attr("solar-projects", "");
          $(".project-current").removeAttr("wind-projects", "");
          $(".project-current").removeAttr("hydro-projects", "");
        }

        if ($(this).closest("[wind-projects]").length) {
          $(".project-current").attr("wind-projects", "");
          $(".project-current").removeAttr("solar-projects", "");
          $(".project-current").removeAttr("hydro-projects", "");
        }

        if ($(this).closest("[hydro-projects]").length) {
          $(".project-current").attr("hydro-projects", "");
          $(".project-current").removeAttr("wind-projects", "");
          $(".project-current").removeAttr("solar-projects", "");
        }
      });

      // When clicking on a map point
      mapPins.on("click", function () {
        let mapPointText = $(this)
          .closest(".map-points_item")
          .attr("map-point")
          .trim();
        activateMenuItemAndPopup(mapPointText);
        if ($(this).attr("point-type") === "Solar") {
          $(".project-current").attr("solar-projects", "");
          $(".project-current").removeAttr("wind-projects", "");
          $(".project-current").removeAttr("hydro-projects", "");
        }
        if ($(this).attr("point-type") === "Wind") {
          $(".project-current").attr("wind-projects", "");
          $(".project-current").removeAttr("solar-projects", "");
          $(".project-current").removeAttr("hydro-projects", "");
        }
        if ($(this).attr("point-type") === "Hydro") {
          $(".project-current").attr("hydro-projects", "");
          $(".project-current").removeAttr("wind-projects", "");
          $(".project-current").removeAttr("solar-projects", "");
        }
        // else {
        //   $(".project-current").removeAttr("solar-projects");
        // }
      });

      mapPins.on("mouseenter", function () {
        mapEl.attr("map-state", "menu-info");
        let mapPinText = $(this).attr("map-point");
        if (mapPinText === projectData.name.trim()) {
          updateProjectData(projectData, dataTargets);
          // Find the matching project element to check for preview image
          let matchingProjectElement = mapEl.find(
            `.project-data_item:has(.project-data_name:contains("${projectData.name}"))`
          );
          checkPreviewImage(matchingProjectElement);
        }
        if ($(this).attr("point-type") === "Solar") {
          $(".project-hover").attr("solar-projects", "");
          $(".project-hover").removeAttr("wind-projects");
          $(".project-hover").removeAttr("hydro-projects");
        }

        if ($(this).attr("point-type") === "Wind") {
          $(".project-hover").attr("wind-projects", "");
          $(".project-hover").removeAttr("solar-projects");
          $(".project-hover").removeAttr("hydro-projects");
        }

        if ($(this).attr("point-type") === "Hydro") {
          $(".project-hover").attr("hydro-projects", "");
          $(".project-hover").removeAttr("solar-projects");
          $(".project-hover").removeAttr("wind-projects");
        }
      });

      // mapPins.on("click", function () {});

      mapPins.on("mouseleave", function () {
        mapEl.attr("map-state", "initial");
        clearPreviewState();
        // $(this).removeAttr("solar-projects");
        // $(this).removeAttr("wind-projects");
      });

      $("[solar-projects]").on("mouseenter", function () {
        $(".project-hover").attr("solar-projects", "");
        $(".project-hover").removeAttr("wind-projects");
        $(".project-hover").removeAttr("hydro-projects");
      });

      $("[wind-projects]").on("mouseenter", function () {
        $(".project-hover").attr("wind-projects", "");
        $(".project-hover").removeAttr("solar-projects");
        $(".project-hover").removeAttr("hydro-projects");
      });

      $("[hydro-projects]").on("mouseenter", function () {
        $(".project-hover").attr("hydro-projects", "");
        $(".project-hover").removeAttr("solar-projects");
        $(".project-hover").removeAttr("wind-projects");
      });
    });
  });
}

function teamScripts() {
  mm.add("(min-width: 992px)", () => {
    let featuresHolder = $("[hover-toggle]");
    featuresHolder.on("mouseenter", function () {
      $(this).addClass("show-visual");
    });
    featuresHolder.on("mouseleave", function () {
      $(this).removeClass("show-visual");
    });
    gsap.set(".team-cursor", { yPercent: -50 });
    let yTo = gsap.quickTo(".team-cursor", "y", {
      duration: 0.6,
      ease: "power3.out",
    });

    window.addEventListener("mousemove", (e) => {
      yTo(e.clientY);
    });
  });

  let featureTitles = $("[hover-toggle-item]");
  let featureSlides = $("[hover-toggle-img]");
  let setZ = 1;
  let lastHoveredIndex = null;

  featureTitles.each(function (index) {
    let currentImg = featureSlides.eq(index);
    let hasCompleted = false;
    let featuresTl = gsap.timeline({
      paused: true,
      onComplete: function () {
        hasCompleted = true;
      },
    });

    // Mouse Enter Event
    mm.add("(min-width: 992px)", () => {
      $(this).on("mouseenter", function () {
        $(this).addClass("active");
        if (!hasCompleted || lastHoveredIndex !== index) {
          if (featuresTl.progress() === 1) {
            featuresTl.restart();
          } else {
            featuresTl.play();
          }
          setZ = setZ + 1;
          gsap.set(currentImg, {
            zIndex: setZ,
          });
        }
        lastHoveredIndex = index;
      });

      // Mouse Leave Event
      $(this).on("mouseleave", function () {
        $(this).removeClass("active");
      });
    });
    mm.add("(max-width: 991px)", () => {
      let featuresMobile = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top center",
          end: "bottom center",
          onEnter: () => {
            $(this).addClass("active");
          },
          onLeave: () => {
            $(this).removeClass("active");
          },
          onEnterBack: () => {
            $(this).addClass("active");
          },
          onLeaveBack: () => {
            $(this).removeClass("active");
          },
        },
      });
    });
  });

  $(".structure-el").each(function () {
    let structureEl = $(this);
    let stickyPanel = structureEl.find(".structure-item");
    let stickyElements = structureEl.find(".structure-contents_item");

    stickyPanel.each(function (index) {
      let stickyPanelEl = $(this);
      let bgGrow = stickyPanelEl.find(".structure-img_holder");
      let bgOverlay = stickyPanelEl.find(".structure-overlay");
      let altTrigger = stickyPanelEl.find(".structure-trigger");
      let imgEl = bgGrow.find(".img-fill");
      let relatedContent = stickyElements.eq(index);
      let numberEl = relatedContent.find(".structure-number");
      let numberChars = numberEl.find(".s-char");
      let paragraphEl = relatedContent.find(".structure-head");
      let contentLines = paragraphEl.find(".s-line");

      let stickyAnimations = gsap.timeline({
        scrollTrigger: {
          trigger: stickyPanelEl,
          start: "top bottom",
          end: "top top",
          scrub: true,
        },
      });
      mm.add("(min-width: 992px)", () => {
        stickyAnimations.fromTo(
          bgGrow,
          {
            scaleX: 0.9,
            clipPath:
              "polygon(5rem 0%, calc(100% - 5rem) 0%, 100% 5rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 5rem)",
          },
          {
            scaleX: 1,
            clipPath:
              "polygon(0rem 0%, calc(100% - 0rem) 0%, 100% 0rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0rem)",
            ease: "linear",
          }
        );
      });
      mm.add("(max-width: 991px)", () => {
        stickyAnimations.fromTo(
          bgGrow,
          {
            scaleX: 0.9,
            clipPath:
              "polygon(2.5rem 0%, calc(100% - 2.5rem) 0%, 100% 2.5rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 2.5rem)",
          },
          {
            scaleX: 1,
            clipPath:
              "polygon(0rem 0%, calc(100% - 0rem) 0%, 100% 0rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0rem)",
            ease: "linear",
          }
        );
      });
      let stickyContentToggle = gsap.timeline({
        scrollTrigger: {
          trigger: stickyPanelEl,
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
      });
      stickyContentToggle.fromTo(
        relatedContent,
        {
          opacity: 0,
        },
        {
          opacity: 1,
        }
      );
      stickyContentToggle.fromTo(
        numberChars,
        {
          yPercent: 110,
        },
        {
          yPercent: 0,
          stagger: 0.05,
        },
        "<"
      );
      stickyContentToggle.fromTo(
        contentLines,
        {
          yPercent: 50,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        },
        {
          yPercent: 0,
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          stagger: 0.05,
        },
        "<"
      );
      stickyContentToggle.fromTo(
        relatedContent,
        {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
        },
        {
          ease: "linear",
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
        }
      );
      stickyContentToggle.fromTo(
        bgOverlay,
        {
          opacity: 0,
        },
        {
          ease: "linear",
          opacity: 0.5,
        },
        "<"
      );

      stickyContentToggle.fromTo(
        imgEl,
        {
          scale: 1.15,
          yPercent: 0,
        },
        {
          scale: 1.1,
          yPercent: -10,
          ease: "linear",
        },
        "<"
      );

      let stickyBgTl2 = gsap.timeline({
        scrollTrigger: {
          trigger: altTrigger,
          start: "bottom top",
          end: "bottom -100%",
          scrub: true,
        },
      });
      mm.add("(min-width: 992px)", () => {
        stickyBgTl2.to(bgGrow, {
          y: "100vh",
          ease: "linear",
        });
        stickyBgTl2.fromTo(
          imgEl,
          {
            yPercent: -10,
            scale: 1.1,
          },
          {
            yPercent: -20,
            scale: 1,
            immediateRender: false,
            ease: "linear",
          },
          "<"
        );
      });
      stickyBgTl2.fromTo(
        bgOverlay,
        {
          opacity: 0.5,
        },
        {
          opacity: 1,
          immediateRender: false,
          ease: "linear",
        },
        "<"
      );
    });
  });

  $(".team-filters_item:first").addClass("is-active");
  filterTeams($(".team-filters_item:first"));

  $(".team-filters_item").on("click", function () {
    let teamFilterTl = gsap.timeline({
      defaults: {
        ease: "primary-ease",
        duration: 0.4,
      },
    });
    teamFilterTl.to(teamItems, {
      opacity: 0,
      onComplete: () => {
        filterTeams($(this));
        ScrollTrigger.refresh();
      },
    });
    teamFilterTl.to(teamItems, {
      opacity: 1,
    });
  });

  let teamItems = $(".team-list");

  function filterTeams($filterItem) {
    $(".team-filters_item").removeClass("is-active");
    $filterItem.addClass("is-active");
    var filterText = $filterItem.find(".team-text").text().trim();
    $(".team-item").removeClass("is-active");
    $(".team-item").each(function () {
      var departmentText = $(this).find(".team-department").text().trim();
      if (departmentText === filterText) {
        $(this).addClass("is-active");
      }
    });
  }
}

function accordionScripts() {
  let accordionTl = [];
  let accordionCurrent = -1;

  $("[accordion-item]").each(function (index) {
    let accordionTrigger = $(this);
    let accordionContent = $(this).find(".team-dropdown");
    let accordionContentFade = $(this).find(".team-dropdown_content");
    let accordionItem = $(this);
    let accordionDropdownTl = gsap.timeline({
      paused: true,
      onComplete: () => {
        ScrollTrigger.refresh();
      },
      onReverseComplete: () => {
        ScrollTrigger.refresh();
      },
    });
    accordionDropdownTl.to(accordionContent, {
      height: "auto",
      duration: 0.4,
      ease: "power2.inOut",
    });

    accordionDropdownTl.fromTo(
      accordionContentFade,
      {
        y: "5rem",
        opacity: 0,
      },
      {
        opacity: 1,
        y: "0rem",
        ease: "power4.out",
        duration: 1,
      },
      "<"
    );
    accordionTl.push(accordionDropdownTl);

    accordionTrigger.on("click", function () {
      if (accordionCurrent === index) {
        accordionDropdownTl.reverse();
        accordionItem.removeClass("is-open");
        accordionCurrent = -1;
      } else {
        // Close all open accordions
        $("[accordion-item]").each(function (i) {
          if (i !== index && $(this).hasClass("is-open")) {
            accordionTl[i].reverse();
            $(this).removeClass("is-open");
          }
        });

        accordionDropdownTl.play();
        accordionItem.addClass("is-open");
        accordionCurrent = index;
      }
    });
  });
}

function newsScripts() {
  $(".news-col_item").on("mouseenter", function () {
    $(this).addClass("hovered");
  });

  $(".news-col_item").on("mouseleave", function () {
    $(this).removeClass("hovered");
  });
}

function homeScripts() {
  // toggleDarkTheme("add");
  $(".scroll_horizontal_wrap").each(function () {
    let wrap = $(this);
    let inner = $(this).find(".scroll_horizontal_inner");
    let track = $(this).find(".scroll_horizontal_track");
    let cards = $(this).find(".scroll_horizontal_card");
    // set section height
    function setScrollDistance() {
      wrap.css("height", "calc(" + track.outerWidth() + "px + 100vh)");
    }
    setScrollDistance();
    // ScrollTrigger.refresh();
    window.addEventListener("resize", setScrollDistance);

    let horizontalTl = gsap.timeline({
      scrollTrigger: {
        trigger: wrap,
        start: "top top",
        end: "bottom bottom",
        scrub: true,
      },
      defaults: { ease: "none" },
    });
    horizontalTl.to(track, { xPercent: -100 });

    cards.each(function (index) {
      let cardNumberEl = $(this).find(".scroll-number");
      let cardNumberChars = cardNumberEl.find(".s-char");
      let firstNum = $(this).find(".first-scroll_number");
      let firstNumChars = firstNum.find(".s-char");
      //
      let cardHeadingEl = $(this).find(".u-text-large_horizontal");
      let cardScrollLines = cardHeadingEl.find(".s-line");
      let cardImgEl = $(this).find(".u-cover-absolute");
      let firstCard = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top center",
          end: "bottom center",
          toggleActions: "play none none none",
        },
        defaults: { ease: "none" },
      });
      if (firstNumChars.length > 0) {
        firstCard.fromTo(
          firstNumChars,
          {
            opacity: 0,
            rotationX: -90,
            yPercent: 50,
          },
          {
            opacity: 1,
            rotationX: 0,
            yPercent: 0,
            duration: 1.2,
            ease: "circ.out",
            stagger: {
              each: 0.1,
            },
          }
        );
      }

      let cardAnimationsTl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "left right",
          end: "right left",
          containerAnimation: horizontalTl,
          toggleActions: "play none none none",
        },
        defaults: { ease: "none" },
      });

      if (cardNumberChars.length > 0) {
        cardAnimationsTl.fromTo(
          cardNumberChars,
          {
            // "will-change": "opacity, transform",
            opacity: 0,
            rotationX: -90,
            yPercent: 50,
          },
          {
            opacity: 1,
            rotationX: 0,
            yPercent: 0,
            duration: 1.2,
            ease: "circ.out",
            stagger: {
              each: 0.1,
            },
          }
        );
      }
      if (cardScrollLines.length > 0) {
        cardAnimationsTl.fromTo(
          cardScrollLines,
          {
            yPercent: 50,
            clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          },
          {
            yPercent: 0,
            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
            ease: "circ.out",
            duration: 1,
            stagger: 0.1,
          },
          "<"
        );
      }

      if (cardImgEl.length > 0) {
        cardAnimationsTl.fromTo(
          cardImgEl,
          {
            xPercent: 0,
          },
          {
            xPercent: -10,
            ease: "none",
            scrollTrigger: {
              trigger: $(this),
              start: "left right",
              end: "right left",
              containerAnimation: horizontalTl,
              scrub: true,
            },
          },
          0
        );
      }
    });
  });
  function attr(defaultVal, attrVal) {
    const defaultValType = typeof defaultVal;
    if (typeof attrVal !== "string" || attrVal.trim() === "") return defaultVal;
    if (attrVal === "true" && defaultValType === "boolean") return true;
    if (attrVal === "false" && defaultValType === "boolean") return false;
    if (isNaN(attrVal) && defaultValType === "string") return attrVal;
    if (!isNaN(attrVal) && defaultValType === "number") return +attrVal;
    return defaultVal;
  }
  // marquee component
  $("[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 }
      );
    }
  });

  $(".hiw-section").each(function () {
    let hiwSection = $(this);
    let layout = hiwSection.find(".hiw-layout");
    let indicator = hiwSection.find(".hiw-progress_indicator");
    let hiwImgs = layout.find(".hiw-img_item").hide();
    let items = layout.find(".hiw-list_item");
    let hiwEndTrig = hiwSection.find(".hiw-trigger");
    let itemContent = layout.find(".hiw-content_item").hide();
    let totalSlides = hiwImgs.length;
    let activeIndex = 0;
    let isAnimating = false; // Prevent animation conflicts

    layout.find(".hiw-item_total").text(totalSlides);

    // Initial setup
    hiwImgs.first().css({
      display: "flex",
      clipPath:
        "polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%)",
    });
    items.first().addClass("is-active");
    itemContent.first().addClass("is-active").css("display", "flex");

    // Add item numbers
    items.each(function (index) {
      $(this)
        .find(".hiw-item_number")
        .text(index + 1);
    });

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

      // Hide all content and images first
      itemContent.removeClass("is-active").hide();
      hiwImgs.hide();

      let nextItem = hiwImgs.eq(nextIndex).css("display", "flex");
      let nextContent = itemContent
        .eq(nextIndex)
        .css("display", "flex")
        .addClass("is-active");

      let tl = gsap.timeline({
        defaults: { duration: 0.4, ease: "power2.out" },
        onComplete: () => {
          isAnimating = false;
        },
      });

      // Simplified animation - same for both directions
      tl.set(nextItem, { zIndex: 1 })
        .fromTo(
          nextItem,
          {
            rotateX: "90deg",
            clipPath:
              "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
          },
          {
            rotateX: "0deg",
            clipPath:
              "polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%)",
          }
        )
        .fromTo(
          nextContent.find(".u-text-small"),
          { opacity: 0 },
          { opacity: 1, duration: 0.3 },
          "<0.2"
        )
        .fromTo(
          nextContent.find(".hiw-content_title .s-word"),
          { opacity: 0, yPercent: 50 },
          { opacity: 1, yPercent: 0, stagger: 0.03, duration: 0.3 },
          "<"
        );

      activeIndex = nextIndex;
    }

    function updateSlide(newIndex) {
      if (newIndex === activeIndex || isAnimating) return;

      // Update active states
      items.removeClass("is-active");
      items.eq(newIndex).addClass("is-active");

      moveSlide(newIndex, newIndex > activeIndex);
    }

    let steps = Math.max(1, totalSlides - 1);

    // Desktop version
    mm.add("(min-width: 992px)", () => {
      ScrollTrigger.create({
        trigger: layout[0],
        start: "top top",
        end: "bottom bottom",
        endTrigger: hiwSection,
        pin: layout,
        pinSpacing: false,
        scrub: 1, // Smoother scrubbing
        snap: {
          snapTo: 1 / steps,
          duration: { min: 0.2, max: 0.4 },
          delay: 0.1,
        },
        onUpdate: (self) => {
          if (steps <= 0) return;
          let progress = Math.max(0, Math.min(1, self.progress));
          let idx = Math.min(totalSlides - 1, Math.round(progress * steps));
          updateSlide(idx);
        },
      });

      ScrollTrigger.create({
        trigger: layout[0],
        start: "top top",
        end: "bottom bottom",
        endTrigger: hiwSection[0],
        scrub: 1,
        animation: gsap.to(".hiw-progress_indicator", {
          top: "100%",
          ease: "none",
        }),
      });
    });

    // Mobile version - less aggressive snapping
    mm.add("(max-width: 991px)", () => {
      ScrollTrigger.create({
        trigger: layout,
        start: "top top",
        end: "bottom bottom",
        endTrigger: hiwSection,
        pin: layout,
        pinSpacing: false,
        scrub: true,
        snap: {
          snapTo: 1 / steps,
          duration: 0.1,
          delay: 0,
          directional: true,
        },
        onUpdate: (self) => {
          if (steps <= 0 || isAnimating) return;

          let progress = Math.max(0, Math.min(1, self.progress));
          let idx = Math.min(totalSlides - 1, Math.round(progress * steps));

          // Add throttling for mobile
          clearTimeout(this.updateTimeout);
          this.updateTimeout = setTimeout(() => {
            updateSlide(idx);
          }, 0);
        },
      });
    });
  });

  mm.add("(max-width: 991px)", () => {
    $(".services-item").each(function (index) {
      let clipTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top center",
          end: "bottom center",
          toggleClass: "in-view",
          scrub: true,
        },
      });
    });
  });
}

function storyScripts() {
  // window.addEventListener("resize", storyScripts);

  $(".story-component").each(function () {
    let triggers = $(this).find(".story-trigger_item");
    let storyItem = $(this).find(".story-title_item");
    triggers.each(function (index) {
      let triggerIndex = index;
      let childItem = storyItem.eq(triggerIndex);
      let childChars = childItem.find(".s-char");
      let storyTl = gsap.timeline({
        scrollTrigger: {
          trigger: $(this),
          start: "top center",
          end: "bottom center",
          scrub: 0.4,
        },
        defaults: {
          ease: "none",
        },
      });

      storyTl.fromTo(
        childChars,
        {
          "will-change": "opacity, transform",
          opacity: 0,
          rotationX: -90,
          yPercent: 50,
        },
        {
          ease: "linear",
          opacity: 1,
          rotationX: 0,
          yPercent: 0,
          stagger: {
            each: 0.03,
            from: 0,
          },
        }
      );
      // if (index !== triggers.length - 1) {
      storyTl.to(
        childItem,
        {
          scale: 0.95,
          opacity: 0,
        },
        "<95%"
      );
      // }
    });
  });
}

//how it works
let menuHide;
let isAnimatingScroll = false;
let menuVideoHide;
let closeMenuTl;

function globalFunctions() {
  $("[count-items=wrap]").each(function () {
    const countWrap = $(this);
    const itemCount = countWrap.find("[count-items=item]").length;
    countWrap
      .find("[count-items=total]")
      .text(itemCount.toString().padStart(2, "0"));
  });

  $(".signup-form_block").each(function () {
    const signupForm = $(this);
    const submitFake = signupForm.find(".signup-submit_btn");
    const submitReal = signupForm.find(".signup-submit");

    submitFake.click(function () {
      submitReal.click();
    });
  });

  $("[b-magnet]").each(function () {
    const magnet = $(this);
    const el = magnet[0];

    // Tweakables
    const strength = parseFloat(magnet.data("magnet-strength")) || 0.2; // 0.1–0.3 feels good
    const max = parseFloat(magnet.data("magnet-max")) || 30; // px clamp

    let rect = el.getBoundingClientRect();
    $(window).on("resize", () => (rect = el.getBoundingClientRect()));
    magnet.on("pointerenter", () => (rect = el.getBoundingClientRect()));

    // Follow pointer (calm)
    magnet.on("pointermove", function (e) {
      const dx = e.clientX - rect.left - rect.width / 2;
      const dy = e.clientY - rect.top - rect.height / 2;

      // Apply strength and clamp
      const tx = Math.max(-max, Math.min(max, dx * strength));
      const ty = Math.max(-max, Math.min(max, dy * strength));

      gsap.to(el, {
        x: tx,
        y: ty,
        duration: 0.2,
        ease: "power2.out",
        overwrite: "auto",
      });
    });

    // Reset on leave
    magnet.on("pointerleave", function () {
      gsap.to(el, {
        x: 0,
        y: 0,
        duration: 0.5,
        ease: "sine",
        overwrite: "auto",
      });
    });
  });

  $("[year]").text(new Date().getFullYear());

  $(".share-article_el").each(function (index) {
    let shareText = $(this).find(".share-article");

    $(this).click(function () {
      let currentURL = window.location.href;
      let tempInput = $("<input>");
      $("body").append(tempInput);
      tempInput.val(currentURL).select();

      document.execCommand("copy");
      tempInput.remove();

      shareText.text("Copied to clipboard");
      $(this).addClass("disabled");
    });
  });

  $("[video-player]").each(function (index) {
    let playVidBtn = $(this).find(".video-popup_btn");
    let videoPopupEl = $(this).find(".video-popup");
    let closeVidBtn = $(this).find(".video-close");
    let videoItem = $(this).find(".plyr_component");
    let videoBg = $(this).find(".video-popup_bg");

    let thisComponent = $(this);
    const controls = `
    <div class="plyr__controls">
      <div class="plyr__progress">
          <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
      </div>
      <div class="plyr_stretch">
          <div class="plyr_col">
              <div class="plyr__control" aria-label="Play, {title}" data-plyr="play">
                  <div class="icon--pressed" role="presentation">Pause</div>
                  <div class="icon--not-pressed" role="presentation">Play</div>
              </div>
              <div class="plyr__time plyr__time--current" aria-label="Current time">
                  00:00
              </div>
          </div>
  
          <div class="plyr__control" aria-label="Mute" data-plyr="mute">
              <span class="icon--pressed" role="presentation">Sound On</span>
              <span class="icon--not-pressed" role="presentation">Sound Off</span>
          </div>
      </div>
  </div>
  `;

    let player = new Plyr(thisComponent.find(".plyr_video")[0], {
      controls,
      resetOnEnd: true,
    });

    let videoPopupTl = gsap.timeline({
      paused: true,
      defaults: {
        ease: "primary-ease",
        duration: 0.5,
      },
      onStart: () => {
        menuVideoHide.play();
        lenis.stop();
      },
      onReverseComplete: () => {
        menuVideoHide.reverse();
        lenis.start();
      },
    });
    videoPopupTl.set(videoPopupEl, {
      display: "flex",
    });

    videoPopupTl.to(videoBg, {
      opacity: 1,
    });

    videoPopupTl.fromTo(
      videoItem,
      {
        opacity: 0,
        // scale: 0.5,
      },
      {
        opacity: 1,
        // scale: 1,
      },
      "<"
    );
    videoPopupTl.from(
      closeVidBtn,
      {
        opacity: 0,
        duration: 0.6,
      },
      "<"
    );

    videoPopupTl.set(videoBg, {
      pointerEvents: "auto",
    });

    playVidBtn.on("click", function () {
      videoPopupTl.timeScale(1).restart();
      player.play();
    });

    closeVidBtn.on("click", function () {
      videoPopupTl.timeScale(2).reverse();
      player.pause();
    });

    player.on("ended", (event) => {
      videoPopupTl.timeScale(2).reverse();
    });
  });
  //hover shuffle function
  $("[hover-shuffle-component]").each(function (index) {
    let hoverTriggers = $(this).find("[hover-shuffle-trigger]");
    let hoverImgs = $(this).find("[hover-shuffle-image]");

    let hoverZ = 1;
    hoverTriggers.each(function (index) {
      let hovershuffleActive = hoverImgs.eq(index);
      let hoverShuffleTl = gsap.timeline({
        paused: true,
      });
      // hoverShuffleTl.to(hovershuffleActive, {
      //   rotateX: "0deg",
      //   // clipPath:
      //   //   "polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%)",
      //   duration: 0.6,
      //   ease: "primary-ease",
      // });
      $(this).on("mouseenter", function () {
        hoverShuffleTl.restart();
        hovershuffleActive.addClass("show-item");
        hoverZ = hoverZ + 1;
        gsap.set(hovershuffleActive, {
          zIndex: hoverZ,
        });
      });
      $(this).on("mouseleave", function () {
        hoverShuffleTl.reverse();
        hovershuffleActive.removeClass("show-item");
      });
    });
  });

  $(".page_main").each(function (index) {
    ScrollTrigger.create({
      trigger: $(this),
      start: "top top",
      end: "+400px",
      onLeave: ({ self }) => {
        $(".nav-wrap").addClass("scrolled");
      },
      onEnterBack: ({ self }) => {
        $(".nav-wrap").removeClass("scrolled");
      },
    });
  });

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

  menuHide.fromTo(
    ".nav-wrap",
    {
      yPercent: 0,
    },
    {
      yPercent: -110,
      duration: 0.4,
      ease: "sine.inOut",
    }
  );

  menuVideoHide = gsap.timeline({
    paused: true,
  });

  menuVideoHide.fromTo(
    ".nav-wrap",
    {
      pointerEvents: "auto",
    },
    {
      pointerEvents: "none",
      duration: 0.4,
    }
  );

  menuVideoHide.fromTo(
    ".nav-container",
    {
      yPercent: 0,
    },
    {
      yPercent: -150,
      duration: 0.4,
      ease: "sine.inOut",
    },
    "<"
  );

  $(".nav-wrap").each(function (index) {
    let menuBtn = $(this).find(".menu-btn");
    let menuContainer = $(this).find(".nav-container");
    let menuPopup = $(this).find(".menu-popup");
    let menuBg = $(this).find(".menu-popup_bg");
    let menuContain = $(this).find(".menu-contain");
    let menuLinkItem = $(this).find(".menu-dropdown_link");
    let menuLines = $(this).find(".menu-line_el");
    let menuBlocks = $(this).find("[menu-block]");
    let menuFadeItems = $(this).find("[menu-fade]");
    let menuBtnText = $(this).find(".menu-nav_text");
    let menuBtnIcon = $(this).find(".menu-icon_svg");
    let menuDuration = 0.4;

    closeMenuTl = gsap.timeline({
      paused: true,
      defaults: {
        ease: "primary-ease",
        duration: menuDuration,
      },
    });
    closeMenuTl.set(menuContain, { display: "none" });
    closeMenuTl.to(menuBg, {
      opacity: 0,
      ease: "none",
    });
    closeMenuTl.to(
      menuBtnText,
      {
        yPercent: 0,
      },
      "<"
    );
    closeMenuTl.to(
      menuBtnIcon,
      {
        yPercent: 0,
      },
      "<"
    );
    closeMenuTl.set(menuPopup, { display: "none" });

    // menu-fade
    let menuTl = gsap.timeline({
      paused: true,
      defaults: {
        ease: "primary-ease",
        duration: menuDuration,
      },
    });
    menuTl.set(menuPopup, { display: "flex", opacity: 1 });
    menuTl.set(menuContain, { display: "block" });

    menuTl.fromTo(
      menuBg,
      {
        opacity: 0,
        ease: "none",
      },
      {
        opacity: 1,
        ease: "none",
      }
    );

    menuTl.to(
      menuBtnText,
      {
        yPercent: -150,
      },
      "<"
    );
    menuTl.to(
      menuBtnIcon,
      {
        yPercent: -150,
      },
      "<"
    );

    menuTl.from(
      menuBlocks,
      {
        yPercent: -100,
        // stagger: { amount: 0.2 },
      },
      "<"
    );
    menuTl.from(
      menuLinkItem,
      {
        yPercent: 50,
        opacity: 0,
        duration: menuDuration,
        stagger: { each: 0.075 },
      },
      "<25%"
    );
    menuTl.from(
      menuLines,
      {
        width: "0%",
        duration: menuDuration * 1.5,
        stagger: { each: 0.075 },
      },
      "<"
    );
    menuTl.from(
      menuFadeItems,
      {
        duration: menuDuration / 2,
        opacity: 0,
        ease: "none",
      },
      "<50%"
    );

    function openMenu(open) {
      if (!menuTl.isActive()) {
        if (open) {
          lenis.stop();
          menuContainer.addClass("nav-visible");
          menuTl.restart();
          menuBtn.addClass("nav-open");
          mm.add("(max-width: 991px)", () => {
            $(".nav-wrap").addClass("mobile-menu-show");
          });
        } else {
          menuContainer.removeClass("nav-visible");
          lenis.start();
          closeMenuTl.restart();
          menuBtn.removeClass("nav-open");
          mm.add("(max-width: 991px)", () => {
            $(".nav-wrap").removeClass("mobile-menu-show");
          });
        }
      }
    }

    menuBtn.on("click", function () {
      if ($(this).hasClass("nav-open")) {
        openMenu(false);
      } else {
        openMenu(true);
      }
    });

    menuBg.on("click", function () {
      openMenu(false);
    });

    $(document).on("keydown", function (e) {
      if (e.key === "Escape") {
        openMenu(false);
      }
    });
  });

  $(".dark-mode_toggle").click(function () {
    $("body").attr("data-theme", function (index, attr) {
      return attr === "light" ? "dark" : "light";
    });
  });

  $("[grow-in-view]").each(function (index) {
    let sectionGrowTl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "clamp(top bottom)",
        end: "clamp(top center)",
        scrub: true,
      },
    });

    sectionGrowTl.fromTo(
      $(this),
      {
        paddingLeft: "5rem",
        paddingRight: "5rem",
      },
      {
        paddingLeft: "0rem",
        paddingRight: "0rem",
        ease: "none",
      }
    );
  });
  //marquee

  $(".text-reveal").each(function () {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "top center",
        end: "bottom center",
        scrub: true,
      },
    });

    if ($(this).length > 0) {
      tl.fromTo(
        $(this).find(".s-word"),
        {
          opacity: 0.1,
        },
        {
          ease: "none",
          opacity: 1,
          stagger: 0.05,
        }
      );
    }
  });

  //Scale on scroll
  $("[data-scroll-scale]").each(function () {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "top 100%",
        end: "bottom center",
        scrub: true,
      },
    });

    tl.fromTo(
      $(this),
      {
        width: "50%",
      },
      {
        width: "100%",
        ease: "none",
      }
    );
    tl.fromTo(
      $(this).find(".g_visual_wrap"),
      {
        width: "150%",
      },
      {
        width: "100%",
        ease: "none",
      },
      "<"
    );
  });

  $("[text-scroll-scale]").each(function () {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "top 100%",
        end: "bottom center",
        scrub: 0.6,
      },
    });

    mm.add("(min-width: 992px)", () => {
      tl.fromTo(
        $(this).find(".features-visual_holder"),
        {
          width: "2%",
          marginRight: "0px",
        },
        {
          marginRight: "20px",
          width: "20%",
          ease: "none",
        }
      );
      tl.fromTo(
        $(this).find(".g_visual_wrap"),
        {
          width: "150%",
        },
        {
          width: "100%",
          ease: "none",
        },
        "<"
      );
    });
    tl.to(
      $(this).find(".features-list_title"),
      {
        opacity: 1,
        ease: "power4.in",
      },
      0
    );
  });

  $("[slider-section]").each(function (index) {
    let swiperEl = $(this).find(".swiper");
    let swiperNext = $(this).find(".is-next");
    let swiperPrev = $(this).find(".is-prev");
    mm.add("(max-width: 991px)", () => {
      const newsSwiper = new Swiper(swiperEl[0], {
        navigation: {
          nextEl: swiperNext[0],
          prevEl: swiperPrev[0],
        },
        autoplay: false,
        loop: true,
        speed: 600,
        spaceBetween: 10,
        breakpoints: {
          320: {
            slidesPerView: 1.1,
          },

          992: {
            slidesPerView: 4,
          },
        },
      });
    });
  });

  //Footer
  $(".footer-component").each(function () {
    let footerTrigger = $(this).find(".footer-spacer");
    let footerEl = $(this).find(".footer");
    let footerLogo = $(this).find(".footer-logo_holder");
    let footerLogoChars = footerLogo.find("path");
    mm.add("(min-width: 992px)", () => {
      let footerTl1 = gsap.timeline({
        scrollTrigger: {
          trigger: footerTrigger,
          start: "top top",
          end: "bottom top",
          toggleActions: "play none none reset",
        },
      });

      footerTl1.fromTo(
        footerEl,
        {
          y: "10rem",
        },
        {
          duration: 1.4,
          y: "0rem",
          ease: "expo.out",
        }
      );
    });
    mm.add("(min-width: 992px)", () => {
      let footerTl2 = gsap.timeline({
        scrollTrigger: {
          trigger: footerTrigger,
          start: "bottom 30%",
          end: "bottom top",
          toggleActions: "play none none reset",
        },
      });

      footerTl2.fromTo(
        footerLogoChars,
        {
          y: "10rem",
        },
        {
          duration: 1.4,
          y: "0rem",
          stagger: 0.05,
          ease: "expo.out",
        },
        "<"
      );
    });

    mm.add("(max-width: 991px)", () => {
      let footerMobile = gsap.timeline({
        scrollTrigger: {
          trigger: footerLogo,
          start: "top 80%",
          end: "top 70%",
          toggleActions: "play none none reverse",
        },
      });

      footerMobile.fromTo(
        footerLogoChars,
        {
          y: "13rem",
        },
        {
          duration: 1.4,
          y: "0rem",
          stagger: 0.05,
          ease: "expo.out",
        },
        "<"
      );
    });
  });

  $("[s-fade]").each(function () {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "top 80%",
        toggleActions: "play none none none",
      },
    });

    tl.fromTo(
      $(this),
      { opacity: 0 },
      {
        opacity: 1,
        duration: 0.6,
        ease: "sine.in",
      }
    );
  });

  $("[h-scroll-anim]").each(function (index) {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: $(this),
        start: "top 90%",
        toggleActions: "play none none reverse",
      },
    });

    tl.fromTo(
      $(this).find(".s-line"),
      {
        yPercent: 100,
        clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
      },
      {
        yPercent: 0,
        clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
        ease: "primary-ease",
        duration: 1,
        stagger: 0.1,
      }
    );
  });

  //HOVER SHUFFLE
  $("img[loading='lazy']").attr("loading", "auto");
}

function resetWebflow(data) {
  let dom = $(
    new DOMParser().parseFromString(data.next.html, "text/html")
  ).find("html");
  // reset webflow interactions
  $("html").attr("data-wf-page", dom.attr("data-wf-page"));
  window.Webflow && window.Webflow.destroy();
  window.Webflow && window.Webflow.ready();
  window.Webflow && window.Webflow.require("ix2").init();
  // reset w--current class
  $(".w--current").removeClass("w--current");
  $("a").each(function () {
    if ($(this).attr("href") === window.location.pathname) {
      $(this).addClass("w--current");
    }
  });
}
//---------------------------------------------------------------------------------------------
//LEAVE ANIMATION
const leaveAnimation = (container) => {
  // lenis.stop();
  const leaveTl = gsap.timeline({
    defaults: {
      ease: "primary-ease",
      duration: transitionDuration,
    },
  });
  gsap.to($(container).find(".menu-contain"), {
    opacity: 0,
    duration: 0.4,
  });

  leaveTl.to(
    $(container).find(".nav-wrap"),
    {
      yPercent: -100,
      ease: "power3.inOut",
      duration: transitionDuration,
    },
    "<"
  );

  leaveTl.fromTo(
    $(container).find(".page-overlay"),
    {
      opacity: 0,
    },
    {
      opacity: 0.8,
      duration: transitionDuration,
      ease: "linear",
    },
    "<"
  );
  return leaveTl;
};

//ENTER ANIMATION

const pageReloadAnimation = (container) => {
  lenis.stop();
  $("body").addClass("fixed");
  let swipe = $(container).find("[pload-swipe]");
  let homeHero = $(container).find("[pload-home_swipe]");
  let preloaderDuration = 2;
  let pageReloadTl = gsap.timeline({
    onComplete: () => {
      $("body").removeClass("fixed");
      $("body").removeClass("show-preloader");
      ScrollTrigger.refresh();
      lenis.start();
    },
    defaults: {
      ease: "primary-ease",
      duration: transitionDuration,
    },
  });
  function updateLoaderText() {
    let progress = Math.round(counter.value);
    let formattedProgress = progress.toString().padStart(3, "0");
    $(".progress-number").text(formattedProgress);
  }

  pageReloadTl.to(counter, {
    value: 99,
    onUpdate: updateLoaderText,
    duration: preloaderDuration,
    ease: "loaderEase",
  });

  pageReloadTl.to(".preloader-layout", {
    opacity: 0,
    // ease: "linear"
    duration: 0.6,
    ease: "primary-ease",
  });

  pageReloadTl.to(".preloader", {
    yPercent: -110,
    duration: 0.8,
    ease: "primary-ease",
  });

  pageReloadTl.fromTo(
    $(container).find(".page-content"),
    {
      y: "100vh",
    },
    {
      y: "0vh",
      clearProps: "all",
    },
    "<"
  );

  pageReloadTl.fromTo(
    $(container).find(".page-content"),
    {
      scaleX: 0.9,
      clipPath:
        "polygon(5rem 0%, calc(100% - 5rem) 0%, 100% 5rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 5rem)",
    },
    {
      scaleX: 1,
      clipPath:
        "polygon(0rem 0%, calc(100% - 0rem) 0%, 100% 0rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0rem)",
      ease: "power3.inOut",
      clearProps: "all",
    },
    "<"
  );

  //
  if (swipe.length > 0) {
    pageReloadTl.from(
      $(container).find("[pload-swipe]"),
      {
        scale: 0.5,
        yPercent: 100,
        ease: "power2.out",
        clearProps: "all",
      },
      "<"
    );

    pageReloadTl.from(
      $(container).find("[pload-swipe] video"),
      {
        opacity: 0,
        ease: "linear",
        clearProps: "all",
      },
      "<80%"
    );
  }
  if (homeHero.length > 0) {
    pageReloadTl.fromTo(
      $(container).find("[pload-home_swipe]"),
      {
        y: "100vh",
      },
      {
        y: "0vh",
      },
      "<"
    );
    pageReloadTl.fromTo(
      $(container).find("[pload-home_swipe]"),
      {
        scaleX: 0.9,
        clipPath:
          "polygon(5rem 0%, calc(100% - 5rem) 0%, 100% 5rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 5rem)",
      },
      {
        scaleX: 1,
        ease: "power1.inOut",
        clipPath:
          "polygon(0rem 0%, calc(100% - 0rem) 0%, 100% 0rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0rem)",
      },
      "<"
    );
    pageReloadTl.fromTo(
      $(container).find("[pload-home_swipe] .g_visual_overlay"),
      {
        opacity: 0,
      },
      {
        opacity: 0.6,
        ease: "power1.inOut",
      },
      "<"
    );
  }

  pageReloadTl.fromTo(
    $(container).find("[pload-lines] .s-line"),
    {
      yPercent: 100,
      clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
    },
    {
      yPercent: 0,
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      ease: "primary-ease",
      // duration: 1,
      stagger: 0.1,
    },
    "<"
  );
  pageReloadTl.from(
    $(container).find("[pload-fade]"),
    {
      opacity: 0,
      duration: transitionDuration,
      ease: "primary-ease",
    },
    "<"
  );
  pageReloadTl.fromTo(
    $(container).find(".nav-wrap"),
    {
      top: "-100%",
    },
    {
      top: "0%",
      ease: "primary-ease",
      clearProps: "all",
    },
    "<"
  );

  return pageReloadTl;
};

const enterAnimation = (container) => {
  $(container).addClass("fixed");
  let swipe = $(container).find("[pload-swipe]");
  let homeHero = $(container).find("[pload-home_swipe]");
  const enterTl = gsap.timeline({
    defaults: {
      ease: "primary-ease",
      duration: transitionDuration,
    },
  });

  enterTl.fromTo(
    $(container).find(".page-content"),
    {
      y: "100vh",
    },
    {
      y: "0vh",
    }
  );

  enterTl.fromTo(
    $(container).find(".page-content"),
    {
      scaleX: 0.9,
      clipPath:
        "polygon(5rem 0%, calc(100% - 5rem) 0%, 100% 5rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 5rem)",
    },
    {
      scaleX: 1,
      clipPath:
        "polygon(0rem 0%, calc(100% - 0rem) 0%, 100% 0rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0rem)",
      ease: "power1.inOut",
      clearProps: "all",
    },
    "<"
  );

  //
  if (swipe.length > 0) {
    enterTl.from(
      $(container).find("[pload-swipe]"),
      {
        scale: 0.5,
        yPercent: 100,
        ease: "power2.out",
        clearProps: "all",
      },
      "<"
    );
    enterTl.from(
      $(container).find("[pload-swipe] video"),
      {
        opacity: 0,
        ease: "linear",
        clearProps: "all",
      },
      "<80%"
    );
  }
  if (homeHero.length > 0) {
    enterTl.fromTo(
      $(container).find("[pload-home_swipe]"),
      {
        y: "100vh",
      },
      {
        y: "0vh",
      },
      "<"
    );
    enterTl.fromTo(
      $(container).find("[pload-home_swipe]"),
      {
        scaleX: 0.9,
        clipPath:
          "polygon(5rem 0%, calc(100% - 5rem) 0%, 100% 5rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 5rem)",
      },
      {
        scaleX: 1,
        ease: "power1.inOut",
        clipPath:
          "polygon(0rem 0%, calc(100% - 0rem) 0%, 100% 0rem, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0rem)",
        // clearProps: "clip-path",
      },
      "<"
    );
    enterTl.fromTo(
      $(container).find("[pload-home_swipe] .g_visual_overlay"),
      {
        opacity: 0,
      },
      {
        opacity: 0.6,
        ease: "power1.inOut",
      },
      "<"
    );
    enterTl.from(
      $(container).find("[pload-home_swipe] video"),
      {
        opacity: 0,
        // ease: "linear",
        clearProps: "all",
      },
      "<"
    );
    enterTl.fromTo(
      $(container).find(".nav-wrap"),
      {
        yPercent: -100,
      },
      {
        yPercent: 0,
        ease: "expo.out",
      }
    );
  }

  enterTl.fromTo(
    $(container).find("[pload-lines] .s-line"),
    {
      yPercent: 100,
      clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
    },
    {
      yPercent: 0,
      clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
      ease: "expo.out",
      stagger: 0.1,
    },
    "<"
  );

  enterTl.from(
    $(container).find("[pload-fade]"),
    {
      opacity: 0,
      duration: transitionDuration,
      ease: "primary-ease",
    },
    "<"
  );

  if (homeHero.length === 0) {
    enterTl.fromTo(
      $(container).find(".nav-wrap"),
      {
        yPercent: -100,
      },
      {
        yPercent: 0,
        ease: "expo.out",
      },
      "-=95%"
    );
  }

  return enterTl;
};

function scrollFire() {
  lenis.resize();
  ScrollTrigger.refresh();
}

// barba.hooks.beforeLeave((data) => {
//   closeMenuTl.timeScale(5).restart();
//   menuBtn.removeClass("nav-open");
//   menuBtn.removeClass("nav-open");
// });

barba.hooks.beforeEnter((data) => {
  runSplit();
  $("[lottie-holder]").each(function (index) {
    let lottieFile = $(this).find("[lottie-element]");
    let lottieUrl = lottieFile.attr("lottie-url");
    let lottieAnimation = bodymovin.loadAnimation({
      container: lottieFile[0],
      renderer: "svg",
      autoplay: false,
      loop: true,
      path: lottieUrl,
    });

    mm.add("(min-width: 992px)", () => {
      $("[lottie-holder]").on("mouseenter", function () {
        lottieAnimation.loop = true;
        lottieAnimation.goToAndPlay(0, true);
      });

      $("[lottie-holder]").on("mouseleave", function () {
        bodymovin.goToAndStop(0, true);
      });
    });
    mm.add("(max-width: 991px)", () => {
      $("[lottie-holder]").on("click", function () {
        lottieAnimation.loop = false;
        lottieAnimation.goToAndPlay(0, true);
      });
    });
  });
});

barba.hooks.beforeLeave((data) => {
  lenis.stop();
  lenis.direction = -1;
});

barba.hooks.after((data) => {
  $(data.next.container).removeClass("fixed");
  $(window).scrollTop(0);
  lenis.start();
  resetWebflow(data);
});

barba.init({
  preventRunning: true,
  timeout: 50000,
  views: [
    {
      namespace: "homepage",
      afterEnter(data) {
        globalFunctions();
        homeScripts();
        scrollFire();
      },
    },
    {
      namespace: "impact",
      afterEnter(data) {
        globalFunctions();
        mapScripts();
        scrollFire();
      },
    },
    {
      namespace: "contact",
      afterEnter(data) {
        globalFunctions();
        scrollFire();
      },
    },
    {
      namespace: "team",
      afterEnter(data) {
        globalFunctions();
        teamScripts();
        accordionScripts();
        scrollFire();
      },
    },
    {
      namespace: "story",
      afterEnter(data) {
        globalFunctions();
        storyScripts();
        scrollFire();
      },
    },
    {
      namespace: "careers",
      afterEnter(data) {
        globalFunctions();
        accordionScripts();
        scrollFire();
      },
    },
    {
      namespace: "news",
      afterEnter(data) {
        globalFunctions();
        newsScripts();
        scrollFire();
      },
    },
    {
      namespace: "article",
      afterEnter(data) {
        globalFunctions();
        scrollFire();
      },
    },
    {
      namespace: "legal",
      afterEnter(data) {
        globalFunctions();
        scrollFire();
      },
    },
    {
      namespace: "error",
      afterEnter(data) {
        globalFunctions();
        scrollFire();
      },
    },
  ],
  transitions: [
    {
      name: "page-reload",
      once: (data) => {
        pageReloadAnimation(data.next.container);
      },
    },
    {
      name: "basic-transition",
      sync: true,
      leave: (data) => leaveAnimation(data.current.container),
      enter: (data) => enterAnimation(data.next.container),
    },
  ],
});