//global
gsap.registerPlugin(
  SplitText,
  DrawSVGPlugin,
  ScrollTrigger,
  MorphSVGPlugin,
  ScrollToPlugin
);
CustomEase.create("primary-ease", "M0,0 C0.15,0 0.15,1 1,1");

function checkPreloader() {
  $(window).scrollTop(0);
  if (sessionStorage.getItem("visited") !== null) {
    // $("body").removeClass("show-loader");
  } else {
    runSplit();
    // preloaderFunction();
  }
  sessionStorage.setItem("visited", "true");
}

// function preloaderInit() {
let introDuration = 1.4;
let preloaderText = $(".preloader_text");
let textWrapper = $(".preloader_text_wrap");
let textDestination = $(".nav_logo_holder");

function moveText(element) {
  let state = Flip.getState(preloaderText);
  preloaderText.appendTo(element);
  Flip.from(state, {
    duration: introDuration,
    ease: "expo.inOut",
    scale: true,
  });
}

// LENIS OPEN
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);

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

gsap.ticker.lagSmoothing(0);

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

// // On Back Button Tap
// window.onpageshow = function (event) {
//   if (event.persisted) window.location.reload();
// };

let defaultStagger = "0.13";
let loadSplit;
let loadSplitLine;

function runSplit() {
  // Destroy existing SplitText if it exists
  if (loadSplit) {
    loadSplit.revert();
  }

  loadSplit = new SplitText(".preloader_text, [split], .ghero-text", {
    type: "lines, words, chars",
    linesClass: "line",
    wordsClass: "word",
    charsClass: "char",
  });
}
runSplit();

function runSplitNoChars() {
  // Destroy existing SplitText if it exists
  if (loadSplitLine) {
    loadSplitLine.revert();
  }

  loadSplitLine = new SplitText("[splitline], [hero-split]", {
    type: "lines",
    linesClass: "line",
  });
}
runSplitNoChars();
// function runSplitNoChars() {
//   // Destroy existing SplitText if it exists
//   if (loadSplit) {
//     loadSplit.revert();
//   }

//   loadSplit = new SplitText(
//     ".preloader_text, [hero-split], [global-reveal], [split], .ghero-text",
//     {
//       type: "lines, words",
//       linesClass: "line",
//       wordsClass: "word",
//     }
//   );
// }

// window.addEventListener("resize", () => {
//   if (window.innerWidth <= 768) {
//     runSplit();
//   } else if (window.innerWidth > 768 && window.innerWidth <= 1024) {
//     runSplit();
//   } else {
//     runSplit();
//   }
// });

// function setFullWidthFontSize() {
//   // gsap.matchMedia().add("(min-width: 767px)", () => {
//   //   $(".footer_logo_content, .preloader_heading").each(function () {
//   //     let parentWidth = $(this).width();
//   //     let child = $(this).children();
//   //     let fontSize = 0.5;
//   //     child.css("font-size", fontSize + "cqw");
//   //     while (child.width() < parentWidth) {
//   //       fontSize += 0.1;
//   //       child.css("font-size", fontSize + "cqw");
//   //     }
//   //     fontSize -= 0.1;
//   //     child.css("font-size", fontSize + "cqw");
//   //   });
//   // });
// }

function homeInitScroll() {
  console.log("homeInitScroll");
  $(".reveal_section.home-reveal").each(function () {
    let homeRevealHolder = $(".expanding_visual_wrap.home");
    let homeRevealTrigger = $(".spacer.is-local");
    let homeRevealEyebrow = $("[homeeyebrow]");
    let homeRevealBtn = $("[homebtn]");
    let homeRevealOverlay = $(".reveal_overlay.home");
    let homeRevealSlider = $(".slider_top, .slider_bot_wrap, .slider_dot_wrap");
    let revealOverlayText = $(".overlay_heading_wrap");
    let homeRevealOverlayLines = revealOverlayText.find(".line");
    let homeRevealLogo = $(".home-reveal_logo.bot");
    let homeRevealLogoIcon = $(".section_2_svg_holder");
    let homeUp2 = $("[homeup2]");
    let homeDown = $("[homedown]");
    let homeDown2 = $("[homedown2]");
    let homeUp = $("[homeup]");
    let homeUpSet = homeUp.find(".char");
    let homeUp2Set = homeUp2.find(".char");
    let homeDownSet = homeDown.find(".char");
    let homeDown2Set = homeDown2.find(".char");

    gsap.set(homeUpSet, { y: "0vh" });
    gsap.set(homeUp2Set, { y: "0vh" });
    gsap.set(homeDownSet, { y: "0vh" });
    gsap.set(homeDown2Set, { y: "0vh" });

    gsap.matchMedia().add("(min-width: 767px)", () => {
      gsap.set(homeRevealOverlay, { opacity: 0 });
      //part 1
      let revealExpand = gsap.timeline({
        scrollTrigger: {
          trigger: homeRevealTrigger,
          start: "top bottom",
          end: "top top",
          scrub: 1.5,
        },
      });

      revealExpand.fromTo(
        homeRevealHolder,
        {
          height: "100%",
          width: "100%",
          clipPath:
            "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
        },
        {
          height: "100%",
          width: "100%",
          clipPath:
            "polygon(5% 25%, 0% 50%, 5% 75%, 25% 95%, 50% 100%, 75% 95%, 95% 75%, 100% 50%, 95% 25%, 75% 5%, 50% 0%, 25% 5%)",
        }
      );
      revealExpand.fromTo(
        homeRevealEyebrow,
        {
          y: "0vh",
        },
        {
          y: "-60vh",
        },
        "<"
      );
      revealExpand.fromTo(
        homeRevealBtn,
        {
          y: "0",
        },
        {
          y: "60vh",
        },
        "<"
      );
      revealExpand.to(
        homeRevealHolder,
        {
          yPercent: 0,
          // height: "100%",
          // width: "100%",
          clipPath:
            "polygon(0% 0%, 0% 50%, 0% 100%, 24% 100%, 50% 100%, 77% 100%, 100% 100%, 100% 50%, 100% 0%, 77% 0%, 50% 0%, 22% 0%)",
        },
        "95%"
      );
    });
    //part 2

    //
    let homeRevealSliderTop = gsap.timeline({
      scrollTrigger: {
        trigger: homeRevealTrigger,
        start: "center bottom",
        end: "center bottom",
        toggleActions: "play none none none",
      },
    });

    gsap.matchMedia().add("(max-width: 766px)", () => {
      clipSwiper();
    });

    gsap.matchMedia().add("(min-width: 767px)", () => {
      // homeRevealSliderTop.to(homeRevealSlider, {
      //   opacity: 1,
      // });

      homeRevealSliderTop.fromTo(
        homeRevealSlider,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          // onStart: () => {
          //   clipSwiper();
          // },
        }
      );
    });
    //
    let homeRevealClip = gsap.timeline({
      scrollTrigger: {
        trigger: homeRevealTrigger,
        start: "center bottom",
        end: "center top",
        scrub: true,
      },
    });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      homeRevealClip.to(homeRevealOverlay, {
        opacity: 1,
      });
    });
    homeRevealClip.fromTo(
      homeRevealLogo,
      {
        opacity: 0,
      },
      {
        opacity: 1,
      }
    );
    gsap.matchMedia().add("(min-width: 767px)", () => {
      homeRevealClip.fromTo(
        homeRevealOverlayLines,
        {
          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: "power1.out",
          stagger: { each: 0.1 },
        },
        "<50%"
      );
    });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      homeRevealClip.fromTo(
        homeRevealLogoIcon,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          ease: "power1.out",
          stagger: { each: 0.1 },
        },
        "<50%"
      );
    });
    gsap.matchMedia().add("(max-width: 766px)", () => {
      homeRevealClip.fromTo(
        homeRevealOverlayLines,
        {
          yPercent: 100,
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        },
        {
          yPercent: 100,
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
          ease: "power1.out",
          stagger: { each: 0.1 },
        },
        "<50%"
      );
    });
    // let text1 = $("[reveal-text-up1]");
    // let text1chars = text1.find(".char");

    // let text3 = $("[reveal-text-up3]");

    // let text1down = $("[reveal-text-down1]");

    // let text3down = $("[reveal-text-down3]");

    // text1.each(function () {
    //   // let chars = $(this).find(".char");
    //   let revealTextUp1 = gsap.timeline({
    //     scrollTrigger: {
    //       trigger: homeRevealTrigger,
    //       start: "top bottom",
    //       end: "top top",
    //       scrub: 1.5,
    //     },
    //   });

    //   revealTextUp1.to(text1chars, {
    //     y: "-100vh",
    //     stagger: {
    //       amount: 0.02,
    //       from: "center",
    //       grid: [null, 1],
    //       axis: "y",
    //       from: 0.46,
    //     },
    //   });
    // });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      homeUp.each(function () {
        let homeTextUp = gsap.timeline({
          scrollTrigger: {
            trigger: homeRevealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        homeTextUp.to($(this).find(".char"), {
          y: "-100vh",
          stagger: {
            amount: 0.01,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });

      homeUp2.each(function () {
        let homeTextUp2 = gsap.timeline({
          scrollTrigger: {
            trigger: homeRevealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        homeTextUp2.to($(this).find(".char"), {
          y: "-100vh",
          stagger: {
            amount: 0.01,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });

      // text1down.each(function () {
      //   let revealTextDown1 = gsap.timeline({
      //     scrollTrigger: {
      //       trigger: homeRevealTrigger,
      //       start: "top bottom",
      //       end: "top top",
      //       scrub: 1.5,
      //     },
      //   });

      //   revealTextDown1.to($(this).find(".char"), {
      //     y: "100vh",
      //     stagger: {
      //       amount: 0.01,
      //       from: "center",
      //       grid: [null, 1],
      //       axis: "y",
      //       from: 0.51,
      //     },
      //   });
      // });

      homeDown.each(function () {
        let homeTextDown = gsap.timeline({
          scrollTrigger: {
            trigger: homeRevealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        homeTextDown.to($(this).find(".char"), {
          y: "100vh",
          stagger: {
            amount: 0.01,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });
      homeDown2.each(function () {
        let homeTextDown2 = gsap.timeline({
          scrollTrigger: {
            trigger: homeRevealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        homeTextDown2.to($(this).find(".char"), {
          y: "100vh",
          stagger: {
            amount: 0.003,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });
    });

    // gsap.matchMedia().add("(max-width: 766px)", () => {
    //   homeUp.each(function () {
    //     let homeTextUp = gsap.timeline({
    //       scrollTrigger: {
    //         trigger: homeRevealTrigger,
    //         start: "top bottom",
    //         end: "top top",
    //         scrub: 1.5,
    //       },
    //     });

    //     homeTextUp.to($(this).find(".char"), {
    //       y: "-100vh",
    //       // stagger: {
    //       //   amount: 0.02,
    //       //   from: "center",
    //       //   grid: [null, 1],
    //       //   axis: "y",
    //       //   from: 0.46,
    //       // },
    //     });
    //   });

    //   // text1down.each(function () {
    //   //   let revealTextDown1 = gsap.timeline({
    //   //     scrollTrigger: {
    //   //       trigger: homeRevealTrigger,
    //   //       start: "top bottom",
    //   //       end: "top top",
    //   //       scrub: 1.5,
    //   //     },
    //   //   });

    //   //   revealTextDown1.to($(this).find(".char"), {
    //   //     y: "100vh",
    //   //     stagger: {
    //   //       amount: 0.01,
    //   //       from: "center",
    //   //       grid: [null, 1],
    //   //       axis: "y",
    //   //       from: 0.51,
    //   //     },
    //   //   });
    //   // });

    //   homeDown.each(function () {
    //     let homeTextDown = gsap.timeline({
    //       scrollTrigger: {
    //         trigger: homeRevealTrigger,
    //         start: "top bottom",
    //         end: "top top",
    //         scrub: 1.5,
    //       },
    //     });

    //     homeTextDown.to($(this).find(".char"), {
    //       y: "100vh",
    //       // stagger: {
    //       //   amount: 0.02,
    //       //   from: "center",
    //       //   grid: [null, 1],
    //       //   axis: "y",
    //       //   from: 0.45,
    //       // },
    //     });
    //   });
    // });
  });
}
homeInitScroll();

function aboutInitScroll() {
  $(".about-reveal").each(function () {
    let revealHolder = $(".expanding_visual_wrap");
    let revealTrigger = $(".spacer.is-local");
    let aboutRevealEyebrow = $(".reveal_eyebrow");
    let aboutRevealBtn = $(".reveal_btn_holder");
    let revealOverlay = $(".reveal_overlay");
    let revealOverlayText = $(".overlay_heading_wrap");
    let revealOverlayLines = revealOverlayText.find(".line");
    let revealLogo = $(".reveal_logo.bot");

    //part 1
    let revealExpand = gsap.timeline({
      scrollTrigger: {
        trigger: revealTrigger,
        start: "top bottom",
        end: "top top",
        scrub: 1.5,
      },
    });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      revealExpand.fromTo(
        revealHolder,
        {
          height: "30%",
          width: "10%",
          clipPath:
            "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
        },
        {
          height: "60%",
          width: "50%",
          clipPath:
            "polygon(5% 25%, 0% 50%, 5% 75%, 25% 95%, 50% 100%, 75% 95%, 95% 75%, 100% 50%, 95% 25%, 75% 5%, 50% 0%, 25% 5%)",
        }
      );

      // gsap.matchMedia().add("(max-width: 766px)", () => {
      //   revealExpand.fromTo(
      //     revealHolder,
      //     {
      //       height: "30%",
      //       width: "60%",
      //       clipPath:
      //         "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
      //     },
      //     {
      //       height: "60%",
      //       width: "90%",
      //       clipPath:
      //         "polygon(5% 25%, 0% 50%, 5% 75%, 25% 95%, 50% 100%, 75% 95%, 95% 75%, 100% 50%, 95% 25%, 75% 5%, 50% 0%, 25% 5%)",
      //     }
      //   );
      // });

      revealExpand.fromTo(
        aboutRevealEyebrow,
        {
          y: "0vh",
        },
        {
          y: "-60vh",
        },
        "<"
      );
      revealExpand.fromTo(
        aboutRevealBtn,
        {
          y: "0",
        },
        {
          y: "60vh",
        },
        "<"
      );
      revealExpand.to(
        revealHolder,
        {
          yPercent: 1,
          // height: "100%",
          // width: "100%",
          clipPath:
            "polygon(0% 0%, 2% 16%, 0% 100%, 20% 99%, 63% 98%, 84% 99%, 100% 100%, 99% 62%, 100% 0%, 78% 2%, 67% 1%, 38% 1%)",
        },
        "95%"
      );
    });
    //part 2
    let revealClip = gsap.timeline({
      scrollTrigger: {
        trigger: revealTrigger,
        start: "center bottom",
        end: "center top",
        scrub: true,
      },
    });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      gsap.set(".revealOverlay", { opacity: 1 });
      revealClip.to(revealOverlay, {
        opacity: 1,
      });

      revealClip.fromTo(
        revealOverlayLines,
        {
          yPercent: 100,
          clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
        },
        {
          yPercent: 0,
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
          ease: "power1.out",
          stagger: { each: 0.1 },
        },
        "<50%"
      );
      revealClip.fromTo(
        revealLogo,
        {
          opacity: 0,
        },
        {
          opacity: 1,
        },
        "<80%"
      );
    });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      // let text1 = $("[reveal-text-up1]");
      // let text1chars = text1.find(".char");
      let aboutUp = $("[aboutup]");
      // let text3 = $("[reveal-text-up3]");

      // let text1down = $("[reveal-text-down1]");

      // let text3down = $("[reveal-text-down3]");

      // text1.each(function () {
      //   // let chars = $(this).find(".char");
      //   let revealTextUp1 = gsap.timeline({
      //     scrollTrigger: {
      //       trigger: revealTrigger,
      //       start: "top bottom",
      //       end: "top top",
      //       scrub: 1.5,
      //     },
      //   });

      //   revealTextUp1.to(text1chars, {
      //     y: "-100vh",
      //     stagger: {
      //       amount: 0.02,
      //       from: "center",
      //       grid: [null, 1],
      //       axis: "y",
      //       from: 0.46,
      //     },
      //   });
      // });

      aboutUp.each(function () {
        let aboutTextUp = gsap.timeline({
          scrollTrigger: {
            trigger: revealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        aboutTextUp.to($(this).find(".char"), {
          y: "-100vh",
          stagger: {
            amount: 0.02,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.46,
          },
        });
      });
      let aboutDown = $("[aboutdown]");
      aboutDown.each(function () {
        let aboutTextDown = gsap.timeline({
          scrollTrigger: {
            trigger: revealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        aboutTextDown.to($(this), {
          y: "100vh",
        });
      });
    });

    // text1down.each(function () {
    //   let revealTextDown1 = gsap.timeline({
    //     scrollTrigger: {
    //       trigger: revealTrigger,
    //       start: "top bottom",
    //       end: "top top",
    //       scrub: 1.5,
    //     },
    //   });

    //   revealTextDown1.to($(this).find(".char"), {
    //     y: "100vh",
    //     stagger: {
    //       amount: 0.01,
    //       from: "center",
    //       grid: [null, 1],
    //       axis: "y",
    //       from: 0.51,
    //     },
    //   });
    // });
  });
}
// aboutInitScroll();

function categoryInitScroll() {
  $(".category-reveal").each(function () {
    let revealHolder = $(".expanding_visual_wrap");
    let revealTrigger = $(".spacer.is-local");
    let revealEyebrow = $("[categoryeyebrow");
    let revealBtn = $("[categorybtn]");
    let revealOverlay = $(".reveal_overlay");
    let revealOverlayText = $(".overlay_heading_wrap");
    let revealOverlayLines = revealOverlayText.find(".line");
    let revealLogo = $(".reveal_logo.bot");

    gsap.matchMedia().add("(min-width: 767px)", () => {
      //part 1
      let revealExpand = gsap.timeline({
        scrollTrigger: {
          trigger: revealTrigger,
          start: "top bottom",
          end: "top top",
          scrub: 1.5,
        },
      });

      revealExpand.fromTo(
        revealHolder,
        {
          height: "30%",
          width: "30%",
          clipPath:
            "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
        },
        {
          height: "90%",
          width: "90%",
          clipPath:
            "polygon(5% 25%, 0% 50%, 5% 75%, 25% 95%, 50% 100%, 75% 95%, 95% 75%, 100% 50%, 95% 25%, 75% 5%, 50% 0%, 25% 5%)",
        }
      );
      revealExpand.fromTo(
        revealEyebrow,
        {
          y: "0vh",
        },
        {
          y: "-60vh",
        },
        "<"
      );
      revealExpand.fromTo(
        revealBtn,
        {
          y: "0",
        },
        {
          y: "60vh",
        },
        "<"
      );
      revealExpand.to(
        revealHolder,
        {
          yPercent: 1,
          height: "100%",
          width: "100%",
          clipPath:
            "polygon(0% 0%, 0% 50%, 0% 100%, 24% 100%, 50% 100%, 77% 100%, 100% 100%, 100% 50%, 100% 0%, 77% 0%, 50% 0%, 22% 0%)",
        },
        "95%"
      );
    });
    //part 2
    let revealClip = gsap.timeline({
      scrollTrigger: {
        trigger: revealTrigger,
        start: "center bottom",
        end: "center top",
        scrub: true,
      },
    });

    revealClip.to(revealOverlay, {
      opacity: 1,
    });

    revealClip.fromTo(
      revealOverlayLines,
      {
        yPercent: 100,
        clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      },
      {
        yPercent: 0,
        clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        ease: "power1.out",
        stagger: { each: 0.1 },
      },
      "<50%"
    );
    revealClip.fromTo(
      revealLogo,
      {
        opacity: 0,
      },
      {
        opacity: 1,
      },
      "<80%"
    );

    // let text1 = $("[reveal-text-up1]");
    // let text1chars = text1.find(".char");

    // let text3 = $("[reveal-text-up3]");
    let categoryUp = $("[categoryup]");
    let categoryUp2 = $("[categoryup2]");
    // let text1down = $("[reveal-text-down1]");
    let categoryDown = $("[categorydown]");
    let categoryDown2 = $("[categorydown2]");
    // let text3down = $("[reveal-text-down3]");

    // text1.each(function () {
    //   // let chars = $(this).find(".char");
    //   let revealTextUp1 = gsap.timeline({
    //     scrollTrigger: {
    //       trigger: revealTrigger,
    //       start: "top bottom",
    //       end: "top top",
    //       scrub: 1.5,
    //     },
    //   });

    //   revealTextUp1.to(text1chars, {
    //     y: "-100vh",
    //     stagger: {
    //       amount: 0.02,
    //       from: "center",
    //       grid: [null, 1],
    //       axis: "y",
    //       from: 0.46,
    //     },
    //   });
    // });
    gsap.matchMedia().add("(min-width: 767px)", () => {
      categoryUp.each(function () {
        let categoryTextUp = gsap.timeline({
          scrollTrigger: {
            trigger: revealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        categoryTextUp.to($(this).find(".char"), {
          y: "-100vh",
          stagger: {
            amount: 0.005,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });

      categoryUp2.each(function () {
        let categoryTextUp2 = gsap.timeline({
          scrollTrigger: {
            trigger: revealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        categoryTextUp2.to($(this).find(".char"), {
          y: "-100vh",
          stagger: {
            amount: 0.005,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });
      categoryDown.each(function () {
        let categoryTextDown = gsap.timeline({
          scrollTrigger: {
            trigger: revealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        categoryTextDown.to($(this).find(".char"), {
          y: "100vh",
          stagger: {
            amount: 0.005,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });
      categoryDown2.each(function () {
        let categoryTextDown2 = gsap.timeline({
          scrollTrigger: {
            trigger: revealTrigger,
            start: "top bottom",
            end: "top top",
            scrub: 1.5,
          },
        });

        categoryTextDown2.to($(this).find(".char"), {
          y: "100vh",
          stagger: {
            amount: 0.005,
            from: "center",
            grid: [null, 1],
            axis: "y",
            from: 0.5,
          },
        });
      });
    });

    // gsap.matchMedia().add("(max-width: 766px)", () => {
    //   categoryUp.each(function () {
    //     let categoryTextUp = gsap.timeline({
    //       scrollTrigger: {
    //         trigger: revealTrigger,
    //         start: "top bottom",
    //         end: "top top",
    //         scrub: 1.5,
    //       },
    //     });

    //     categoryTextUp.to($(this).find(".char"), {
    //       y: "-100vh",
    //     });
    //   });
    //   categoryDown.each(function () {
    //     let categoryTextDown = gsap.timeline({
    //       scrollTrigger: {
    //         trigger: revealTrigger,
    //         start: "top bottom",
    //         end: "top top",
    //         scrub: 1.5,
    //       },
    //     });

    //     categoryTextDown.to($(this).find(".char"), {
    //       y: "100vh",
    //     });
    //   });
    // });
    // text1down.each(function () {
    //   let revealTextDown1 = gsap.timeline({
    //     scrollTrigger: {
    //       trigger: revealTrigger,
    //       start: "top bottom",
    //       end: "top top",
    //       scrub: 1.5,
    //     },
    //   });

    //   revealTextDown1.to($(this).find(".char"), {
    //     y: "100vh",
    //     stagger: {
    //       amount: 0.01,
    //       from: "center",
    //       grid: [null, 1],
    //       axis: "y",
    //       from: 0.51,
    //     },
    //   });
    // });
  });
}
// categoryInitScroll();

function heroTextLoad() {
  console.log("herotextload");
  $("[std-text-load]").each(function () {
    let pageLoadText = gsap.timeline({
      // heroTextLoad
      onComplete: () => {
        // lenis.start();
      },
    });
    pageLoadText.fromTo(
      $(this).find(".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",
        duration: 2.3,
        // stagger: { each: 0.2 },
      }
    );
    pageLoadText.to(
      "[intro-fade]",
      {
        opacity: 1,
        duration: 1,
      },
      "<+20%"
    );
  });
}

function contactTextLoad() {
  $("[intro-fade]").each(function () {
    let contactLoadText = gsap.timeline({
      // heroTextLoad
      onComplete: () => {
        // lenis.start();
      },
    });
    contactLoadText.to(
      "[intro-fade]",
      {
        opacity: 1,
        duration: 1,
      },
      "<20%"
    );
  });
}

function clipHeroSwiper() {
  $(".hero_case_study_wrap").each(function () {
    let childArrow = $(this).find(".slider_btn");
    let childItems = $(this).find(".hero_case_study_item").hide();
    let childDots = $(this).find(".slider_nav_item");
    let totalSlides = childItems.length;
    let activeIndex = 0;

    childItems.first().css("display", "flex");

    // Set initial width for all nav items
    childDots.css("width", "0.25rem");

    // Set the first dot as active and change its width
    childDots.eq(0).addClass("active").css("width", "100%");
    gsap.set(childDots.eq(0).find(".slider_nav_line"), { x: "0%" });

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

    function moveSlide(nextIndex, forwards) {
      // Remove active class from current dot and reset width
      childDots.eq(activeIndex).removeClass("active").css("width", "0.25rem");

      // Add active class to next dot and set width
      childDots.eq(nextIndex).addClass("active").css("width", "80%");

      let tl3 = gsap.timeline();
      tl3.set(childDots.eq(nextIndex).find(".slider_nav_line"), {
        x: "0%",
      });
      tl3.fromTo(
        childDots.eq(activeIndex).find(".slider_nav_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,
          { yPercent: 100, opacity: 0 },
          { yPercent: 0, opacity: 1 }
        );
        tl.to(prevItem, { yPercent: -50, opacity: 0, scale: 0.95 }, "<");
      } else {
        tl.fromTo(
          nextItem,
          { yPercent: -50, opacity: 0 },
          { yPercent: 0, opacity: 1 }
        );
        tl.to(prevItem, { yPercent: 100, opacity: 0, scale: 0.95 }, "<");
      }

      // tl.fromTo(
      //   nextItem.find(".training-option_caption .char"),
      //   { yPercent: titleFrom },
      //   { yPercent: 0, duration: 1, stagger: { amount: 0.2 } },
      //   titleDelay
      // );

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

      activeIndex = nextIndex;
    }

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

    childArrow.filter(".is-next").on("click", function () {
      goNext(activeIndex + 1);
    });

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

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

// const itemCount = $(".slider_wrap.desktop-show .slider_cms_item").length;
// const $dotList = $(".slider_dot_list").empty();

// for (let i = 0; i < itemCount; i++) {
//   $dotList.append(
//     '<div class="slider_dot_item"><div class="slider_dot_line"></div></div>'
//   );
// }
// const itemCount2 = $(".slider_wrap.mobile-show .slider_cms_item").length;
// const $dotList2 = $(".slider_dot_list").empty();

// for (let i = 0; i < itemCount2; i++) {
//   $dotList2.append(
//     '<div class="slider_dot_item"><div class="slider_dot_line"></div></div>'
//   );
// }

// let currentSwiper = null;
function clipSwiper() {
  // if (currentSwiper) {
  //   currentSwiper.destroy(true, true);
  //   currentSwiper = null;
  // }
  console.log("clipSwiperStart");
  $(".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, { opacity: 0 }, { opacity: 1 });
        tl.fromTo(prevItem, { opacity: 1 }, { opacity: 0 }, "<");
      } else {
        tl.fromTo(nextItem, { opacity: 0 }, { opacity: 1 });
        tl.fromTo(prevItem, { opacity: 1 }, { opacity: 0 }, "<");
      }
      // tl.fromTo(
      //   nextItem.find(".slider_cms_title .char"),
      //   { yPercent: titleFrom },
      //   { yPercent: 0, duration: 1, stagger: { amount: 0.2 } },
      //   titleDelay
      // );

      tl.fromTo(
        nextItem.find(".slider_eyebrow, .slider_copy_box, .slider_cms_title"),
        { 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);
      }
    });
  });
  // return currentSwiper;
}
// function destroyClipSwiper() {
//   if (currentSwiper) {
//     currentSwiper.destroy(true, true);
//     currentSwiper = null;
//   }
// }

function cursorColor() {
  //CURSORS
  const $cursorDot = $(".cursor_dot");
  const defaultColor = $cursorDot.css("background-color");
  const defaultText = $cursorDot.css("color");
  function changeCursorColor(colorVar) {
    $cursorDot.css("background-color", `var(${colorVar})`);
  }
  function changeTextColor(colorValue) {
    $cursorDot.css("color", colorValue);
  }
  $('[data-theme="blue"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--african-lily");
      changeTextColor("var(--swatch--little-devil)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="brown"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--brand");
      changeTextColor("var(--swatch--secondary-dark)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="green"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--budgie-green");
      changeTextColor("var(--swatch--eucalyptus)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="orange"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--lions-tail");
      changeTextColor("var(--swatch--rich-bark)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="lightbrown"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--primary-light");
      changeTextColor("var(--swatch--secondary-mid)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="red"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--waratah-red");
      changeTextColor("var(--swatch--deep-dahlia)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="brand"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--brand)");
      changeTextColor("var(--swatch--secondary-dark)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });

  $('[data-theme="emerald"]')
    .on("mouseenter", function () {
      changeCursorColor("--swatch--ammaroo-turquoise)");
      changeTextColor("var(--swatch--ammaroo-turquoise)");
    })
    .on("mouseleave", function () {
      $cursorDot.css("background-color", defaultColor);
      $cursorDot.css("color", defaultText);
    });
}
$(document).ready(function () {
  cursorColor();
});
// global text reveal
function globalReveal() {
  gsap.matchMedia().add("(min-width: 767px)", () => {
    $("[global-reveal]").each(function () {
      let reveal = $(this);
      let globalRevealLines = reveal.find(".line");

      let textPlay = gsap.timeline({
        scrollTrigger: {
          trigger: reveal,
          start: "top 90%",
          end: "top 80%",
          scrub: 2,
        },
      });

      textPlay.fromTo(
        globalRevealLines,
        {
          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",
          // duration: 1.6,
          // stagger: { each: 0.2 },
        }
      );
    });

    $("[global-show]").each(function () {
      let show = $(this);
      let showPlay = gsap.timeline({
        scrollTrigger: {
          trigger: show,
          start: "top bottom",
          end: "top 85%",
          scrub: true,
        },
      });

      showPlay.fromTo(
        show,
        {
          opacity: 0,
        },
        {
          opacity: 1,
          // duration: 0.8,
          // ease: "primary-ease",
        }
      );
    });
  });
}
// globalReveal();

//globalScripts
function globalScript() {
  gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".page_main").each(function () {
      let pageMain = $(this);
      pageMain.find(".sticky_card").each(function () {
        let stickyCard = $(this);
        ScrollTrigger.create({
          trigger: stickyCard,
          start: "top top",
          endTrigger: ".sticky_end",
          end: "bottom bottom",
          pin: stickyCard[0],
          // markers: true,
          pinSpacing: false,
          scrub: true,
        });
      });
    });
    $(".page_main").each(function () {
      let pageMain2 = $(this);
      pageMain2.find(".sticky_bottom").each(function () {
        let stickyBot = $(this);
        ScrollTrigger.create({
          trigger: stickyBot,
          start: "bottom bottom",
          endTrigger: ".sticky_end",
          end: "bottom bottom",
          pin: stickyBot[0],
          pinSpacing: false,
          scrub: true,
        });
      });
    });
  });

  $(".copy_link").on("click", function () {
    const $this = $(this);
    const url = window.location.href;

    navigator.clipboard.writeText(url).then(() => {
      $this.text("Copied");
      setTimeout(() => {
        $this.text("Copy Link");
      }, 2000);

      gsap.to(this, { scale: 1.1, duration: 0.2, yoyo: true, repeat: 1 });
    });
  });

  gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".reveal_section.home-reveal").each(function () {
      let swiperTrigger = $(this).find(".spacer.is-local");

      let swiperStartTl = gsap.timeline({
        scrollTrigger: {
          trigger: swiperTrigger[0],
          start: "center bottom",
          end: "center bottom",
          toggleActions: "play none none none",
        },
      });

      swiperStartTl.call(clipSwiper);
    });
  });
  // setFullWidthFontSize();

  // lenis.start();

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

  //NAVBAR
  // gsap.matchMedia().add("(min-width: 767px)", () => {

  function initNavScroll() {
    let lastScrollTop = 0;
    const nav = document.querySelector(".nav_component");

    function handleScroll() {
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop;

      if (scrollTop <= 0) {
        gsap.to(nav, { yPercent: 0, duration: 0.4 });
      } else if (scrollTop > lastScrollTop) {
        gsap.to(nav, { yPercent: -100, duration: 0.4 });
      } else {
        gsap.to(nav, { yPercent: 0, duration: 0.4 });
      }

      lastScrollTop = scrollTop;
    }

    window.addEventListener("scroll", handleScroll);
  }
  initNavScroll();

  // });

  // gsap.matchMedia().add("(max-width: 766px)", () => {
  //   ScrollTrigger.create({
  //     trigger: "body", // Trigger for the entire page
  //     start: "top top", // When the top of the body hits the top of the viewport
  //     onEnterBack: () => {
  //       gsap.to(".nav_component", { yPercent: 0, duration: 0.4 });
  //     },
  //     onLeave: () => {
  //       gsap.to(".nav_component", { yPercent: -100, duration: 0.4 }); // Optional if you want to move it off-screen
  //     },
  //   });
  // });

  // On page load, check if the .nav_page_overlay has the .show class and remove it if so
  if ($(".nav_page_overlay").hasClass("show")) {
    $(".nav_page_overlay").removeClass("show");
  }

  $(".nav_dropdown").on("mouseenter", function () {
    $(".nav_page_overlay").addClass("show");
  });

  $(".nav_dropdown").on("mouseleave", function () {
    $(".nav_page_overlay").removeClass("show");
  });

  function updateNavComponent() {
    const navComponent = document.querySelector(".nav_component");
    const btnMainWrap = navComponent.querySelector(".btn_main_wrap");
    const menuBtn = document.querySelector(".menu_btn");
    const navLinks = navComponent.querySelectorAll("a:not(.menu_btn)");
    const originalButtonStyle = btnMainWrap
      ? btnMainWrap.getAttribute("data-button-style")
      : "";
    const originalNavTextColor =
      navComponent.getAttribute("nav-text-color") || "";
    const originalBackgroundColor =
      window.getComputedStyle(navComponent).backgroundColor;
    let isMenuOpen = false;
    ScrollTrigger.create({
      trigger: ".nav_trigger",
      start: "top top",
      end: "top top",
      toggleClass: {
        targets: navComponent,
        className: "nav-scrolled",
      },
      onEnter: () => updateStyles(true),
      onLeaveBack: () => updateStyles(false),
    });
    function updateStyles(isScrolled) {
      if (isScrolled) {
        gsap.to(navComponent, {
          duration: 0.0001,
          attr: { "nav-text-color": "brown" },
          backgroundColor: "#F5F2ED",
        });
        if (btnMainWrap) {
          btnMainWrap.setAttribute("data-button-style", "4");
        }
      } else {
        gsap.to(navComponent, {
          duration: 0.0001,
          attr: { "nav-text-color": originalNavTextColor },
          backgroundColor: originalBackgroundColor,
        });
        if (btnMainWrap) {
          btnMainWrap.setAttribute("data-button-style", originalButtonStyle);
        }
      }
    }
    $(".nav_component").hover(
      function () {
        // Store the original value in a data attribute
        const $btn = $(this).find(".btn_main_wrap");
        $btn.data("original-style", $btn.attr("data-button-style"));
        // Set data-button-style to "4" on hover
        $btn.attr("data-button-style", "4");
      },
      function () {
        // Retrieve the original value and reset it on mouseleave
        const $btn = $(this).find(".btn_main_wrap");
        $btn.attr("data-button-style", $btn.data("original-style"));
      }
    );
    $(".nav_dropdown").each(function () {
      const $dropdown = $(this);
      // Show only the first .dropdown_img_item by default within this .nav_dropdown
      $dropdown.find(".dropdown_img_item").css("opacity", 0);
      $dropdown.find(".dropdown_img_item").first().css("opacity", 1);
      // Hover event for .nav_dropdown_link_item within this .nav_dropdown
      $dropdown.find(".nav_dropdown_link_item").each(function (index) {
        $(this).hover(
          function () {
            // Reset opacity for all .dropdown_img_item within this .nav_dropdown
            $dropdown.find(".dropdown_img_item").css("opacity", 0);
            // Show the corresponding .dropdown_img_item by index
            $dropdown.find(".dropdown_img_item").eq(index).css("opacity", 1);
          },
          function () {
            // Optionally, revert to showing only the first .dropdown_img_item when hover ends
            $dropdown.find(".dropdown_img_item").css("opacity", 0);
            $dropdown.find(".dropdown_img_item").first().css("opacity", 1);
          }
        );
      });
    });
    // $(".ex_link_top").prependTo(".nav_ex_list");
    // $(".ex_link_bot").appendTo(".nav_ex_list");
    // $(".ex_img_bot").appendTo(".nav_ex_imglist");
    // $(".ex_img_top").prependTo(".nav_ex_imglist");
    // $(".ev_link_top").prependTo(".nav_ev_linklist");
    // $(".ev_link_bot").appendTo(".nav_ev_linklist");
    $(".ev_img_bot1").appendTo(".nav_ev_imglist");
    // $(".ev_img_top").prependTo(".nav_ev_imglist");
    ScrollTrigger.create({
      trigger: ".nav_trigger",
      start: "top top",
      onEnter: () => $(".menu_line").css("background-color", "white"),
      onLeaveBack: () => $(".menu_line").css("background-color", ""),
    });
    function toggleMenu() {
      isMenuOpen = !isMenuOpen;
      // Add/remove .bg_white class on .menu_line
      $(".menu_line").toggleClass("bg_white", isMenuOpen);
      if (isMenuOpen) {
        // Menu opened: set transparent nav + brown text
        navComponent.setAttribute("nav-text-color", "brown");
        gsap.to(navComponent, {
          duration: 0.3,
          backgroundColor: "transparent",
        });
      } else {
        // Menu closed: determine scroll position
        const pastTrigger =
          window.scrollY > document.querySelector(".nav_trigger").offsetTop;
        if (pastTrigger) {
          // Keep scrolled styles
          navComponent.setAttribute("nav-text-color", "brown");
          gsap.to(navComponent, {
            duration: 0.3,
            backgroundColor: "#F5F2ED",
          });
        } else {
          // Restore original styles
          navComponent.setAttribute("nav-text-color", originalNavTextColor);
          gsap.to(navComponent, {
            duration: 0.3,
            backgroundColor: originalBackgroundColor,
          });
        }
      }
    }
    menuBtn.addEventListener("click", toggleMenu);
    navLinks.forEach((link) => {
      link.addEventListener("click", () => {
        if (isMenuOpen) {
          toggleMenu();
        }
      });
    });
  }
  updateNavComponent();

  // function updateNavComponent() {
  //   const navComponent = document.querySelector(".nav_component");
  //   const btnMainWrap = navComponent.querySelector(".btn_main_wrap");
  //   const menuBtn = document.querySelector(".menu_btn");
  //   const navLinks = navComponent.querySelectorAll("a:not(.menu_btn)");
  //   const originalButtonStyle = btnMainWrap
  //     ? btnMainWrap.getAttribute("data-button-style")
  //     : "";
  //   const originalNavTextColor =
  //     navComponent.getAttribute("nav-text-color") || "";
  //   const originalBackgroundColor =
  //     window.getComputedStyle(navComponent).backgroundColor;

  //   let isMenuOpen = false;

  //   ScrollTrigger.create({
  //     trigger: ".nav_trigger",
  //     start: "top top",
  //     end: "top top",
  //     toggleClass: {
  //       targets: navComponent,
  //       className: "nav-scrolled",
  //     },
  //     onEnter: () => updateStyles(true),
  //     onLeaveBack: () => updateStyles(false),
  //   });

  //   function updateStyles(isScrolled) {
  //     if (isScrolled) {
  //       gsap.to(navComponent, {
  //         duration: 0.0001,
  //         attr: { "nav-text-color": "brown" },
  //         backgroundColor: "#F5F2ED",
  //       });
  //       if (btnMainWrap) {
  //         btnMainWrap.setAttribute("data-button-style", "4");
  //       }
  //     } else {
  //       gsap.to(navComponent, {
  //         duration: 0.0001,
  //         attr: { "nav-text-color": originalNavTextColor },
  //         backgroundColor: originalBackgroundColor,
  //       });
  //       if (btnMainWrap) {
  //         btnMainWrap.setAttribute("data-button-style", originalButtonStyle);
  //       }
  //     }
  //   }

  //   $(".nav_component").hover(
  //     function () {
  //       // Store the original value in a data attribute
  //       const $btn = $(this).find(".btn_main_wrap");
  //       $btn.data("original-style", $btn.attr("data-button-style"));

  //       // Set data-button-style to "4" on hover
  //       $btn.attr("data-button-style", "4");
  //     },
  //     function () {
  //       // Retrieve the original value and reset it on mouseleave
  //       const $btn = $(this).find(".btn_main_wrap");
  //       $btn.attr("data-button-style", $btn.data("original-style"));
  //     }
  //   );

  //   $(".nav_dropdown").each(function () {
  //     const $dropdown = $(this);

  //     // Show only the first .dropdown_img_item by default within this .nav_dropdown
  //     $dropdown.find(".dropdown_img_item").css("opacity", 0);
  //     $dropdown.find(".dropdown_img_item").first().css("opacity", 1);

  //     // Hover event for .nav_dropdown_link_item within this .nav_dropdown
  //     $dropdown.find(".nav_dropdown_link_item").each(function (index) {
  //       $(this).hover(
  //         function () {
  //           // Reset opacity for all .dropdown_img_item within this .nav_dropdown
  //           $dropdown.find(".dropdown_img_item").css("opacity", 0);
  //           // Show the corresponding .dropdown_img_item by index
  //           $dropdown.find(".dropdown_img_item").eq(index).css("opacity", 1);
  //         },
  //         function () {
  //           // Optionally, revert to showing only the first .dropdown_img_item when hover ends
  //           $dropdown.find(".dropdown_img_item").css("opacity", 0);
  //           $dropdown.find(".dropdown_img_item").first().css("opacity", 1);
  //         }
  //       );
  //     });
  //   });

  //   // $(".ex_link_top").prependTo(".nav_ex_list");
  //   // $(".ex_link_bot").appendTo(".nav_ex_list");
  //   // $(".ex_img_bot").appendTo(".nav_ex_imglist");
  //   // $(".ex_img_top").prependTo(".nav_ex_imglist");

  //   // $(".ev_link_top").prependTo(".nav_ev_linklist");
  //   // $(".ev_link_bot").appendTo(".nav_ev_linklist");
  //   $(".ev_img_bot1").appendTo(".nav_ev_imglist");
  //   // $(".ev_img_top").prependTo(".nav_ev_imglist");

  //   ScrollTrigger.create({
  //     trigger: ".nav_trigger",
  //     start: "top top",
  //     onEnter: () => $(".menu_line").css("background-color", "white"),
  //     onLeaveBack: () => $(".menu_line").css("background-color", ""),
  //   });

  //   function toggleMenu() {
  //     isMenuOpen = !isMenuOpen;
  //     if (isMenuOpen) {
  //       navComponent.setAttribute("nav-text-color", "brown");
  //       gsap.to(navComponent, {
  //         duration: 0.3,
  //         backgroundColor: "transparent",
  //       });
  //     } else {
  //       navComponent.setAttribute("nav-text-color", originalNavTextColor);
  //       gsap.to(navComponent, {
  //         duration: 0.3,
  //         backgroundColor: originalBackgroundColor,
  //       });
  //     }
  //   }

  //   menuBtn.addEventListener("click", toggleMenu);

  //   navLinks.forEach((link) => {
  //     link.addEventListener("click", () => {
  //       if (isMenuOpen) {
  //         toggleMenu();
  //       }
  //     });
  //   });
  // }
  // updateNavComponent();

  // gsap.set("[hero-play] .line", {
  //   rotation: 15,
  //   yPercent: 400,
  // });
  // }
  gsap.set(".cursor_dot", { xPercent: -50, yPercent: -50 });

  let cursor = Observer.create({
    onMove: (self) => {
      let mouseX = self.x;
      let mouseY = self.y;

      let velocityX = self.velocityX;

      let rotation = velocityX > 0 ? 20 : -20;

      gsap.to(".cursor_dot", {
        x: mouseX,
        y: mouseY,
        rotation: rotation,
        duration: 0.3,
        ease: "power1.out",
        onComplete: () => {
          gsap.to(".cursor_dot", { rotation: 0, duration: 0.2 });
        },
      });
    },
  });

  $(document)
    .mousedown(function () {
      $(".cursor_dot").addClass("clip_2");
    })
    .mouseup(function () {
      $(".cursor_dot").removeClass("clip_2");
    });

  $("[hover-el]").each(function (index) {
    let hoverText = $(this).attr("hover-el");
    $(this).on("mouseenter", function () {
      $(".cursor_text").text(hoverText);

      gsap.to(".cursor_dot", {
        width: "5rem",
        height: "5rem",
        ease: "power1.out",
        duration: 0.8,
      });
      gsap.to(".cursor_text_holder", {
        opacity: 1,
        ease: "power1.out",
        delay: 0.3,
        duration: 0.8,
      });
    });

    $(this).on("mouseleave", function () {
      $(".cursor_text").text("");

      gsap.to(".cursor_dot", {
        width: "1.125rem",
        height: "1.125rem",
        ease: "power1.out",
        duration: 0.8,
      });
      gsap.to(".cursor_text_holder", {
        opacity: 0,
        ease: "power1.out",
        duration: 0.8,
      });
    });
  });

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

  $(".link_test").on("mouseenter mouseleave", function () {
    $(".link_layer").toggleClass("clipped");
  });

  function globalFooterReveal() {
    gsap.matchMedia().add("(min-width: 767px)", () => {
      $(".footer_wrapper").each(function () {
        let footerText = $(this).find(".footer_logo_text");
        let footerOverlay = $(this).find(".footer_overlay");
        let footerTextChar = footerText.find(".char");

        let footerTrigger = $(this);
        let textReveal = gsap.timeline({
          scrollTrigger: {
            trigger: footerTrigger,
            start: "top top",
            end: "bottom bottom",
            // toggleActions: "play none play reverse",
            scrub: 2,
          },
        });

        textReveal.fromTo(
          footerTextChar,
          {
            yPercent: 150,
          },
          {
            duration: 1.4,
            yPercent: 0,
            stagger: 0.05,
            ease: "expo.out",
          }
        );

        let footerLighten = gsap.timeline({
          scrollTrigger: {
            trigger: footerTrigger,
            start: "top 60%",
            end: "top top",
            scrub: true,
          },
        });

        footerLighten.fromTo(
          footerOverlay,
          {
            opacity: 1,
          },
          {
            opacity: 0,
          }
        );
      });
    });
  }

  $(document).ready(function () {
    globalFooterReveal();
  });

  $("[yparallax]").each(function () {
    let yImgHolder = $(this);
    let yImg = $(this).find(".g_visual_wrap");
    let yParallax = gsap.timeline({
      scrollTrigger: {
        trigger: yImgHolder,
        start: "top bottom",
        end: "bottom top",
        scrub: true,
      },
    });

    yParallax.fromTo(
      yImgHolder,
      {
        yPercent: 20,
      },
      {
        yPercent: -20,
      }
    );
    yParallax.fromTo(
      yImg,
      {
        yPercent: -10,
      },
      {
        yPercent: 10,
      },
      "<"
    );
  });

  gsap.matchMedia().add("(min-width: 767px)", () => {
    $("[create-parallax]").each(function () {
      let createImgHolder = $(this);
      let createImg = $(this).find(".g_visual_wrap");
      let createParallax = gsap.timeline({
        scrollTrigger: {
          trigger: createImgHolder,
          start: "top bottom",
          end: "bottom top",
          scrub: true,
        },
      });

      createParallax.fromTo(
        createImgHolder,
        {
          yPercent: 20,
        },
        {
          yPercent: -20,
        }
      );
      createParallax.fromTo(
        createImg,
        {
          yPercent: -10,
        },
        {
          yPercent: 10,
        },
        "<"
      );
    });
  });

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

    imgScrollTimeline.fromTo(
      parallaxImg,
      { yPercent: 0, scale: 1.1 },
      { yPercent: 20, scale: 1.1, ease: "linear" }
    );
  });
  //curate MODAL

  $(".page_main").each(function (index) {
    let curateHeader = $(this).find("[curate-header]");
    let curateLines = curateHeader.find(".line");
    let teamLeftOpacity = $(this).find("[team-modal-opacity]");
    let popupTlCurate = gsap.timeline({ paused: true });

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

    popupTlCurate.fromTo(
      ".modal_overlay.curate",
      { opacity: 0 },
      {
        opacity: 1,
        duration: 0.4,
        ease: "power3.out",
        onStart: () => $(".create_modal_right").scrollTop(0),
      }
    );

    popupTlCurate.fromTo(
      ".create_modal_right.curate",
      { xPercent: 100 },
      { xPercent: 0, duration: 1.5, ease: "power3.out" },
      "<"
    );
    popupTlCurate.fromTo(
      ".create_modal_right.curate",
      {
        clipPath:
          "polygon(100% 0%, 55% 0%, 61% 19%, 54% 45%, 62% 65%, 56% 79%, 56% 100%, 100% 100%)",
      },
      {
        clipPath:
          "polygon(100% 0%, 0% 0%, 0% 21%, 0% 40%, 0% 69%, 0% 89%, 0% 100%, 100% 100%)",
        duration: 1.6,
        ease: "power3.out",
      },
      "<"
    );
    popupTlCurate.fromTo(
      curateLines,
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      },
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        ease: "expo.out",
        duration: 1.6,
        delay: 0.4,
        stagger: { each: 0.2 },
      },
      "<"
    );

    popupTlCurate.fromTo(
      teamLeftOpacity,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 1.6,
        ease: "power3.out",
      },
      "<+1"
    );

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

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

  //CONTACT MODAL

  $(".page_main").each(function (index) {
    let contactHeader = $(this).find("[contact-header]");
    let contactLines = contactHeader.find(".line");
    let teamLeftOpacity = $(this).find("[team-modal-opacity]");
    let popupTlContact = gsap.timeline({ paused: true });

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

    popupTlContact.fromTo(
      ".modal_overlay.contact",
      { opacity: 0 },
      {
        opacity: 1,
        duration: 0.4,
        ease: "power3.out",
        onStart: () => $(".create_modal_right").scrollTop(0),
      }
    );

    popupTlContact.fromTo(
      ".create_modal_right.contact",
      { xPercent: 100 },
      { xPercent: 0, duration: 1.5, ease: "power3.out" },

      "<"
    );
    popupTlContact.fromTo(
      ".create_modal_right.contact",
      {
        clipPath:
          "polygon(100% 0%, 55% 0%, 61% 19%, 54% 45%, 62% 65%, 56% 79%, 56% 100%, 100% 100%)",
      },
      {
        clipPath:
          "polygon(100% 0%, 0% 0%, 0% 21%, 0% 40%, 0% 69%, 0% 89%, 0% 100%, 100% 100%)",
        duration: 1.6,
        ease: "power3.out",
      },
      "<"
    );
    popupTlContact.fromTo(
      contactLines,
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      },
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        ease: "expo.out",
        duration: 1.6,
        stagger: { each: 0.2 },
      },
      "<"
    );

    popupTlContact.fromTo(
      teamLeftOpacity,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 1.6,
        ease: "power3.out",
      },
      "<+1"
    );

    $("[popup-trigger-contact]").on("click", function () {
      popupTlContact.restart(); // Restart the timeline
      if (typeof lenis !== "undefined") lenis.stop();
      $("[popup-wrapper-contact]").css("display", "flex");
    });

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

  //MENU

  // Cache jQuery selections for better performance
  const $menuBtn = $(".menu_btn");
  const $menuComp = $(".menu_comp");
  const $menuLinks = $("[menu-link] .line");
  const $menuDropdownLink = $(".menu_dropdown_link");
  const $menuBack = $(".menu_back");

  // Track menu state
  let isMenuOpen = false;

  // Initialize menu animation timeline
  function menuOpen() {
    console.log("menu");

    // Set initial states
    gsap.set($menuComp, { display: "none" });
    gsap.set($menuLinks, { opacity: 0 });

    let menuOpenTimeline = gsap.timeline({
      paused: true,
      onStart: () => lenis.stop(),
    });

    menuOpenTimeline.set($menuComp, { display: "flex" });

    menuOpenTimeline.fromTo(
      $menuComp,
      {
        height: "0",
        opacity: 0,
      },
      {
        height: "auto",
        opacity: 1,
        ease: "expo.inOut",
        duration: 0.8, // Reduced for better responsiveness
      }
    );

    menuOpenTimeline.fromTo(
      $menuLinks,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        ease: "expo.out",
        duration: 0.8, // Reduced for consistency
        stagger: { each: 0.1 },
        ease: "power1.out",
      },
      "<+0.6" // Adjusted timing
    );

    return menuOpenTimeline;
  }

  // Initialize timeline
  let menuOpenTimeline = menuOpen();

  // Handle menu button clicks
  $menuBtn.on("click", function () {
    // Reset dropdown state immediately
    $menuDropdownLink.removeClass("is-active");
    $menuBack.css("transform", "translateX(100%)");

    if (!isMenuOpen) {
      menuOpenTimeline.timeScale(1).play();
      isMenuOpen = true;
    } else {
      isMenuOpen = false;
      menuOpenTimeline.timeScale(2).reverse();
      // Reset immediately instead of waiting for animation
      gsap.set($menuComp, { display: "none" });
      gsap.set($menuLinks, { opacity: 0 });
      lenis.start();
    }
  });

  // Handle dropdown menu interactions
  $menuDropdownLink.on("click", function () {
    $(this).addClass("is-active");
    $menuBack.css(
      "transform",
      $(this).hasClass("is-active") ? "translateX(0%)" : "translateX(100%)"
    );
  });

  // Handle back button in dropdown
  $(".menu_back_holder").on("click", function () {
    $menuDropdownLink.removeClass("is-active");
    $menuBack.css("transform", "translateX(100%)");
  });

  //CHECKBOX
  function observeCheckbox(checkbox) {
    const observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        if ($(checkbox).hasClass("w--redirected-checked")) {
          $(checkbox).closest(".checkbox_holder").addClass("is-active");
        } else {
          $(checkbox).closest(".checkbox_holder").removeClass("is-active");
        }
      });
    });

    observer.observe(checkbox, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }
  $(".curate_checkbox").each(function () {
    observeCheckbox(this);
  });

  let seenTexts = {};

  $("[popup-component]").each(function (index) {
    let popupEl = $(this).find("[popup-wrapper]");
    let popupTrig = $(this).find("[popup-trigger]");
    let popupBg = $(this).find(".team_overlay");
    let popupClose = $(this).find(".modal_close_team");
    let popupContent = $(this).find(".team_hero_right");
    let popupLeft = $(this).find(".team_hero_left");
    let teamLeftOpacity = $(this).find("[team-modal-opacity]");
    let teamHeader = $(this).find("[team-header]");
    let teamHeaderLines = teamHeader.find(".line");
    let popupTl = gsap.timeline({ paused: true });
    popupTl.set(popupEl, {
      display: "flex",
    });

    popupTl.fromTo(
      popupBg,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 0.4,
        ease: "power3.out",
        onStart: () => $(".team_modal_right").scrollTop(0),
      }
    );
    popupTl.fromTo(
      popupContent,
      {
        xPercent: 100,
      },
      {
        xPercent: 0,
        duration: 1.5,
        ease: "power3.out",
      },
      "<"
    );

    popupTl.fromTo(
      popupContent,
      {
        clipPath:
          "polygon(100% 0%, 55% 0%, 61% 19%, 54% 45%, 62% 65%, 56% 79%, 56% 100%, 100% 100%)",
      },
      {
        clipPath:
          "polygon(100% 0%, 0% 0%, 0% 21%, 0% 40%, 0% 69%, 0% 89%, 0% 100%, 100% 100%)",
        duration: 1.6,
        ease: "power3.out",
      },
      "<"
    );
    popupTl.fromTo(
      teamHeaderLines,
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      },
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        ease: "expo.out",
        duration: 1.6,
        stagger: { each: 0.2 },
      },
      "<"
    );
    popupTl.fromTo(
      popupLeft,
      {
        xPercent: 60,
        clipPath: "polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%)",
      },
      {
        xPercent: 0,
        clipPath: "polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%)",
        duration: 1.6,
        ease: "power3.out",
      },
      "<+0.8"
    );

    popupTl.fromTo(
      teamLeftOpacity,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 1.6,
        ease: "power3.out",
      },
      "<+0.2"
    );

    popupTrig.on("click", function () {
      popupTl.play();
      lenis.stop();
    });

    popupClose.on("click", function () {
      popupTl.timeScale(1.5).reverse();
      lenis.start();
    });

    popupBg.on("click", function () {
      popupTl.timeScale(1.5).reverse();
      lenis.start();
    });
  });
  // gsap.matchMedia().add("(min-width: 767px)", () => {
  $(".nav_component").each(function () {
    let originalBgColor = $(this).css("backgroundColor");

    gsap.set($(this), { backgroundColor: "transparent" });

    let navBgChange = gsap.timeline({
      scrollTrigger: {
        trigger: ".nav_trigger",
        start: "top top",
        end: "top top",
        scrub: true,
      },
    });

    navBgChange.fromTo(
      $(this),
      { backgroundColor: "transparent" },
      {
        backgroundColor: originalBgColor,
        duration: 1,
        ease: "power2.out",
      }
    );
  });
  // });
  gsap.matchMedia().add("(max-width: 766px)", () => {
    $(".nav_component").each(function () {
      let menuLine = $(this).css("backgroundColor");

      gsap.set($(this), { backgroundColor: "transparent" });

      let menuBgChange = gsap.timeline({
        scrollTrigger: {
          trigger: ".nav_trigger",
          start: "top top",
          end: "top top",
          scrub: true,
        },
      });

      menuBgChange.fromTo(
        $(this),
        { backgroundColor: "transparent" },
        {
          backgroundColor: "#FFF",
          duration: 1,
          ease: "power2.out",
        }
      );
    });
  });

  $("[popup-component]").each(function (index) {
    let popupEl = $(this).find("[popup-wrapper]");
    let popupTrig = $(this).find("[popup-trigger]");
    let popupBg = $(this).find(".modal_overlay");
    let popupClose = $(this).find(".modal_close");
    let popupContent = $(this).find(".create_modal_right");
    let teamLeftOpacity = $(this).find("[modal-opacity]");
    let modalHeader = $(this).find("[modal-header]");
    let modalHeroImg = $(this).find(".mhero_img_holder");
    let modalHeaderLines = modalHeader.find(".line");
    let popupTl = gsap.timeline({ paused: true });
    popupTl.fromTo(
      popupEl,
      {
        display: "none",
      },
      {
        display: "flex",
      }
    );

    popupTl.fromTo(
      popupBg,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 0.4,
        ease: "power3.out",
        onStart: () => $(".create_modal_right").scrollTop(0),
      }
    );
    popupTl.fromTo(
      popupContent,
      {
        xPercent: 100,
      },
      {
        xPercent: 0,
        duration: 1.5,
        ease: "power3.out",
      },
      "<"
    );

    popupTl.fromTo(
      popupContent,
      {
        clipPath:
          "polygon(100% 0%, 55% 0%, 61% 19%, 54% 45%, 62% 65%, 56% 79%, 56% 100%, 100% 100%)",
      },
      {
        clipPath:
          "polygon(100% 0%, 0% 0%, 0% 21%, 0% 40%, 0% 69%, 0% 89%, 0% 100%, 100% 100%)",
        duration: 1.6,
        ease: "power3.out",
      },
      "<"
    );

    popupTl.fromTo(
      modalHeaderLines,
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      },
      {
        clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        ease: "expo.out",
        duration: 1.6,
        stagger: { each: 0.2 },
      },
      "<"
    );
    popupTl.fromTo(
      modalHeroImg,
      {
        clipPath: "polygon(100% 0%, 100% 0%, 0% 0%, 0% 0%)",
      },
      {
        clipPath: "polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%)",
        duration: 2.5,
        ease: "power3.out",
      },
      "<0.3"
    );
    popupTl.fromTo(
      teamLeftOpacity,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 1.6,
        ease: "power3.out",
      },
      "<+0.8"
    );

    popupTrig.on("click", function () {
      popupTl.play();
      lenis.stop();
    });

    popupClose.on("click", function () {
      popupTl.timeScale(1.5).reverse();
      lenis.start();
    });

    popupBg.on("click", function () {
      popupTl.timeScale(1.5).reverse();
      lenis.start();
    });
  });

  //journal item modal
  function normalizeText(text) {
    return text
      .trim()
      .toLowerCase()
      .replace(/\s+/g, " ") // Replace multiple spaces with single space
      .replace(/[^\w\s]/g, ""); // Remove special characters except word chars and spaces
  }

  function findBestMatch(clickedText, modalHeaders) {
    const normalizedClicked = normalizeText(clickedText);

    // First try exact match after normalization
    for (let i = 0; i < modalHeaders.length; i++) {
      const normalizedHeader = normalizeText(modalHeaders[i].text);
      if (normalizedHeader === normalizedClicked) {
        return modalHeaders[i];
      }
    }

    // If no exact match, try suffix matching (header ends with clicked text)
    for (let i = 0; i < modalHeaders.length; i++) {
      const normalizedHeader = normalizeText(modalHeaders[i].text);
      if (normalizedHeader.endsWith(normalizedClicked)) {
        console.log(
          `Found suffix match: "${normalizedHeader}" ends with "${normalizedClicked}"`
        );
        return modalHeaders[i];
      }
    }

    // If no suffix match, try partial matching (clicked text is contained in header)
    for (let i = 0; i < modalHeaders.length; i++) {
      const normalizedHeader = normalizeText(modalHeaders[i].text);
      if (normalizedHeader.includes(normalizedClicked)) {
        console.log(
          `Found partial match: "${normalizedHeader}" contains "${normalizedClicked}"`
        );
        return modalHeaders[i];
      }
    }

    return null;
  }

  function normalizeText(text) {
    return text
      .trim()
      .toLowerCase()
      .replace(/\s+/g, " ") // Replace multiple spaces with single space
      .replace(/[^\w\s]/g, ""); // Remove special characters except word chars and spaces
  }

  function findBestMatch(clickedText, modalHeaders) {
    const normalizedClicked = normalizeText(clickedText);

    // First try exact match after normalization
    for (let i = 0; i < modalHeaders.length; i++) {
      const normalizedHeader = normalizeText(modalHeaders[i].text);
      if (normalizedHeader === normalizedClicked) {
        return modalHeaders[i];
      }
    }

    // If no exact match, try suffix matching (header ends with clicked text)
    for (let i = 0; i < modalHeaders.length; i++) {
      const normalizedHeader = normalizeText(modalHeaders[i].text);
      if (normalizedHeader.endsWith(normalizedClicked)) {
        console.log(
          `Found suffix match: "${normalizedHeader}" ends with "${normalizedClicked}"`
        );
        return modalHeaders[i];
      }
    }

    // If no suffix match, try partial matching (clicked text is contained in header)
    for (let i = 0; i < modalHeaders.length; i++) {
      const normalizedHeader = normalizeText(modalHeaders[i].text);
      if (normalizedHeader.includes(normalizedClicked)) {
        console.log(
          `Found partial match: "${normalizedHeader}" contains "${normalizedClicked}"`
        );
        return modalHeaders[i];
      }
    }

    return null;
  }

  function triggerModal(clickedText) {
    console.log("Triggering modal for:", clickedText);
    console.log("Clicked text length:", clickedText.length);

    // Enhanced debugging
    console.log("Raw clicked text:", JSON.stringify(clickedText));
    console.log(
      "Normalized clicked text:",
      JSON.stringify(normalizeText(clickedText))
    );

    $(".create_modal_wrapper").css("display", "flex");

    let found = false;

    // Collect all modal headers first
    const modalHeaders = [];
    $(".create_modal_item").each(function () {
      const $popup = $(this);
      const headerText = $popup.find("[modal-header]").text().trim();
      modalHeaders.push({
        text: headerText,
        element: $popup,
      });
    });

    // Find the best match using flexible matching
    const matchedModal = findBestMatch(clickedText, modalHeaders);

    if (matchedModal) {
      const $popup = matchedModal.element;
      console.log("Match found. Opening modal.");
      console.log("Matched header:", JSON.stringify(matchedModal.text));

      $popup.css("display", "flex");

      let modalBg = $popup.find(".modal_overlay");
      let modalClose = $popup.find(".modal_close");
      let modalContent = $popup.find(".create_modal_right");
      let modalOpacity = $popup.find("[modal-opacity]");
      let modalHeader = $popup.find("[modal-header]");
      let modalHeaderLines = modalHeader.find(".line");
      let modalImg = $popup.find(".mhero_img_holder");

      const tl = gsap.timeline();

      tl.fromTo(modalBg, { opacity: 0 }, { opacity: 1, duration: 0.4 })
        // .fromTo(
        //   modalClose,
        //   { opacity: 0 },
        //   { opacity: 1, duration: 0.4 },
        //   "<"
        // )
        // .fromTo(
        //   modalBg,
        //   { opacity: 0 },
        //   {
        //     opacity: 1,
        //     duration: 0.4,
        //     ease: "power3.out",
        //     onStart: () => modalContent.scrollTop(0),
        //   }
        // )
        .fromTo(
          modalContent,
          { xPercent: 100 },
          {
            xPercent: 0,
            duration: 1.5,
            ease: "power3.out",
          },
          "<"
        )
        .fromTo(
          modalContent,
          {
            clipPath:
              "polygon(100% 0%, 55% 0%, 61% 19%, 54% 45%, 62% 65%, 56% 79%, 56% 100%, 100% 100%)",
          },
          {
            clipPath:
              "polygon(100% 0%, 0% 0%, 0% 21%, 0% 40%, 0% 69%, 0% 89%, 0% 100%, 100% 100%)",
            duration: 1.6,
            ease: "power3.out",
          },
          "<"
        )
        .fromTo(
          modalHeaderLines,
          {
            clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
          },
          {
            clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
            ease: "expo.out",
            duration: 1.6,
            stagger: { each: 0.2 },
          },
          "<"
        )
        .fromTo(
          modalImg,
          {
            clipPath: "polygon(100% 0%, 100% 0%, 0% 0%, 0% 0%)",
          },
          {
            clipPath: "polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%)",
            duration: 2.5,
            ease: "power3.out",
          },
          "<0.3"
        )
        .fromTo(
          modalOpacity,
          { opacity: 0 },
          {
            opacity: 1,
            duration: 1.6,
            ease: "power3.out",
          },
          "<+0.8"
        );

      found = true;

      // Remove any existing event listeners to prevent multiple bindings
      modalClose.off("click.modalTrigger");
      modalBg.off("click.modalTrigger");

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

      modalBg.on("click.modalTrigger", function () {
        tl.timeScale(1.5).reverse();
        tl.eventCallback("onReverseComplete", () => {
          $popup.css("display", "none");
          $(".create_modal_wrapper").css("display", "none");
        });
      });
    }

    if (!found) {
      console.warn("No matching modal found for:", clickedText);
      console.warn("Available modal headers:");
      modalHeaders.forEach((header, index) => {
        console.warn(`${index + 1}. Raw:`, JSON.stringify(header.text));
        console.warn(
          `${index + 1}. Normalized:`,
          JSON.stringify(normalizeText(header.text))
        );
      });
      $(".create_modal_wrapper").css("display", "none");
    }
  }

  // Remove any existing event listeners and add new ones
  $(".journal_rich a")
    .off("click.modalTrigger")
    .on("click.modalTrigger", function (e) {
      e.preventDefault();
      if (typeof lenis !== "undefined") {
        lenis.stop();
      }
      const clickedText = $(this).text().trim();
      console.log("Journal rich link clicked text:", clickedText);
      triggerModal(clickedText);
    });

  $(".journal_banner")
    .off("click.modalTrigger")
    .on("click.modalTrigger", function () {
      if (typeof lenis !== "undefined") {
        lenis.stop();
      }
      const $bannerHeadingEl = $(this).find("[banner-heading]");
      const clickedText = $bannerHeadingEl.text().trim() || "";
      console.log("Journal banner clicked text:", clickedText);

      if (clickedText) {
        triggerModal(clickedText);
      } else {
        console.warn("No banner-heading text found or it's empty");
        console.warn("Banner element:", this);
        console.warn("Banner heading element:", $bannerHeadingEl[0]);
      }
    });

  // Optional: Add a function to refresh modal bindings if CMS content is dynamically loaded
  function refreshModalBindings() {
    console.log("Refreshing modal bindings...");

    // Re-bind events
    $(".journal_rich a")
      .off("click.modalTrigger")
      .on("click.modalTrigger", function (e) {
        e.preventDefault();
        if (typeof lenis !== "undefined") {
          lenis.stop();
        }
        const clickedText = $(this).text().trim();
        console.log("Journal rich link clicked text:", clickedText);
        triggerModal(clickedText);
      });

    $(".journal_banner")
      .off("click.modalTrigger")
      .on("click.modalTrigger", function () {
        if (typeof lenis !== "undefined") {
          lenis.stop();
        }
        const $bannerHeadingEl = $(this).find("[banner-heading]");
        const clickedText = $bannerHeadingEl.text().trim() || "";
        console.log("Journal banner clicked text:", clickedText);

        if (clickedText) {
          triggerModal(clickedText);
        } else {
          console.warn("No banner-heading text found or it's empty");
        }
      });

    console.log("Modal bindings refreshed.");
  }

  // If you're using Webflow's CMS and content loads dynamically,
  // you might need to call refreshModalBindings() after content loads
  // Example: setTimeout(refreshModalBindings, 1000);

  //close

  $(".menu_btn").on("click", function () {
    $(this).toggleClass("is-active");
  });

  $("form").each(function () {
    $(this)
      .find("[id]")
      .each(function (index) {
        var originalId = $(this).attr("id");
        var newId = originalId + "-" + index; // Append index to create a unique ID
        $(this).attr("id", newId);
      });
  });

  //END GLOBAL FUNCTION
}

globalScript();

function globalContactScript() {
  gsap.to(".nav_link_holder.global", { opacity: 1, duration: 0.5 });
  console.log("globalcontact");
  $("#AFRICA-2-0").prop("checked", true);
  setTimeout(() => {
    $(".toggle_wrapper_text").text("AFRICA");
  }, 320);
  $(".toggle_wrapper2").css("transform", "translateX(0%)");

  $("#AFRICA-2-0").change(function () {
    if ($(this).is(":checked")) {
      setTimeout(() => {
        $(".toggle_wrapper_text").text("AFRICA");
      }, 320);
      $(".toggle_wrapper2").css("transform", "translateX(0%)");
    }
  });
  $("#AUS-2-1").change(function () {
    if ($(this).is(":checked")) {
      setTimeout(() => {
        $(".toggle_wrapper_text").text("AUSTRALIA");
      }, 320);
      $(".toggle_wrapper2").css("transform", "translateX(100%)");
    }
  });
  $(document).ready(function () {
    $(".contact_content.sa").css("display", "grid");
    $(".contact_content.aus").css("display", "grid");

    const animDuration = 0.5;

    gsap.set(".contact_content.sa", { yPercent: 0 });

    $('.price_toggle_holder input[type="radio"]').on("change", function () {
      const radioIndex = $(this).parent().index();
      if (radioIndex === 0) {
        gsap.to(".contact_content.sa", {
          yPercent: 0,
          opacity: 1,
          pointerEvents: "auto",
          duration: animDuration,
          ease: "power1.out",
        });
        gsap.to(".contact_content.aus", {
          yPercent: 0,
          opacity: 0,
          pointerEvents: "none",
          duration: animDuration,
          ease: "power1.out",
        });
      } else if (radioIndex === 1) {
        gsap.to(".contact_content.sa", {
          yPercent: 0,
          opacity: 0,
          pointerEvents: "none",
          duration: animDuration,
          ease: "power1.out",
        });
        gsap.to(".contact_content.aus", {
          yPercent: 0,
          opacity: 1,
          pointerEvents: "auto",
          duration: animDuration,
          ease: "power1.out",
        });
      }
    });
  });
}

function homeScripts() {
  $(".local_hero_wrap").each(function () {
    let homeHero = $(this);
    let homePinEl = homeHero.find(".hero_visual_wrap.local");
    let homeHeroTrigger = homeHero.find(".local_hero_spacer");
    let heroMid = homeHero.find(".hero_mid");
    ScrollTrigger.create({
      trigger: homeHeroTrigger,
      start: "top top",
      end: "bottom top",
      pin: homePinEl,
      pinSpacing: false,
      scrub: true,
    });

    let localHeroOverlay = document.querySelector(".hero_overlay.home");
    let localOverlayPlay = gsap.timeline({
      scrollTrigger: {
        trigger: ".local_hero_spacer",
        start: "top top",
        end: "bottom top",
        scrub: true,
      },
    });

    localOverlayPlay.fromTo(
      localHeroOverlay,
      {
        opacity: 0,
      },
      {
        opacity: 1,
      }
    );
  });

  let heroTrigger = document.querySelector(".hero_visual_wrap.local");
  let heroOverlay = document.querySelector(".hero_overlay.home");
  let heroParallax = gsap.timeline({
    scrollTrigger: {
      trigger: heroTrigger,
      start: "top top",
      end: "bottom top",
      scrub: true,
    },
  });

  heroParallax.fromTo(
    heroTrigger,
    {
      yPercent: 0,
    },
    {
      yPercent: 10,
    }
  );
  heroParallax.fromTo(
    heroOverlay,
    {
      opacity: 0,
    },
    {
      opacity: 1,
    },
    "<"
  );

  let heroBottom = gsap.timeline({
    scrollTrigger: {
      trigger: ".hero_bottom",
      start: "top center",
      endTrigger: ".section_1",
      end: "top top",
      scrub: true,
    },
  });

  heroBottom.fromTo(
    ".hero_bottom",
    {
      yPercent: 0,
    },
    {
      yPercent: 30,
    }
  );

  let heroPathLocal = gsap.timeline({
    scrollTrigger: {
      trigger: ".hero_bottom",
      start: "top bottom",
      end: "bottom bottom",
      scrub: 2,
    },
  });

  heroPathLocal.to(".hero_path", {
    opacity: 1,
    duration: 0.01,
  });

  heroPathLocal.fromTo(
    ".hero_bottom path",
    {
      drawSVG: "0% 0%",
    },
    {
      drawSVG: "100% 0%",
      duration: 1.5,
      ease: "expo.Out",
    }
  );

  let heroPath = gsap.timeline({
    scrollTrigger: {
      trigger: ".hero_bottom",
      start: "top 80%",
      end: "top 80%",
      toggleActions: "play none reverse none",
      duration: 1.5,
    },
  });

  heroPath.fromTo(
    ".svg_logo",
    {
      opacity: 0,
    },
    {
      opacity: 1,
    }
  );

  $("[local-copy]").each(function () {
    let categoryReveal = $(this);

    let textPlay = gsap.timeline({
      scrollTrigger: {
        trigger: ".hero_bottom",
        start: "top 80%",
        end: "top 80%",
        toggleActions: "play none reverse none",
      },
    });

    textPlay.fromTo(
      categoryReveal,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        ease: "expo.out",
        duration: 1,
      }
    );
  });

  gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".local_sticky_svg_holder").each(function () {
      let maskImgHolder = $(this);
      let stickyMaskPlay = gsap.timeline({
        scrollTrigger: {
          trigger: this,
          start: "top 70%",
          end: "end 70%",
          scrub: 2,
        },
      });

      stickyMaskPlay.fromTo(
        maskImgHolder,
        {
          clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
        },
        {
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        }
      );
    });

    $(".local_marquee_img_holder").each(function () {
      let stickyImgScale = $(this);

      let imgScale = gsap.timeline({
        scrollTrigger: {
          trigger: stickyImgScale,
          start: "top bottom",
          end: "top 80%",
          scrub: 2,
        },
      });

      imgScale.fromTo(
        stickyImgScale,
        {
          scale: 0.9,
        },
        {
          scale: 1,
        }
      );
    });

    const overlays = gsap.utils.toArray(".sticky_card_overlay");

    overlays.forEach((overlay) => {
      gsap.fromTo(
        overlay,
        { opacity: 0 },
        {
          opacity: 1,
          scrollTrigger: {
            trigger: overlay,
            start: "bottom bottom",
            end: "bottom top",
            scrub: true,
          },
        }
      );
    });

    $(".local_sticky_card").each(function () {
      let stickyCard = $(this);

      gsap.to(stickyCard, {
        scrollTrigger: {
          trigger: stickyCard,
          start: "top top",
          endTrigger: ".reveal_section",
          end: "top top",
          pin: true,
          pinSpacing: false,
          scrub: true,
        },
      });
    });

    const stickyCards = document.querySelectorAll(".local_sticky_card_holder");

    stickyCards.forEach((card) => {
      const marqueePanel = card.querySelector(".marquee_panel_main");

      if (!marqueePanel) return;

      ScrollTrigger.create({
        trigger: card,
        start: "top bottom",
        end: "bottom 40%",
        scrub: 1,

        onUpdate: (self) => {
          gsap.to(marqueePanel, {
            y: `${self.progress * -60}vh`,
            duration: 0.5,
            ease: "power1.out",
          });
        },
      });
    });
  });
}

function caseStudiesScripts() {
  $(".cs_filter_btn").on("click", function () {
    const filterText = $(this).text().trim().toLowerCase();

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

    $(".cs_item").each(function () {
      const tagText = $(this).find("[cs-tag]").text().trim().toLowerCase();
      if (filterText === "all" || tagText === filterText) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
    ScrollTrigger.refresh();
  });

  // // function resetJournalItems() {
  // //   $(".journal_item").hide();
  // //   $(".journal_item").slice(0, 6).show();
  // // }
  // function updateLoadMoreButton() {
  //   const activeFilter = $(".filter_btn.is-active").text();

  //   if (!activeFilter || activeFilter === "All") {
  //     if ($(".journal_item:hidden").length === 0) {
  //       $("[data-load-more]").hide();
  //     } else {
  //       $("[data-load-more]").show();
  //     }
  //   } else {
  //     const hiddenFilteredItems = $(".journal_item:hidden").filter(function () {
  //       return $(this).find(".cs_hidden_text").text() === activeFilter;
  //     });

  //     if (hiddenFilteredItems.length === 0) {
  //       $("[data-load-more]").hide();
  //     } else {
  //       $("[data-load-more]").show();
  //     }
  //   }
  // }

  // // resetJournalItems();
  // updateLoadMoreButton();

  // // Load more button functionality
  // $("[data-load-more]").click(function () {
  //   const activeFilter = $(".filter_btn.is-active").text();

  //   if (!activeFilter || activeFilter === "All") {
  //     $(".journal_item:hidden").slice(0, 6).show();
  //   } else {
  //     $(".journal_item:hidden")
  //       .filter(function () {
  //         return $(this).find(".cs_hidden_text").text() === activeFilter;
  //       })
  //       .slice(0, 3)
  //       .show();
  //   }

  //   updateLoadMoreButton();
  // });

  // // Filter button functionality
  // $(".filter_btn").on("click", function () {
  //   $(".filter_btn").removeClass("is-active");
  //   $(this).addClass("is-active");

  //   const filterText = $(this).text();

  //   if (filterText === "All" || !filterText) {
  //     resetJournalItems();
  //   } else {
  //     $(".journal_item").hide();
  //     const matchingItems = $(".journal_item").filter(function () {
  //       return $(this).find(".cs_hidden_text").text() === filterText;
  //     });

  //     matchingItems.slice(0, 6).show();
  //   }

  //   updateLoadMoreButton();
  // });
}

function globalHomeScripts() {
  function initializeCountryCardAnimations() {
    function animateCard(card) {
      logoExpand(card);
      breakUpText(card);
      breakDownText(card);
    }

    function countryCardParallax() {
      $(".country_card").each(function () {
        let ccParallax = gsap.timeline({
          scrollTrigger: {
            trigger: $(this),
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        });
        ccParallax.fromTo(
          $(this).find(".country_card_parallax"),
          {
            yPercent: -20,
          },
          {
            yPercent: 0,
          }
        );
      });
    }
    function countryContentParallax() {
      $(".country_card").each(function () {
        let cconParallax = gsap.timeline({
          scrollTrigger: {
            trigger: $(this),
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        });
        cconParallax.fromTo(
          $(this).find(".country_card_content"),
          {
            yPercent: 0,
          },
          {
            yPercent: -20,
          }
        );
      });
    }
    function logoExpand(card) {
      // gsap.matchMedia().add("(min-width: 767px)", () => {
      let logoHolder = $(card).find(".countrycard_image_holder");
      gsap.timeline().fromTo(
        logoHolder,
        {
          scale: 0,
        },
        {
          scale: 0.8,
          duration: 2.5,
          ease: "power3.out",
        }
      );
      // });
    }

    function breakUpText(card) {
      // gsap.matchMedia().add("(min-width: 767px)", () => {
      let chars = $(card).find("[split-up] .char");
      gsap.timeline().to(
        chars,
        {
          yPercent: -240,
          stagger: {
            each: 0.04,
            from: "center",
          },
          ease: "power3.out",
          duration: 2,
        },
        "<"
      );
      // });
    }
    function breakDownText(card) {
      let chars = $(card).find("[split-down] .char");
      gsap.timeline().to(
        chars,
        {
          yPercent: 240,
          stagger: {
            each: 0.04,
            from: "center",
          },
          ease: "power3.out",
          duration: 2,
        },
        "<"
      );
    }
    // gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".country_card").each(function () {
      let card = this;
      ScrollTrigger.create({
        trigger: $(card),
        start: "center 80%",
        onEnter: () => animateCard(card),
        once: true,
      });
    });
    // });
    countryCardParallax();
    countryContentParallax();
    // gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".country_card").each(function () {
      let ccLine = gsap.timeline({
        scrollTrigger: {
          trigger: this,
          start: "top center",
          toggleActions: "play none none none",
        },
      });
      ccLine.fromTo(
        $(this).find(".country_card_line"),
        {
          height: "0rem",
        },
        {
          height: "4rem",
          duration: 0.6,
          ease: "power1.out",
        }
      );
      ccLine.to(
        $(this).find(".country_card_bottom .btn_main_wrap"),
        {
          opacity: 1,
          duration: 0.6,
          ease: "power1.out",
        },
        "<"
      );
    });
    // });
    // gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".country_card").each(function () {
      let ccBot = gsap.timeline({
        scrollTrigger: {
          trigger: this,
          start: "top 200%",
          end: "top center",
          scrub: true,
        },
      });
      ccBot.fromTo(
        $(this).find(".country_card_bottom"),
        {
          yPercent: 100,
        },
        {
          yPercent: 10,
          duration: 0.6,
          ease: "power3.out",
        }
      );
    });
    // });
  }
  initializeCountryCardAnimations();
}

function journalScripts() {
  let journalItem = $("[data-guides]").find(".journal_item");
  journalItem.hide();
  journalItem.slice(0, 8).show();
  $("[data-load-more-guides]").click(function () {
    var hiddenItems = $("[data-guides]")
      .find(".journal_item:hidden")
      .slice(0, 4);
    hiddenItems.show();
    if ($("[data-guides]").find(".journal_item:hidden").length == 0) {
      $(this).hide();
    }
  });

  let journalItem2 = $("[data-journals]").find(".journal_item");
  journalItem2.hide();
  journalItem2.slice(0, 6).show();
  $("[data-load-more-journals]").click(function () {
    var hiddenItems = $("[data-journals]")
      .find(".journal_item:hidden")
      .slice(0, 3);
    hiddenItems.show();
    if ($("[data-journals]").find(".journal_item:hidden").length == 0) {
      $(this).hide();
    }
  });
}

function aboutScript() {
  lenis.start();
  gsap.to(".toggle", { opacity: 1, duration: 0.5 });
  gsap.to(".nav_link_holder.global", { opacity: 1, duration: 0.5 });

  $(".page_main").each(function () {
    let abouthero = $(this);
    let aboutTrigger = $(this).find(".about_hero_spacer");
    let sectionInset = $(this).find(".section_inset");
    let aboutVidHolder = $(this).find(".about_vid_holder");
    let aboutOverlay = $(this).find(".about_vid_overlay");

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

    aboutClipImg.to(aboutVidHolder, {
      clipPath:
        "polygon(0% 0%, 0% 30%, 0% 38%, 0% 48%, 0% 58%, 0% 78%, 0% 100%, 44% 100%, 100% 100%, 100% 52%, 100% 0%, 51% 0%)",
    });

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

    aboutMove.to(aboutVidHolder, {
      yPercent: 0,
    });

    let aboutDarken = gsap.timeline({
      scrollTrigger: {
        trigger: sectionInset,
        start: "top 80%",
        end: "bottom top",
        scrub: true,
      },
    });
    aboutDarken.fromTo(
      aboutOverlay,
      {
        opacity: 0,
      },
      {
        opacity: 1,
      }
    );
  });

  $(".about_slider_section").each(function (index) {
    let swiperEl = $(this).find(".swiper.is_about");
    let swiperNext = $(this).find(".about-next");
    let swiperPrev = $(this).find(".about-prev");
    let aboutSwiper = new Swiper(swiperEl[0], {
      // autoplay: {
      //   delay: 3.5,
      //   disableOnInteraction: true,
      // },
      freeMode: false,
      // slidesPerView: 3.5,
      speed: 1000,
      spaceBetween: 40,
      centeredSlides: true,
      loop: true,
      slideActiveClass: "is-active",
      breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 2.5,
          spaceBetween: 20,
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 2.5,
          spaceBetween: 30,
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 3.5,
          spaceBetween: 40,
        },
      },
      navigation: {
        nextEl: swiperNext[0],
        prevEl: swiperPrev[0],
      },
    });
  });

  // function aboutReveal() {
  //   $(".expanding_visual_wrap").each(function () {
  //     let revealHolder = $(this);
  //     let revealExpand = gsap.timeline({
  //       scrollTrigger: {
  //         trigger: ".reveal_section .spacer",
  //         start: "top bottom",
  //         end: "top top",
  //         scrub: 1.5,
  //       },
  //     });

  //     revealExpand.fromTo(
  //       revealHolder,
  //       {
  //         height: "20%",
  //         width: "10%",
  //         clipPath:
  //           "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%)",
  //       },
  //       {
  //         height: "30%",
  //         width: "40%",
  //         clipPath:
  //           "polygon(5% 25%, 0% 50%, 5% 75%, 25% 95%, 50% 100%, 75% 95%, 95% 75%, 100% 50%, 95% 25%, 75% 5%, 50% 0%, 25% 5%)",
  //       }
  //     );
  //     revealExpand.to(
  //       revealHolder,
  //       {
  //         height: "40%",
  //         width: "50%",
  //         clipPath:
  //           "polygon(0% 0%, 0% 50%, 0% 100%, 24% 100%, 50% 100%, 77% 100%, 100% 100%, 100% 50%, 100% 0%, 77% 0%, 50% 0%, 22% 0%)",
  //       },
  //       "60%"
  //     );
  //   });

  //   $(".expanding_visual_holder").each(function () {
  //     let revealClipHolder = $(this);
  //     let revealWrap = ".expanding_visual_wrap";
  //     let revealOverlay = ".reveal_overlay";

  //     let revealClip = gsap.timeline({
  //       scrollTrigger: {
  //         trigger: ".reveal_section .spacer",
  //         start: "center bottom",
  //         end: "center top",
  //         scrub: true,
  //       },
  //     });

  //     revealClip.to(revealOverlay, {
  //       opacity: 1,
  //     });
  //     revealClip.to(
  //       ".reveal_logo.top",
  //       {
  //         clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
  //       },
  //       "<"
  //     );
  //     revealClip.to(
  //       "[reveal-overlay-split] .line",
  //       {
  //         rotation: 0,
  //         yPercent: 0,
  //         stagger: { each: 0.2 },
  //       },
  //       "<"
  //     );
  //     revealClip.to(".reveal_logo.bot", {
  //       clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
  //     });
  //   });

  //   $("[reveal-text-up1]").each(function () {
  //     let container = $(this);
  //     let chars = container.find(".char");

  //     let revealTextUp1 = gsap.timeline({
  //       scrollTrigger: {
  //         trigger: ".reveal_section .spacer",
  //         start: "top bottom",
  //         end: "top top",
  //         scrub: 1.5,
  //       },
  //     });

  //     revealTextUp1.to(chars, {
  //       y: "-20vh",
  //       stagger: {
  //         amount: 0.05,
  //         from: "center",
  //         grid: [null, 1],
  //         axis: "y",
  //         from: 0.46,
  //       },
  //     });
  //   });

  //   $("[reveal-text-up3]").each(function () {
  //     let container = $(this);
  //     let chars = container.find(".char");

  //     let revealTextUp3 = gsap.timeline({
  //       scrollTrigger: {
  //         trigger: ".reveal_section .spacer",
  //         start: "top bottom",
  //         end: "top center",
  //         scrub: 1.5,
  //       },
  //     });

  //     revealTextUp3.to(chars, {
  //       yPercent: -200,
  //       stagger: {
  //         amount: 0.08,
  //         from: "center",
  //       },
  //     });
  //   });

  //   $("[reveal-text-down1]").each(function () {
  //     let container = $(this);
  //     let lines = container.find(".line");

  //     let revealTextDown1 = gsap.timeline({
  //       scrollTrigger: {
  //         trigger: ".reveal_section .spacer",
  //         start: "top bottom",
  //         end: "top top",
  //         scrub: 1.5,
  //       },
  //     });

  //     revealTextDown1.to(this, {
  //       y: "25vh",
  //     });
  //   });

  //   $("[reveal-text-down3]").each(function () {
  //     let container = $(this);
  //     let lines = container.find(".line");

  //     let revealTextDown3 = gsap.timeline({
  //       scrollTrigger: {
  //         trigger: ".reveal_section .spacer",
  //         start: "top bottom",
  //         end: "center center",
  //         scrub: 1.5,
  //       },
  //     });

  //     revealTextDown3.to(lines, {
  //       yPercent: 700,
  //       stagger: {
  //         amount: 0.04,
  //         from: "top",
  //       },
  //     });
  //   });
  // }
  // aboutReveal();
}

function aboutTeamStack() {
  $(".team_flip_section").each(function () {
    let teamSection = $(this);
    let teamCard = $(this).find(".team_flipped_item");

    let teamStack = gsap.timeline({
      scrollTrigger: {
        trigger: teamCard,
        start: "top bottom",
        end: "top bottom",
        toggleActions: "play none reverse none",
      },
    });

    teamStack.fromTo(
      teamCard,
      {
        opacity: 0,
        yPercent: 30,
      },
      {
        opacity: 1,
        yPercent: 0,
        ease: "power3.out",
        duration: 1.5,
        stagger: { each: 0.1 },
        clearProps: "all",
      }
    );
  });
}

function statsSection() {
  $(".meaning_section").each(function () {
    let meaningEl = $(this);
    let aboutStatImg = meaningEl.find(".meaning_img_holder");
    let meaningStats = meaningEl.find(".stats_wrap");
    let statLine = meaningEl.find(".stats_line");

    gsap.matchMedia().add("(min-width: 767px)", () => {
      let aboutStatClip = gsap.timeline({
        scrollTrigger: {
          trigger: meaningEl,
          start: "top bottom",
          endTrigger: meaningStats,
          end: "top 10%",
          scrub: true,
        },
      });

      aboutStatClip.fromTo(
        aboutStatImg,
        {
          clipPath:
            "polygon(32% 25%, 25% 32%, 15% 40%, 27% 56%, 20% 84%, 47% 85%, 75% 84%, 79% 62%, 75% 13%, 72% 25%, 63% 18%, 45% 35%)",
        },
        {
          clipPath:
            "polygon(0% 0%, 0% 29%, 0% 49%, 0% 73%, 0% 100%, 47% 100%, 100% 100%, 100% 63%, 100% 0%, 76% 0%, 50% 0%, 23% 0%)",
        }
      );
    });

    gsap.utils.toArray(".stat_final").forEach((stat) => {
      const finalNumber = parseFloat(stat.textContent.replace(/,/g, ""));

      gsap.fromTo(
        stat,
        { innerText: 0 },
        {
          innerText: finalNumber,
          duration: 1,
          ease: "power1.out",
          scrollTrigger: {
            trigger: stat,
            scrub: true,
            start: "top bottom",
            endTrigger: ".stats_wrap",
            end: "top 10%",
            onUpdate: (self) => {
              let currentNumber = self.progress * finalNumber;
              if (finalNumber % 1 !== 0) {
                stat.innerText = currentNumber.toFixed(1).toLocaleString();
              } else {
                stat.innerText = Math.floor(currentNumber).toLocaleString();
              }
            },
          },
        }
      );

      let statLinePlay = gsap.timeline({
        scrollTrigger: {
          trigger: statLine,
          start: "top bottom",
          endTrigger: ".stats_wrap",
          end: "top 10%",
          scrub: true,
        },
      });

      statLinePlay.fromTo(
        statLine,
        {
          width: "0%",
        },
        {
          width: "100%",
        }
      );
    });
  });

  $(".approach_img_holder").each(function () {
    let approachImg = $(this);
    let approachImgPlay = gsap.timeline({
      scrollTrigger: {
        trigger: ".approachimg_wrap",
        start: "top bottom",
        end: "bottom top",
        scrub: true,
      },
    });

    approachImgPlay.fromTo(
      approachImg,
      {
        yPercent: -20,
      },
      {
        yPercent: 0,
      }
    );
  });
}

function categoryScript() {
  if ($(".turnkey_list").children().length > 6) {
    $(".btn-trig").show();
  } else {
    $(".btn-trig").hide();
  }

  $(".location_card").hover(
    function () {
      $(this).find(".btn_main_wrap").addClass("location-hover");
    },
    function () {
      $(this).find(".btn_main_wrap").removeClass("location-hover");
    }
  );
  $(".location_card").on("mouseenter mouseleave", function () {
    $(this).toggleClass("is-active");
    $(this)
      .find(".btn_main_wrap")
      .attr("data-button-style", function (_, attr) {
        return attr === "3" ? null : "3";
      });
  });
  $(".page_main").each(function (index) {
    let discoverSwiperNext = $(this).find(".discover_next");
    let discoverSwiperPrev = $(this).find(".discover_prev");
    let discoverSwiperEl = $(this).find(".swiper.discover");
    let discoverSwiper = new Swiper(discoverSwiperEl[0], {
      speed: 1000,
      // loop: true,
      draggable: true,
      spaceBetween: 20,
      centeredSlides: false,
      // slideActiveClass: "is-active",
      breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 1.2,
          slidesOffsetBefore: 20,
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 1.2,
          slidesOffsetBefore: 20,
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 3.5,
        },
      },
      navigation: {
        nextEl: discoverSwiperNext[0],
        prevEl: discoverSwiperPrev[0],
      },
    });
  });

  $("[data-load-wrapper]").each(function () {
    const $wrapper = $(this);
    const $items = $wrapper.find("[data-load-item]");
    const $button = $("[data-load-button]");
    const itemsToShow = 6;
    const itemsPerClick = 3;

    $items.hide();
    $items.slice(0, itemsToShow).show();

    $button.on("click", function () {
      const visibleItems = $items.filter(":visible").length;
      $items.slice(visibleItems, visibleItems + itemsPerClick).slideDown();

      if (visibleItems + itemsPerClick >= $items.length) {
        $button.hide();
      }
    });
  });

  //eventsdetailswiper
  $(".experiences_swiper_wrap").each(function (index) {
    let swiperNext = $(this).find(".experiences_swiper_next");
    let swiperPrev = $(this).find(".experiences_swiper_prev");
    let swiperEl = $(this).find(".swiper");
    let experiencesSwiper = new Swiper(swiperEl[0], {
      speed: 1000,
      loop: false,
      slidesOffsetAfter: 60,
      slideActiveClass: "is-active",
      breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 1.1,
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 1.1,
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 3.25,
        },
      },
      navigation: {
        nextEl: swiperNext[0],
        prevEl: swiperPrev[0],
      },
    });
  });

  var clipPaths = [
    "polygon(50% 0%, 25% 0%, 15% 20%, 4% 42%, 0% 50%, 8% 70%, 17% 86%, 25% 100%, 50% 100%, 75% 100%, 88% 77%, 96% 61%, 100% 50%, 93% 33%, 84% 17%, 75% 0%)",
    "polygon(50% 10%, 21% 12%, 21% 12%, 5% 28%, 0% 50%, 5% 72%, 21% 88%, 21% 88%, 50% 90%, 79% 88%, 79% 88%, 95% 72%, 100% 50%, 95% 28%, 74% 12%, 74% 12%)",
    "polygon(50% 0%, 23% 4%, 7% 16%, 0% 36%, 5% 50%, 0% 64%, 7% 84%, 23% 96%, 50% 100%, 77% 96%, 93% 84%, 100% 64%, 95% 50%, 100% 36%, 93% 16%, 77% 4%)",
    "polygon(50% 0%, 32% 8%, 18% 17%, 5% 28%, 5% 44%, 5% 72%, 17% 83%, 33% 91%, 50% 100%, 67% 90%, 83% 80%, 95% 72%, 95% 46%, 95% 30%, 79% 16%, 69% 9%)",
  ];

  $(".turnkey_list .turnkey_img_holder").each(function (index) {
    $(this).css("clip-path", clipPaths[index % clipPaths.length]);
  });

  $(".category_hero_comp").each(function () {
    let catEl = $(this);
    let catVisual = catEl.find(".category_visual_holder");
    let catSpacer = catEl.find(".category_spacer");
    let catContent = catEl.find(".category_hero_content");
    let catBottom = catEl.find(".hero_bottom_category");
    let catBottomPathEl = catEl.find(".hero_path");
    let catBottomPath = catEl.find("path");
    let catOverlay = catEl.find(".category_hero_overlay");

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

    ScrollTrigger.create({
      trigger: catContent,
      start: "top top",
      end: "top top",
      endTrigger: catVisual,
      pin: true,
      pinSpacing: false,
      scrub: true,
    });

    let heroPathCategory = gsap.timeline({
      scrollTrigger: {
        trigger: catSpacer,
        start: "top bottom",
        end: "bottom bottom",
        scrub: 2,
      },
    });

    heroPathCategory.to(catBottomPathEl, {
      opacity: 1,
      duration: 0.01,
    });

    heroPathCategory.fromTo(
      catBottomPath,
      {
        drawSVG: "0% 0%",
      },
      {
        drawSVG: "100% 0%",
        duration: 1.5,
        ease: "expo.Out",
      }
    );

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

    catHeroClip.to(catVisual, {
      clipPath:
        "polygon(0% 78%, 0% 100%, 25% 100%, 64% 100%, 100% 100%, 100% 68%, 100% 48%, 100% 23%, 100% 0%, 67% 0%, 34% 0%, 20% 0%, 0% 0%, 0% 21%)",
    });

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

    categoryHeroOverlay.fromTo(
      catOverlay,
      {
        opacity: 0,
      },
      {
        opacity: 0.9,
      }
    );
  });
  gsap.matchMedia().add("(min-width: 767px)", () => {
    $(".sticky_card").each(function () {
      let stickyImg = gsap.timeline({
        scrollTrigger: {
          trigger: this,
          start: "top bottom",
          end: "center 40%",
          scrub: true,
        },
      });

      stickyImg.fromTo(
        $(this).find(".g_visual_wrap"),
        {
          clipPath: "polygon(0% 100%, 100% 100%, 100% 20%, 0% 20%)",
        },
        {
          clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        },
        "<"
      );
    });
  });

  let cardStack = $(".event_card");

  let cardStag = gsap.timeline({
    scrollTrigger: {
      trigger: cardStack,
      start: "top bottom",
      end: "top bottom",
      toggleActions: "play none reverse none",
    },
  });

  cardStag.fromTo(
    cardStack,
    {
      opacity: 0,
      yPercent: 30,
    },
    {
      opacity: 1,
      yPercent: 0,
      ease: "power3.out",
      duration: 1.5,
      stagger: { each: 0.1 },
    }
  );
  $(document).on("click", function (e) {
    $(".download_component").each(function () {
      var $component = $(this);
      var $holder = $component.find(".download_logo_holder");
      if ($holder.is(e.target) || $holder.has(e.target).length) {
        $component.toggleClass("is-active");
      } else if (!$component.is(e.target) && !$component.has(e.target).length) {
        $component.removeClass("is-active");
      }
    });
  });
}

function detailRadio() {
  $(document).off("click.detailRadio");
  $(document).off("change.detailRadio");
  $(document).off("ready.detailRadio");

  if (window.detailRadioMatchMedia) {
    window.detailRadioMatchMedia.forEach((mm) => mm.kill());
  }
  window.detailRadioMatchMedia = [];

  const mm1 = gsap.matchMedia();
  window.detailRadioMatchMedia.push(mm1);

  mm1.add("(min-width: 767px)", () => {
    $(document).on(
      "click.detailRadio",
      ".create_filter_top .u-text-small",
      function () {
        $(".create_filter_bot").toggleClass("show");
      }
    );

    $(document).on("click.detailRadio", ".mobile_filter_btn", function () {
      $(".create_filter_bot").removeClass("show");
    });

    $(document).on("click.detailRadio", ".filter_svg", function () {
      $(".create_item").css("display", "grid");

      setTimeout(() => {
        ScrollTrigger.refresh();
        if (window.lenis) window.lenis.resize();
      }, 100);

      $(".create_item").css("display", "flex");

      $('.create_btn_field input[type="radio"]').each(function () {
        $(this).prop("checked", false);
        $(this)
          .siblings(".create_filter_radio")
          .removeClass("w--redirected-checked");
      });

      $(".create_filter_list .create_btn_field").val("");
      $(".create_filter_list .create_filter_radio").prop("checked", false);
      $(".create_filter_list .w-radio-input").removeClass(
        "w--redirected-checked"
      );

      const allRadio = $(".create_btn_field .create_field_name")
        .filter((_, el) => $(el).text().trim().toLowerCase() === "all")
        .closest(".create_btn_field")
        .find('input[type="radio"]');

      if (allRadio.length) {
        allRadio.prop("checked", true).trigger("change");
        allRadio
          .siblings(".create_filter_radio")
          .addClass("w--redirected-checked");
      } else {
        $(".create_item, .turnkey_item").css("display", "");

        gsap.matchMedia().add("(min-width: 992px)", () => {
          $(".create_item, .turnkey_item").css("display", "grid");
        });
        gsap.matchMedia().add("(max-width: 991px)", () => {
          $(".create_item, .turnkey_item").css("display", "flex");
        });
      }
    });
  });

  const mm2 = gsap.matchMedia();
  window.detailRadioMatchMedia.push(mm2);

  mm2.add("(max-width: 991px)", () => {
    $(document).on("click.detailRadio", ".filter_svg", function () {
      $(".create_item").css("display", "");

      $('.create_btn_field input[type="radio"]').each(function () {
        $(this).prop("checked", false);
        $(this)
          .siblings(".create_filter_radio")
          .removeClass("w--redirected-checked");
      });

      $(".create_filter_list .create_btn_field").val("");
      $(".create_filter_list .create_filter_radio").prop("checked", false);
      $(".create_filter_list .w-radio-input").removeClass(
        "w--redirected-checked"
      );

      const allRadio = $(".create_btn_field .create_field_name")
        .filter((_, el) => $(el).text().trim().toLowerCase() === "all")
        .closest(".create_btn_field")
        .find('input[type="radio"]');

      if (allRadio.length) {
        allRadio.prop("checked", true).trigger("change");
        allRadio
          .siblings(".create_filter_radio")
          .addClass("w--redirected-checked");
      } else {
        $(".create_item, .turnkey_item").css("display", "");

        gsap.matchMedia().add("(min-width: 992px)", () => {
          $(".create_item, .turnkey_item").css("display", "grid");
        });
        gsap.matchMedia().add("(max-width: 991px)", () => {
          $(".create_item, .turnkey_item").css("display", "flex");
        });
      }
    });

    $(".create_item").css("display", "flex");
  });

  const mm3 = gsap.matchMedia();
  window.detailRadioMatchMedia.push(mm3);

  mm3.add("(max-width: 766px)", () => {
    $(document).on(
      "click.detailRadio",
      ".create_filter_top .u-text-small",
      function () {
        $(".create_filter_bot").toggleClass("show");
      }
    );

    $(document).on("click.detailRadio", ".mobile_filter_btn", function () {
      $(".create_filter_bot").addClass("show");
    });
  });

  $(document).on(
    "change.detailRadio",
    '.create_btn_field input[type="radio"]',
    function () {
      const $clickedRadio = $(this);
      const selectedText = $clickedRadio
        .closest(".create_btn_field")
        .find(".create_field_name")
        .text()
        .trim();

      $('.create_btn_field input[type="radio"]')
        .not($clickedRadio)
        .each(function () {
          $(this).prop("checked", false);
          $(this)
            .siblings(".create_filter_radio")
            .removeClass("w--redirected-checked");
        });

      $clickedRadio.prop("checked", true);
      $clickedRadio
        .siblings(".create_filter_radio")
        .addClass("w--redirected-checked");

      if (selectedText.toLowerCase() === "all") {
        gsap.matchMedia().add("(min-width: 992px)", () => {
          $(".create_item").css("display", "grid");
        });
        gsap.matchMedia().add("(max-width: 991px)", () => {
          $(".create_item").css("display", "flex");
        });

        gsap.matchMedia().add("(min-width: 992px)", () => {
          $(".turnkey_item").css("display", "grid");
        });
        gsap.matchMedia().add("(max-width: 991px)", () => {
          $(".turnkey_item").css("display", "flex");
        });
      } else {
        gsap.matchMedia().add("(min-width: 992px)", () => {
          $(".create_item").each(function () {
            const itemText = $(this).find(".filter_location").text().trim();
            $(this).css("display", itemText === selectedText ? "grid" : "none");
          });
        });
        gsap.matchMedia().add("(max-width: 991px)", () => {
          $(".create_item").each(function () {
            const itemText = $(this).find(".filter_location").text().trim();
            $(this).css("display", itemText === selectedText ? "flex" : "none");
          });
        });

        gsap.matchMedia().add("(min-width: 992px)", () => {
          $(".turnkey_item").each(function () {
            const itemText = $(this)
              .find(".turnkey_card_eyebrow")
              .text()
              .trim();
            $(this).css("display", itemText === selectedText ? "grid" : "none");
          });
        });
        gsap.matchMedia().add("(max-width: 991px)", () => {
          $(".turnkey_item").each(function () {
            const itemText = $(this)
              .find(".turnkey_card_eyebrow")
              .text()
              .trim();
            $(this).css("display", itemText === selectedText ? "flex" : "none");
          });
        });
      }

      setTimeout(() => {
        ScrollTrigger.refresh();
        if (window.lenis) window.lenis.resize();
      }, 100);
    }
  );

  let seen = new Set();
  $(".create_filter_item").each(function () {
    let text = $(this).find(".create_field_name").text().trim();
    if (seen.has(text)) {
      $(this).remove();
    } else {
      seen.add(text);
    }
  });

  setTimeout(() => {
    const firstField = $(".create_btn_field").first();
    const firstRadio = firstField.find('input[type="radio"]');
    if (firstRadio.length) {
      firstRadio.prop("checked", true).trigger("change");
      firstField.find(".create_filter_radio").addClass("w--redirected-checked");
    }
  }, 50);
}

function detailScript() {
  console.log("detailScript");
  //detail

  $(".detail_hero_comp").each(function () {
    let deetEl = $(this);
    let deetVisual = deetEl.find(".detail_visual_holder");
    let catSpacer = deetEl.find(".category_spacer");
    let deetContent = deetEl.find(".detail_hero_content");
    let deetBottom = deetEl.find(".hero_bottom.detail");
    let deetBottomPathEl = deetEl.find(".hero_path");
    let deetBottomPath = deetEl.find("path");
    let deetOverlay = deetEl.find(".detail_hero_overlay");

    let detailHeroPath = gsap.timeline({
      scrollTrigger: {
        trigger: deetVisual,
        start: "top 50%",
        end: "top top",
        scrub: 2,
      },
    });

    detailHeroPath.to(deetBottomPathEl, {
      opacity: 1,
      duration: 0.01,
    });

    detailHeroPath.fromTo(
      deetBottomPath,
      {
        drawSVG: "0% 0%",
      },
      {
        drawSVG: "100% 0%",
        duration: 1.5,
        ease: "expo.Out",
      }
    );

    let detailHeroMove = gsap.timeline({
      scrollTrigger: {
        trigger: deetVisual,
        start: "top 45%",
        end: "top top",
        scrub: true,
      },
    });

    detailHeroMove.to(
      deetVisual,

      {
        clipPath:
          "polygon(0% 0%, 12% 0%, 33% 0%, 47% 0%, 60% 0%, 72% 0%, 82% 0%, 100% 0%, 100% 39%, 100% 56%, 100% 66%, 100% 80%, 100% 91%, 100% 100%, 83% 100%, 50% 100%, 34% 100%, 14% 100%, 0% 100%, 0% 94%, 0% 78%, 0% 63%, 0% 50%, 0% 40%, 0% 31%, 0% 17%)",
      }
    );

    let detailHeroY = gsap.timeline({
      scrollTrigger: {
        trigger: deetVisual,
        start: "top 75%",
        end: "bottom top",
        scrub: true,
      },
    });

    detailHeroY.fromTo(
      deetVisual,
      {
        yPercent: 0,
      },
      {
        yPercent: 10,
      }
    );

    let detailBotY = gsap.timeline({
      scrollTrigger: {
        trigger: deetBottom,
        start: "top center",
        endTrigger: deetVisual,
        end: "bottom top",
        scrub: true,
      },
    });

    detailBotY.fromTo(
      deetBottom,
      {
        yPercent: 0,
      },
      {
        yPercent: 30,
      }
    );

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

    detailHeroOverlay.fromTo(
      deetOverlay,
      {
        opacity: 0,
      },
      {
        opacity: 0.8,
      }
    );
  });

  let cardStack = $(".event_card");

  let cardStag = gsap.timeline({
    scrollTrigger: {
      trigger: cardStack,
      start: "top bottom",
      end: "top bottom",
      toggleActions: "play none play reverse",
    },
  });

  cardStag.fromTo(
    cardStack,
    {
      opacity: 0,
      yPercent: 30,
    },
    {
      opacity: 1,
      yPercent: 0,
      ease: "power3.out",
      duration: 1.5,
      stagger: { each: 0.1 },
    }
  );

  var clipPaths = [
    "polygon(50% 0%, 25% 0%, 15% 20%, 4% 42%, 0% 50%, 8% 70%, 17% 86%, 25% 100%, 50% 100%, 75% 100%, 88% 77%, 96% 61%, 100% 50%, 93% 33%, 84% 17%, 75% 0%)",
    "polygon(50% 10%, 21% 12%, 21% 12%, 5% 28%, 0% 50%, 5% 72%, 21% 88%, 21% 88%, 50% 90%, 79% 88%, 79% 88%, 95% 72%, 100% 50%, 95% 28%, 74% 12%, 74% 12%)",
    "polygon(50% 0%, 23% 4%, 7% 16%, 0% 36%, 5% 50%, 0% 64%, 7% 84%, 23% 96%, 50% 100%, 77% 96%, 93% 84%, 100% 64%, 95% 50%, 100% 36%, 93% 16%, 77% 4%)",
    "polygon(50% 0%, 32% 8%, 18% 17%, 5% 28%, 5% 44%, 5% 72%, 17% 83%, 33% 91%, 50% 100%, 67% 90%, 83% 80%, 95% 72%, 95% 46%, 95% 30%, 79% 16%, 69% 9%)",
  ];

  $(".turnkey_list .turnkey_img_holder").each(function (index) {
    $(this).css("clip-path", clipPaths[index % clipPaths.length]);
  });

  // $(".turnkey_list .turnkey_img_holder").each(function (index) {
  //   $(this).css("clip-path", clipPaths[index % clipPaths.length]);
  // });

  // // const 'primary-ease' = "power3.out";
  // function eventHeadingAnimation(selector) {
  //   const reveal = $(selector);

  //   const headingAnimation = gsap.timeline();
  //   headingAnimation.fromTo(
  //     reveal.find(".line"),
  //     {
  //       clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
  //     },
  //     {
  //       clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
  //       ease: "expo.out",
  //       duration: 1.6,
  //       stagger: { each: 0.2 },
  //     }
  //   );
  //   return headingAnimation;
  // }
  // function opacityAnimation(selector) {
  //   const animateEvent = gsap.timeline();
  //   animateEvent.fromTo(
  //     selector,
  //     { opacity: 0 },
  //     { opacity: 1, duration: 1.8, ease: "primary-ease" },
  //     "<+0.8"
  //   );
  //   return animateEvent;
  // }

  // // Function to handle toggling
  // function handleToggle(
  //   $activeComponent,
  //   $inactiveComponent,
  //   $activeWrap,
  //   $inactiveWrap
  // ) {
  //   $activeComponent.addClass("is-active");
  //   $inactiveComponent.removeClass("is-active");
  //   $inactiveWrap.css("display", "none");
  //   $activeWrap.css("display", "block");

  //   // Scroll without animation
  //   const scrollTop = $activeWrap.offset().top - 300;
  //   window.scrollTo(0, scrollTop);

  //   // Force ScrollTrigger to recalculate
  //   ScrollTrigger.refresh();

  //   const masterTimeline = gsap.timeline();
  //   masterTimeline.add(
  //     eventHeadingAnimation($activeWrap.find(".event_heading"))
  //   );
  //   masterTimeline.add(
  //     opacityAnimation($activeWrap.find("[animate-opacity]")),
  //     "<"
  //   );
  //   masterTimeline.play();

  //   if ($activeComponent.hasClass("is-2")) {
  //     $(".event_toggle_wrap_turnkey")
  //       .addClass("is-active")
  //       .css("display", "flex");
  //   } else {
  //     $(".event_toggle_wrap_turnkey")
  //       .removeClass("is-active")
  //       .css("display", "none");
  //   }
  // }

  // // Set initial state
  // $(".event_toggle_component.is-1").addClass("is-active");
  // $(".create_wrap").css("display", "block");
  // $(".turnkey_wrap").css("display", "none");
  // $(".event_toggle_wrap_turnkey")
  //   .css("display", "none")
  //   .removeClass("is-active");

  // // Initial animations for .create_wrap
  // const initialTimeline = gsap.timeline();
  // initialTimeline.add(eventHeadingAnimation(".create_wrap .event_heading"));
  // initialTimeline.add(opacityAnimation(".create_wrap [animate-opacity]"), "<");
  // initialTimeline.play();

  // // Add click event listeners
  // $(".event_toggle_component.is-1").click(function () {
  //   handleToggle(
  //     $(".event_toggle_component.is-1"),
  //     $(".event_toggle_component.is-2"),
  //     $(".create_wrap"),
  //     $(".turnkey_wrap")
  //   );
  // });

  // $(".event_toggle_component.is-2").click(function () {
  //   handleToggle(
  //     $(".event_toggle_component.is-2"),
  //     $(".event_toggle_component.is-1"),
  //     $(".turnkey_wrap"),
  //     $(".create_wrap")
  //   );
  // });

  // // Filtering
  // $(".turnkey_toggle_item").on("click", function () {
  //   $(".turnkey_toggle_item").removeClass("is-active");
  //   $(this).addClass("is-active");

  //   const selectedText = $(this).find(".event_toggle_text").text().trim();
  //   const matchingItems = $(".turnkey_item").filter(function () {
  //     return (
  //       $(this).find(".turnkey_card_eyebrow").text().trim() === selectedText
  //     );
  //   });
  //   const nonMatchingItems = $(".turnkey_item").not(matchingItems);

  //   gsap.to(nonMatchingItems, {
  //     opacity: 0,
  //     yPercent: 100,
  //     display: "none",
  //     duration: 0.3,
  //   });

  //   gsap.fromTo(
  //     matchingItems,
  //     { opacity: 0, yPercent: 40 },
  //     {
  //       opacity: 1,
  //       yPercent: 0,
  //       stagger: 0.06,
  //       duration: 1,
  //       display: "block",
  //       clearProps: "all",
  //     }
  //   );
  //   const scrollTop = $(".turnkey_top").offset().top;
  //   window.scrollTo(0, scrollTop);
  //   ScrollTrigger.refresh();
  // });

  $(".cmodal_section").each(function () {
    const swiperEl = $(this).find(".swiper.is_modal");
    if (!swiperEl.hasClass("swiper-initialized")) {
      swiperEl.addClass("swiper-initialized");

      new Swiper(swiperEl[0], {
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
        },
        speed: 1000,
        centeredSlides: true,
        loop: true,
        slidesPerView: 3.5,
        spaceBetween: 80,
        slideActiveClass: "is-active",
        breakpoints: {
          320: {
            slidesPerView: 1.5,
            spaceBetween: 20,
          },
          640: {
            slidesPerView: 3.5,
            spaceBetween: 80,
          },
        },
        navigation: {
          nextEl: $(this).find(".modal_btn_next")[0],
          prevEl: $(this).find(".modal_btn_prev")[0],
        },
      });
    }
  });

  $(".dual_card_wrap").each(function () {
    console.log("checking");
    if ($(this).find(".dual_card").length === 2) {
      $(this).removeClass("u-grid-column-3").addClass("u-grid-column-2");
    }
  });
}

function fbnScript() {
  $(".framed-by-nature_fixed-cta_wrap").each(function () {
    console.log("fbn");
    let el = $(this);
    let elBtn = el.find("[data-fbn-button]");
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: "[fbn-scroll-trigger]",
        start: "top bottom",
        end: "top center",
        scrub: true,
        clamp: true,
      },
    });
    tl.fromTo(
      elBtn,
      {
        opacity: 0,
        yPercent: 100,
      },
      {
        opacity: 1,
        yPercent: 0,
        ease: "none",
      }
    );
  });
}

//DRAW PATH

function initSwiperWithMorph() {
  const paths = [
    "M 0.5 0 L 0.25 0.05 L 0.05 0.25 L 0 0.5 L 0.05 0.75 L 0.25 0.95 L 0.5 0.996 L 0.75 0.95 L 0.95 0.75 L 1 0.5 L 0.95 0.25 L 0.75 0.05 Z", // circle
    "M 0.5 0 L 0.258 0.012 L 0.001 0.007 L 0.025 0.493 L 0.013 0.748 L 0.013 1.005 L 0.5 0.996 L 1 0.99 L 0.994 0.787 L 0.976 0.469 L 0.996 0.007 L 0.718 0.018 Z", // sqaure
    "M 0.5 0 L 0.35 0 L 0.15 0.2 L 0.05 0.5 L 0.15 0.8 L 0.35 1 L 0.507 1 L 0.65 1 L 0.85 0.8 L 0.95 0.5 L 0.85 0.2 L 0.65 0 Z", // diamond
    "M 0.5 0 L 0.293 0.009 L 0.006 0.003 L 0.027 0.504 L 0.006 0.981 L 0.229 0.981 L 0.507 1 L 0.679 0.972 L 1 0.99 L 0.95 0.5 L 0.99 0.006 L 0.707 0.033 Z", // sqaure 2
  ];

  let morphSwiper = new Swiper(".swiper.test", {
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    autoHeight: false,
    freeMode: false,
    loopedSlides: 1,
    slidesPerView: 1,
    speed: 500,
    effect: "fade",
    fadeEffect: { crossFade: true },
    loop: true,
    slideActiveClass: "is-active",
    navigation: {
      nextEl: ".btn_main_wrap.homepage_btn_next",
      prevEl: ".btn_main_wrap.homepage_btn_prev",
    },
    on: {
      slideChange: function (swiperInstance) {
        let currentSlideIndex = swiperInstance.realIndex;
        let shapeIndex = currentSlideIndex % paths.length;

        gsap.to("#morph-path", {
          attr: { d: paths[shapeIndex] },
          duration: 1,
          ease: "primary-ease",
        });
      },
    },
  });
}

let tl = gsap.timeline();

function homeMid() {
  $(".local_hero_wrap").each(function () {
    let homeMidWrap = $(this).find(".hero_mid");
    let homeMidLine = $(this).find(".hero-text .line");

    gsap.fromTo(
      homeMidLine,
      {
        yPercent: 110,
        clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
      },
      {
        yPercent: 0,
        clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)",
        ease: "expo.out",
        duration: 1.6,
        onComplete: function () {
          // lenis.start();
        },
      },
      "<"
    );
  });
}

function journalDetailSlider() {
  $(".cmodal_section").each(function () {
    const swiperEl = $(this).find(".swiper.is_modal");
    if (!swiperEl.hasClass("swiper-initialized")) {
      swiperEl.addClass("swiper-initialized");

      new Swiper(swiperEl[0], {
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
        },
        speed: 1000,
        centeredSlides: true,
        loop: true,
        slidesPerView: 3.5,
        spaceBetween: 80,
        slideActiveClass: "is-active",
        breakpoints: {
          320: {
            slidesPerView: 1.5,
            spaceBetween: 20,
          },
          640: {
            slidesPerView: 3.5,
            spaceBetween: 80,
          },
        },
        navigation: {
          nextEl: $(this).find(".modal_btn_next")[0],
          prevEl: $(this).find(".modal_btn_prev")[0],
        },
      });
    }
  });
}

function formDropdowns() {
  // $(document).ready(function () {
  //   $('[data-input="datepicker"]').datepicker({
  //     format: "mm-dd-yyyy",
  //   });
  //   // Available date placeholders:
  //   // Year: yyyy
  //   // Month: mm
  //   // Day: dd
  // });

  $("[corporate-enquiry]").on("click", function () {
    $(".contact_init").removeClass("hide");
    $(".company_holder").removeClass("hide");
  });
  $("[leisure-enquiry]").on("click", function () {
    $(".contact_init").removeClass("hide");
    $(".company_holder").addClass("hide");
  });
  $("[general-enquiry]").on("click", function () {
    $(".contact_init").addClass("hide");
    $(".company_holder").addClass("hide");
  });

  $(".form_block").each(function () {
    let subjectHeading = $(this).find(".subject_field");
    let subjectDropdown = $(this).find(".dropdown_field");
    let subjectFieldText = $(this).find(".subject_field .u-text-large");

    subjectHeading.on("click", function () {
      subjectDropdown.toggleClass("show");
    });

    subjectDropdown.on("click", ".contact_radio_field", function (e) {
      const text = $(this).text().trim();
      subjectFieldText.text(text);

      // Ensure the radio button inside is checked before toggling the class
      $(this).find(".contact_radio_btn").prop("checked", true);

      subjectDropdown.removeClass("show"); // Close dropdown
    });
  });

  let modalRadioFunc = (location) => {
    $(`[${location}-radio]`).on("click", function () {
      $(".dropdown_field").each(function () {
        $(this).removeClass("show");
      });
      $(`[${location}-dropdown]`).addClass("show");
    });
  };

  modalRadioFunc("brisbane");
  modalRadioFunc("byron-bay-tweed-valley");
  modalRadioFunc("tamborine-scenic-rim");
  modalRadioFunc("gold-coast");

  $("[cape-town-radio]").on("click", function () {
    $(".dropdown_field").each(function () {
      $(this).removeClass("show");
    });
    $("[cape-town-dropdown]").addClass("show");
  });

  $("[stellenbosch-radio]").on("click", function () {
    $(".dropdown_field").each(function () {
      $(this).removeClass("show");
    });
    $("[stellenbosch-dropdown]").addClass("show");
  });

  $("[kruger-radio]").on("click", function () {
    $(".dropdown_field").each(function () {
      $(this).removeClass("show");
    });
    $("[kruger-dropdown]").addClass("show");
  });

  $("[garden-route-radio]").on("click", function () {
    $(".dropdown_field").each(function () {
      $(this).removeClass("show");
    });
    $("[garden-route-dropdown]").addClass("show");
  });

  $("[hermanus-radio]").on("click", function () {
    $(".dropdown_field").each(function () {
      $(this).removeClass("show");
    });
    $("[hermanus-dropdown]").addClass("show");
  });

  $("[western-cape-radio]").on("click", function () {
    $(".dropdown_field").each(function () {
      $(this).removeClass("show");
    });
    $("[western-cape-dropdown]").addClass("show");
  });

  $(".form_block_signature").each(function () {
    let subjectHeading = $(this).find(".subject_field");
    let subjectDropdown = $(this).find(".dropdown_container");
    let subjectFieldText = $(this).find(".subject_field .u-text-large");

    subjectHeading.on("click", function () {
      subjectDropdown.toggleClass("show");
    });

    subjectDropdown.on("click", ".contact_radio_field", function () {
      const text = $(this).text();
      subjectFieldText.text(text);
      subjectDropdown.toggleClass("show");
    });
  });

  $(".form_block").each(function () {
    let $formBlock = $(this);

    $formBlock.find(".contact_drop").each(function () {
      let $contactDrop = $(this);
      let dateHeading = $contactDrop.find(".subject_field_date");
      let dateDropdown = $contactDrop.find(".dropdown_field_date");
      let dateFieldText = $contactDrop.find(
        ".subject_field_date .u-text-large"
      );

      dateHeading.on("click", function () {
        dateDropdown.toggleClass("show");
      });

      dateDropdown.on("click", ".contact_radio_field", function () {
        const text = $(this).text();
        // Update only the text within this specific contact_drop
        $contactDrop.find(".subject_field_date .u-text-large").text(text);
        dateDropdown.removeClass("show");
      });
    });

    $("[corporate-enquiry]").on("click", function () {
      $(".contact_init_event").removeClass("hide");
      $(".contact_init_locations").removeClass("hide");
      $(".company_holder").removeClass("hide");
      $(".contact_init_experience").addClass("hide");
      $(".form_block_signature").addClass("hide");
      $(".contact_page_form .checkbox_holder").removeClass("is-active");
      $("[corporate-hide]").each(function () {
        $(this).addClass("hide");
      });
      $("[leisure-hide]").each(function () {
        $(this).removeClass("hide");
      });
    });
    $("[leisure-enquiry]").on("click", function () {
      $(".contact_init_event").addClass("hide");
      $(".contact_init_experience").removeClass("hide");
      $(".contact_init_locations").removeClass("hide");
      $(".form_block_signature").addClass("hide");
      $(".company_holder").addClass("hide");
      $(".contact_page_form .checkbox_holder").removeClass("is-active");
      $("[corporate-hide]").each(function () {
        $(this).removeClass("hide");
      });
      $("[leisure-hide]").each(function () {
        $(this).addClass("hide");
      });
    });
    $("[general-enquiry]").on("click", function () {
      $(".contact_init").addClass("hide");
      $(".company_holder").addClass("hide");
      $(".contact_init_event").addClass("hide");
      $(".contact_init_experience").addClass("hide");
      $(".contact_init_locations").addClass("hide");
      $(".form_block_signature").addClass("hide");
      $(".contact_page_form .checkbox_holder").removeClass("is-active");
      $("[corporate-hide]").each(function () {
        $(this).removeClass("hide");
      });
      $("[leisure-hide]").each(function () {
        $(this).removeClass("hide");
      });
    });

    $(".contact_init_experience .checkbox_holder").on("click", function () {
      // Remove the 'is-active' class from all checkbox_holder divs
      $(".contact_init_experience .checkbox_holder").removeClass("is-active");

      // Add the 'is-active' class to the clicked checkbox_holder
      $(this).addClass("is-active");

      // Set the corresponding radio button to checked
      $(this).find('input[type="radio"]').prop("checked", true);

      $(this).find('input[type="radio"]').prop("checked", true);

      $("[signature-package]").on("click", function () {
        $(".form_block_signature").removeClass("hide");
      });

      $("[not-signature]").on("click", function () {
        $(".form_block_signature").addClass("hide");
      });
    });

    $(".contact_init_event .checkbox_holder").on("click", function () {
      // Remove the 'is-active' class from all checkbox_holder divs
      $(".contact_init_event .checkbox_holder").removeClass("is-active");

      // Add the 'is-active' class to the clicked checkbox_holder
      $(this).addClass("is-active");

      // Set the corresponding radio button to checked
      $(this).find('input[type="radio"]').prop("checked", true);

      $("[signature-package]").on("click", function () {
        $(".form_block_signature").removeClass("hide");
      });

      $("[not-signature]").on("click", function () {
        $(".form_block_signature").addClass("hide");
      });
    });

    $(".contact_init_locations .checkbox_holder").on("click", function () {
      // Remove the 'is-active' class from all checkbox_holder divs
      $(".contact_init_locations .checkbox_holder").removeClass("is-active");

      // Add the 'is-active' class to the clicked checkbox_holder
      $(this).addClass("is-active");

      // Set the corresponding radio button to checked
      $(this).find('input[type="radio"]').prop("checked", true);
    });
  });
}

// formDropdowns();

$(".dropdown-toggle").click(function () {
  $(".dropdown-menu").not($(this).siblings(".dropdown-menu")).hide();
  $(this).siblings(".dropdown-menu").toggle();
});

$(".dropdown-item").click(function () {
  const selectedValue = $(this).text();
  $(this).closest(".dropdown").find(".dropdown-toggle").text(selectedValue);
  $(this).closest(".dropdown-menu").hide();
});

$(document).click(function (event) {
  if (!$(event.target).closest(".dropdown").length) {
    $(".dropdown-menu").hide();
  }
});

$(document).mousemove(function (e) {
  let mouseX = e.pageX,
    mouseY = e.pageY;

  $(".local_marquee_img_holder").each(function () {
    let $this = $(this),
      offset = $this.offset(),
      centerX = offset.left + $this.width() / 4,
      centerY = offset.top + $this.height() / 4,
      moveX = (centerX - mouseX) / 10, // Divide to reduce speed
      moveY = (centerY - mouseY) / 10; // Adjust this value to control speed

    gsap.to($this, {
      x: moveX,
      y: moveY,
      duration: 0.2,
      ease: "power2.out",
    });
  });
});

console.log("Before refresh:", ScrollTrigger.getAll());
ScrollTrigger.refresh();
console.log("After refresh:", ScrollTrigger.getAll());
//ENTER ANIMATION

const homeIntroAnimation = (container) => {
  // $(container).addClass("fixed");
  $(".preloader_text").appendTo(".preloader_text_wrap");
  let homeIntroTl = gsap.timeline({
    onComplete: () => {
      $(container).removeClass("fixed");
    },
  });

  gsap.set($(container).find(".preloader_text"), {
    perspective: 2000,
  });
  homeIntroTl.set($(container).find(".hero_visual_wrap.local"), {
    clipPath:
      "polygon(39% 45%, 38% 54%, 39% 62%, 49% 63%, 61% 62%, 69% 63%, 70% 55%, 69% 44%, 68% 35%, 51% 33%, 39% 35%)",
  });
  homeIntroTl.to(
    $(container).find(".nav_component, .nav_dropdown, .g_visual_wrap"),
    {
      opacity: 1,
    }
  );

  homeIntroTl.to($(container).find(".hero_mid"), {
    opacity: 1,
  });

  homeIntroTl.fromTo(
    $(container).find(".preloader_text .char"),
    {
      // rotationX: 120,
      // rotationY: -150,
      // rotationZ: -30,
      yPercent: 110,
      scale: 0.3,
      // xPercent: 80,
      z: -5000,
    },
    {
      // rotationX: 0,
      // rotationY: 0,
      // rotationZ: 0,
      xPercent: 0,
      yPercent: 0,
      scale: 1,
      x: 0,
      z: 0,
      stagger: {
        each: 0.02,
        from: "center",
      },
      ease: "back.out",
      duration: 2.5,
    }
  );
  homeIntroTl.add(() => moveText(textDestination), "<+2.8");

  homeIntroTl.fromTo(
    $(container).find(".hero_visual_wrap.local"),
    {
      opacity: 0,
    },
    {
      opacity: 1,
      ease: "expo.inOut",
    },
    "<"
  );

  homeIntroTl.fromTo(
    $(container).find(".hero_visual_wrap.local"),
    {
      clipPath:
        "polygon(39% 45%, 38% 54%, 39% 62%, 49% 63%, 61% 62%, 69% 63%, 70% 55%, 69% 44%, 68% 35%, 51% 33%, 39% 35%)",
    },
    {
      clipPath:
        "polygon(0% 40%, 0% 69%, 0% 100%, 33% 100%, 64% 100%, 100% 100%, 100% 65%, 100% 31%, 100% 0%, 49% 0%, 0% 0%)",
      ease: "expo.inOut",
      duration: 1.5,
      onComplete: function () {
        gsap.set(".nav_logo_holder", { pointerEvents: "auto" });
        // lenis.start();
      },
    },
    "<"
  );
  // homeIntroTl.set($(container).find(".nav_component"), {
  //   opacity: 1,
  //   duration: 3,
  // });
  homeIntroTl.fromTo(
    $(container).find(".hero-text .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",
      duration: 1.6,
      stagger: { each: 0.1 },
      onComplete: function () {
        gsap.to(".toggle", { opacity: 1, duration: 1 });
        gsap.to(".nav_link_holder.global", {
          opacity: 1,
          duration: 1,
        });
        lenis.start();
        // homeInitScroll();
      },
    },
    "<+0.7"
  );

  // homeIntroTl.to(
  //   $(container).find(".nav_link_holder"),
  //   {
  //     opacity: 1,
  //     ease: "primary-ease",
  //   },
  //   "<"
  // );

  homeIntroTl.to($(container).find(".hero_wrap"), {
    backgroundColor: "#f5f2ed",
    duration: 0.001,
    onComplete: function () {
      // lenis.start();
    },
  });

  return homeIntroTl;
};

const leaveAnimation = (container) => {
  const leaveTl = gsap.timeline({
    defaults: {
      ease: "power3.in",
      duration: 1,
    },
  });
  // leaveTl.to($(container), {
  //   scale: 0.99,
  // });
  leaveTl.fromTo(
    ".transition_overlay",
    {
      opacity: 0,
    },
    {
      opacity: 1,
      duration: 1,
      ease: "sine.out",
    }
  );
  leaveTl.set($(container), {
    opacity: 0,
  });

  return leaveTl;
};

const enterAnimation = (container) => {
  $(container).addClass("fixed");
  const enterTl = gsap.timeline({
    defaults: {
      ease: "power3.inOut",
      duration: 1,
    },
  });
  enterTl.set($(container), {
    opacity: 0,
  });
  // if (!window.location.hash) {
  //   $(window).scrollTop(0);
  // }
  enterTl.set(".transition_comp", {
    display: "flex",
    yPercent: 0,
    // onStart: () => {
    //   runSplit();
    // },
  });

  enterTl.fromTo(
    ".transition-holder",
    {
      yPercent: 120,
    },
    {
      yPercent: 0,
      duration: 0.8,
      ease: "expo.out",
      onComplete: () => {
        runSplit();
        runSplitNoChars();
      },
    },
    "<"
  );
  enterTl.fromTo(
    ".transition_top",
    {
      clipPath:
        "polygon(9% 65%, 0% 88%, 0% 100%, 100% 100%, 100% 73%, 93% 92%, 80% 70%, 65% 95%, 64% 80%, 57% 64%, 34% 69%, 14% 80%)",
    },
    {
      clipPath:
        "polygon(9% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%, 87% 0%, 75% 0%, 64% 0%, 56% 0%, 45% 0%, 34% 0%, 20% 0%)",
      duration: 0.7,
      ease: "expo.out",
    },
    "<"
  );
  enterTl.fromTo(
    "path",
    {
      drawSVG: "0% 0%",
    },
    {
      drawSVG: "100% 0%",
    }
  );

  enterTl.set("path", { drawSVG: "100% 0%" });

  enterTl.set($(container), {
    opacity: 1,
  });

  enterTl.to(".transition-holder", {
    yPercent: -120,
    duration: 0.8,
    ease: "expo.out",
    onStart: () => {
      heroTextLoad();
    },
  });
  enterTl.fromTo(
    ".transition_bot",
    {
      clipPath:
        "polygon(0% 15%, 0% 0%, 100% 0%, 100% 26%, 97% 18%, 78% 25%, 65% 16%, 54% 20%, 42% 44%, 31% 37%, 28% 17%, 14% 19%, 0% 36%)",
    },
    {
      clipPath:
        "polygon(0% 15%, 0% 0%, 100% 0%, 100% 100%, 83% 100%, 71% 100%, 61% 100%, 52% 100%, 41% 100%, 29% 100%, 22% 100%, 12% 100%, 0% 100%)",
      duration: 0.7,
      ease: "expo.out",
    },
    "<"
  );
  enterTl.to(
    ".transition_overlay",
    {
      opacity: 0,
    },
    "<"
  );

  enterTl.set(".transition_comp", {
    display: "none",
    onComplete: () => {
      // lenis.start();
    },
  });

  return enterTl;
};

function resetWebflow(data) {
  let parser = new DOMParser();
  let dom = parser.parseFromString(data.next.html, "text/html");
  let webflowPageId = $(dom).find("html").attr("data-wf-page");
  $("html").attr("data-wf-page", webflowPageId);

  if (window.Webflow) {
    window.Webflow.destroy();
    window.Webflow.ready();

    // Ensure ix2 is available before calling init
    let ix2 = window.Webflow.require("ix2");
    if (ix2) {
      ix2.init();
    } else {
      console.warn("Webflow IX2 is not available.");
    }
  }
}

barba.hooks.beforeEnter((data) => {
  checkPreloader();
  lenis.resize();
  runSplit();
  runSplitNoChars();
  globalReveal();
  // cursorColor();
  // globalScript();
  // setFullWidthFontSize();
  // gsap.to(".hero-text .word", {
  //   opacity: 1,
  //   duration: 0.001,
  // });
  // lenis.start();
});
barba.hooks.beforeLeave(() => {
  // let triggers = ScrollTrigger.getAll();
  // console.log("Triggers found:", triggers.length);
  // triggers.forEach((trigger) => trigger.kill(true));
});

barba.hooks.leave(() => {
  console.log("Killing all ScrollTriggers");
  ScrollTrigger.killAll(true);
  lenis.resize();
});

barba.hooks.afterLeave(() => {
  // let triggers = ScrollTrigger.getAll();
  // triggers.forEach(function (trigger) {
  //   trigger.kill();
  // });
});

barba.hooks.after((data) => {
  $(data.next.container).removeClass("fixed");
  if (!window.location.hash) {
    window.scrollTo({ top: 0, behavior: "auto" });
  }
  lenis.resize();
  globalScript();
  globalReveal();
  formDropdowns();
  cursorColor();
  homeInitScroll();
  detailRadio();
  // setFullWidthFontSize();
  resetWebflow(data);
  ScrollTrigger.refresh(true);

  if (document.querySelector(".page_main.is-home")) {
    ScrollTrigger.refresh();
    // homeInitScroll();
  }
  if (document.querySelector("[data-barba-namespace='global-home-page']")) {
    gsap.set(".page_main", { opacity: 1 });
    gsap.to(".toggle", { opacity: 1, duration: 1, delay: 2 });
    gsap.to(".nav_link_holder.global", {
      opacity: 1,
      duration: 0.5,
      delay: 2,
    });
    lenis.start();
    ScrollTrigger.refresh();
    // homeInitScroll();
  }
  if (document.querySelector("[data-barba-namespace='about']")) {
    lenis.start();
    ScrollTrigger.refresh();
    aboutInitScroll();
    statsSection();
  }
  if (document.querySelector("[data-barba-namespace='case-studies']")) {
  }
  if (
    document.querySelector("[data-barba-namespace='case-studies-template']")
  ) {
  }
  if (document.querySelector("[data-barba-namespace='journal']")) {
  }
  if (document.querySelector("[data-barba-namespace='journal-template']")) {
  }
  if (document.querySelector("[data-barba-namespace='detail-page']")) {
  }
  if (document.querySelector("[data-barba-namespace='category-page']")) {
    // homeInitScroll();
  }
  if (document.querySelector("[data-barba-namespace='locations']")) {
    // homeInitScroll();
  }
  if (document.querySelector("[data-barba-namespace='contact-page']")) {
    globalContactScript();
  }
});

barba.init({
  preventRunning: true,
  timeout: 900000,
  debug: true,
  views: [
    {
      namespace: "home-page",
      beforeEnter(data) {
        // ScrollTrigger.refresh();
      },
      afterEnter(data) {
        homeScripts();
        // homeInitScroll();
        lenis.start();
        initSwiperWithMorph();
        clipHeroSwiper();
        // destroyClipSwiper();
      },
    },
    {
      namespace: "global-home-page",
      beforeEnter(data) {
        lenis.stop();
        // $(window).scrollTop(0);
        // ScrollTrigger.refresh();
      },
      afterEnter(data) {
        lenis.stop();

        globalHomeScripts();
        homeScripts();
        // homeInitScroll();
        // lenis.start();
        initSwiperWithMorph();
      },
    },
    {
      namespace: "case-studies",
      beforeEnter(data) {
        function resetJournalItems() {
          $(".journal_item").hide();
          $(".journal_item").slice(0, 6).show();
        }
        resetJournalItems();
        // ScrollTrigger.refresh();
      },
      afterEnter(data) {
        caseStudiesScripts();
        lenis.start();
        initSwiperWithMorph();
      },
    },
    {
      namespace: "case-studies-template",
      beforeEnter(data) {
        // ScrollTrigger.refresh();
      },
      afterEnter(data) {
        lenis.start();
        initSwiperWithMorph();
      },
    },
    {
      namespace: "journal",
      beforeEnter(data) {
        // ScrollTrigger.refresh();
      },
      afterEnter(data) {
        journalScripts();
        lenis.start();
        initSwiperWithMorph();
      },
    },
    {
      namespace: "journal-template",
      beforeEnter(data) {
        // ScrollTrigger.refresh();
      },
      afterEnter(data) {
        lenis.start();
        initSwiperWithMorph();
        journalDetailSlider();
      },
    },
    {
      namespace: "about",
      beforeEnter(data) {},
      afterEnter(data) {
        gsap.to(".toggle", { opacity: 1, duration: 0.5 });
        gsap.to(".nav_link_holder.global", { opacity: 1, duration: 0.5 });
        aboutScript();
        initSwiperWithMorph();
        aboutTeamStack();
        // statsSection();
        // $(".roles_wrap").appendTo(".team_flipped_list");
      },
    },
    {
      namespace: "locations",
      beforeLeave(data) {},
      beforeEnter(data) {},
      afterEnter(data) {
        $(".experience_dest .experiences_card").remove();
        $(".event_dest .events_card").remove();
        $(".experiences_card").appendTo(".experience_dest");
        $(".events_card").appendTo(".event_dest");
        categoryScript();
        lenis.start();
        initSwiperWithMorph();
        // clipSwiper();
      },
    },
    {
      namespace: "category-page",
      beforeLeave(data) {},
      afterEnter(data) {
        $(".experience_dest .experiences_card").remove();
        $(".event_dest .events_card").remove();
        $(".experiences_card").appendTo(".experience_dest");
        $(".events_card").appendTo(".event_dest");
        lenis.start();
        categoryScript();
        initSwiperWithMorph();
        // homeInitScroll();
      },
    },
    {
      namespace: "detail-page",
      beforeEnter(data) {
        ScrollTrigger.refresh();
        lenis.resize();
      },
      afterEnter(data) {
        ScrollTrigger.refresh();
        lenis.resize();
        detailScript();
        lenis.start();
        clipSwiper();
        initSwiperWithMorph();
        fbnScript();

        // detailRadio();
      },
      beforeLeave(data) {
        // Clean up detailRadio when leaving the page
        $(document).off("click.detailRadio");
        $(document).off("change.detailRadio");
        $(document).off("ready.detailRadio");

        if (window.detailRadioMatchMedia) {
          window.detailRadioMatchMedia.forEach((mm) => mm.kill());
          window.detailRadioMatchMedia = [];
        }
      },
    },
    {
      namespace: "build-detail-page",
      beforeEnter(data) {},
      afterEnter(data) {
        detailScript();
        lenis.start();
        clipSwiper();
        initSwiperWithMorph();
      },
    },
    {
      namespace: "legal-page-tc",
      afterEnter(data) {
        globalScript();
        lenis.start();
      },
    },
    {
      namespace: "legal-page-pp",
      afterEnter(data) {
        globalScript();
        lenis.start();
      },
    },
    {
      namespace: "legal-page-cp",
      afterEnter(data) {
        globalScript();
        lenis.start();
      },
    },
    {
      namespace: "contact-page",
      beforeEnter(data) {
        gsap.set(".contact_content.aus", {
          yPercent: 0,
          opacity: 0,
          pointerEvents: "none",
        });
      },
      afterEnter(data) {
        globalContactScript();
        lenis.start();
      },
    },
  ],
  transitions: [
    {
      name: "page-reload",
      once: (data) => {
        if (document.querySelector(".page_main.is-global")) {
          $(window).scrollTop(0);
          gsap.set(".page_main", { opacity: 1 });
          homeIntroAnimation(data.next.container);
          globalHomeScripts();
          homeInitScroll();
          heroTextLoad();
          formDropdowns();
          // lenis.start();
          // setFullWidthFontSize();
          contactTextLoad();
        }
        if (document.querySelector(".page_main.is-home")) {
          formDropdowns();
          heroTextLoad();
          lenis.start();
          // setFullWidthFontSize();
          contactTextLoad();
          homeInitScroll();
        }
        if (document.querySelector("[data-barba-namespace='about']")) {
          heroTextLoad();
          aboutInitScroll();
          formDropdowns();
          statsSection();
        }
        if (document.querySelector("[data-barba-namespace='category-page']")) {
          heroTextLoad();
          homeInitScroll();
          formDropdowns();
          // setFullWidthFontSize();
        }
        if (document.querySelector("[data-barba-namespace='locations']")) {
          heroTextLoad();
          formDropdowns();
          homeInitScroll();
          clipSwiper();
        }
        if (document.querySelector("[data-barba-namespace='detail-page']")) {
          heroTextLoad();
          clipSwiper();
          formDropdowns();
          detailRadio();
          fbnScript();
        }
        if (
          document.querySelector("[data-barba-namespace='build-detail-page']")
        ) {
          heroTextLoad();
          clipSwiper();
          formDropdowns();
        }
        if (document.querySelector("[data-barba-namespace='case-studies']")) {
          heroTextLoad();
          formDropdowns();
          caseStudiesScripts();
        }
        if (
          document.querySelector(
            "[data-barba-namespace='case-studies-template']"
          )
        ) {
          heroTextLoad();
          formDropdowns();
        }
        if (document.querySelector("[data-barba-namespace='journal']")) {
          heroTextLoad();
          formDropdowns();
          journalScripts();
        }
        if (
          document.querySelector("[data-barba-namespace='journal-template']")
        ) {
          heroTextLoad();
          formDropdowns();
        }
        // if (document.querySelector("[data-barba-namespace='legal-page']")) {
        //   heroTextLoad();
        //   formDropdowns();
        // }
        // if (document.querySelector("[data-barba-namespace='legal-page']")) {
        //   heroTextLoad();
        //   formDropdowns();
        // }
        if (document.querySelector("[data-barba-namespace='legal-page']")) {
          heroTextLoad();
          formDropdowns();
        }
        if (document.querySelector("[data-barba-namespace='contact']")) {
          heroTextLoad();
          globalContactScript();
          contactTextLoad();
          formDropdowns();
        }

        if (document.querySelector("[data-barba-namespace='contact-page']")) {
          heroTextLoad();
          contactTextLoad();
          formDropdowns();
        }
      },
    },
    {
      name: "basic-transition",
      sync: true,
      leave: (data) => leaveAnimation(data.current.container),
      enter: (data) => enterAnimation(data.next.container),
    },
  ],
});