// window.addEventListener("load", function () {})
let url_params = new URLSearchParams(window.location.search);

let smoothScroll;
let windowViewPort,
  drawSVG,
  init_particles,
  flkty,
  mouse_info,
  cursor_inner,
  cursor_outer;
let cursor_circles = [];

mouse_info = {
  x: 0,
  y: 0,
  down: false,
  up: true,
  link_hovering: false,
  slide_dragging: false,
  arrow_mode: {
    active: false,
    screen_side: undefined,
  },
};

window.addEventListener("pageshow", function (event) {
  // Check if the page was loaded from the cache
  if (event.persisted) {
    location.reload();
  }
});

window.addEventListener("load", function () {
  gsap.registerPlugin(
    ScrollTrigger,
    Observer,
    Flip,
    DrawSVGPlugin,
    SplitText,
    MorphSVGPlugin
  );
  //Set default duration for gsap
  gsap.defaults({
    ease: "power1.inOut",
    duration: 1,
  });
  // MorphSVGPlugin.convertToPath(
  //   "circle, rect, ellipse, line, polygon, polyline"
  // );

  let transition_screen_bg = $(".page-transition-screen-bg");

  ////Set up the transition screen
  ///
  gsap.timeline().to(transition_screen_bg, {
    opacity: 0,
    duration: 0.3,
    delay: 0.35,
  });

  setTimeout(() => {
    ScrollTrigger.refresh();
  }, 3000);

  setTimeout(() => {
    ScrollTrigger.refresh();
  }, 12000);

  // let params = new URLSearchParams(window.location.search);
  if (window.innerWidth > 991) {
    windowViewPort = "desktop";
  } else if (window.innerWidth <= 991 && window.innerWidth > 767) {
    windowViewPort = "tablet";
  } else {
    windowViewPort = "mobile";
  }

  window.addEventListener("resize", function () {
    console.log("Window resized!");

    let current_vieport;
    if (window.innerWidth > 1275) {
      current_vieport = "desktop";
    } else if (window.innerWidth <= 1275 && window.innerWidth > 767) {
      current_vieport = "tablet";
    } else {
      current_vieport = "mobile";
    }

    if (current_vieport !== windowViewPort) {
      location.reload();
      // console.log(current_nav_vieport, nav_windowViewPort);
    }
  });

  // smoothScroll = new Lenis({
  //   duration: 1.2,
  //   // duration: 1.2,
  //   easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  //   orientation: "vertical", // vertical, horizontal
  //   gestureOrientation: "vertical", // vertical, horizontal, both
  //   smoothWheel: true,
  //   wheelMultiplier: 1,
  //   smoothTouch: false,
  //   touchMultiplier: 2,
  //   infinite: false,
  // });
  // function raf(time) {
  //   smoothScroll.raf(time);
  //   requestAnimationFrame(raf);
  // }

  // requestAnimationFrame(raf);

  // Function to initialize Lenis for smooth scrolling
  const initSmoothScrolling = () => {
    // Instantiate the Lenis object with specified properties
    smoothScroll = new Lenis({
      lerp: 0.1, // Lower values create a smoother scroll effect
      smoothWheel: true, // Enables smooth scrolling for mouse wheel events
      duration: 1.2,
      // duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      orientation: "vertical", // vertical, horizontal
      gestureOrientation: "vertical", // vertical, horizontal, both
      smoothWheel: true,
      wheelMultiplier: 1,
      smoothTouch: false,
      touchMultiplier: 2,
      infinite: false,
    });

    // Update ScrollTrigger each time the user scrolls
    smoothScroll.on("scroll", () => ScrollTrigger.update());

    // Define a function to run at each animation frame
    const scrollFn = (time) => {
      smoothScroll.raf(time); // Run Lenis' requestAnimationFrame method
      requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame
    };
    // Start the animation frame loop
    requestAnimationFrame(scrollFn);
  };

  initSmoothScrolling();

  setInitialSVGState = (type, name, target) => {
    let paths;
    if (type === undefined) {
      paths = document.querySelectorAll("svg path");
    } else if (target === undefined) {
      if (type === "id") {
        paths = document.querySelectorAll(
          `#${name} path,#${name} circle,#${name} rect`
        );
      } else if (type === "class") {
        paths = document.querySelectorAll(
          `.${name} path,.${name} circle,.${name} rect`
        );
      } else if (type === "raw-attributes") {
        paths = document.querySelectorAll(
          `${name} path,${name} circle,${name} rect`
        );
      }
    } else if (target === "path") {
      if (type === "id") {
        paths = document.querySelectorAll(`path#${name}`);
      } else if (type === "class") {
        paths = document.querySelectorAll(`path.${name}`);
      }
    }
    paths.forEach(function (path) {
      let length = path.getTotalLength();
      path.style.transition = path.style.WebkitTransition = "none";
      path.style.strokeDasharray = length + " " + length;
      path.style.strokeDashoffset = length;
    });
  };
  drawSVG = (type, name, { speed, selector, reverse } = {}) => {
    if (!speed) {
      speed = 2;
    }

    // Get the path(s) to animate based on the type and name parameters
    var paths;
    if (!type) {
      paths = document.querySelectorAll("svg path");
    } else if (!selector) {
      if (type === "id") {
        paths = document.querySelectorAll(
          `#${name} path,#${name} circle,#${name} rect`
        );
      } else if (type === "class") {
        paths = document.querySelectorAll(
          `.${name} path,.${name} circle,.${name} rect`
        );
      } else if (type === "raw-attributes") {
        paths = document.querySelectorAll(
          `${name} path,${name} circle,${name} rect`
        );
      } else if (type === "node-element") {
        paths = document.querySelectorAll(
          `${name} path,${name} circle,${name} rect`
        );
      }
    } else if (selector === "path") {
      if (type === "id") {
        paths = document.querySelectorAll(`path#${name}`);
      } else if (type === "class") {
        paths = document.querySelectorAll(`path.${name}`);
      }
    }

    // Animate each path
    paths.forEach(function (path, index) {
      var length = path.getTotalLength();

      // Clear any previous transition
      path.style.transition = path.style.WebkitTransition = "none";

      // Set up the starting positions
      path.style.strokeDasharray = length + " " + length;
      if (reverse) {
        path.style.strokeDashoffset = 0;
      } else {
        path.style.strokeDashoffset = length;
      }

      // Trigger a layout so styles are calculated & the browser
      // picks up the starting position before animating
      path.getBoundingClientRect();

      // Define the transition
      path.style.transition =
        path.style.WebkitTransition = `stroke-dashoffset ${speed}s ease-in-out`;

      // Animate forwards or backwards
      if (reverse) {
        path.style.strokeDashoffset = length;
      } else {
        path.style.strokeDashoffset = 0;
      }
    });
  };

  setInitialSVGState("id", "cta-section");
  $("#cta-section").each(function () {
    let triggerElement = $(this);
    gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        // markers: true,
        start: "0% 50%",
        end: "100% 0%",
        once: true,
        onEnter: () => {
          drawSVG("id", "cta-section");
        },
      },
    });
  });

  $(".slider1-item").each(function (index) {
    let id = "slider_item_" + index;
    $(this).attr("id", id);
  });
  $(".slider1-item").on("mouseenter", function () {
    let having_svg = $(this).find("svg").length !== 0;
    if (having_svg) {
      let id = $(this).attr("id");
      drawSVG("id", id, { speed: 1.5 });
    }
  });
  setInitialSVGState("class", "svg-circle-border");
  $(".slider-control-arrow").each(function (index) {
    let id = "slider_arrow_" + index;
    $(this).find(".svg-circle-border").attr("id", id);
  });
  var pauseTimeout;
  $(".slider-control-arrow")
    .not("[no-pausing]")
    .on("click", function () {
      flkty.pausePlayer();
      clearTimeout(pauseTimeout);
      pauseTimeout = setTimeout(function () {
        flkty.unpausePlayer();
      }, 1000);
    });
  $(".slider-control-arrow").on("mouseenter", function () {
    // let bg = $(this);
    // let arrow = $(this).find(".svg-circle-arrow");
    let arrow_circle = $(this).find(".svg-circle-border");
    let having_svg = arrow_circle.length !== 0;
    if (having_svg) {
      let id = arrow_circle.attr("id");
      // drawSVG();
      drawSVG("id", id, { speed: 0.75 });
    }
  });
  $(".slider-control-arrow").on("mouseleave", function () {
    // let bg = $(this);
    // let arrow = $(this).find(".svg-circle-arrow");
    let arrow_circle = $(this).find(".svg-circle-border");
    let having_svg = arrow_circle.length !== 0;
    if (having_svg) {
      let id = arrow_circle.attr("id");
      drawSVG("id", id, { speed: 0.75, reverse: true });
    }
  });

  $(".cta-bottom").each(function () {
    let tl = gsap.timeline({
      repeat: -1,
      repeatDelay: 0,
      // paused: true
    });
    tl.to(".cta-bottom-part", {
      x: "-100%",
      duration: 30,
      ease: "none",
    }).to(".cta-bottom-part", {
      x: "-0%",
      duration: 0,
      ease: "none",
    });
  });
  // setTimeout(() => {
  $(`[parallax-effect]`).each(function () {
    if (windowViewPort === "desktop") {
      let elementHeight = $(this).innerHeight();
      // console.log(elementHeight);
      let parallax_type = $(this).attr("parallax-type");
      let parallax_faster = $(this).attr("parallax-faster");
      let parallax_start = $(this).attr("parallax-start");
      let parallax_end = $(this).attr("parallax-end");
      // let parallax_end_random = Math.random() * (35 - 5) + 5;
      let parallax_end_random = parallax_faster
        ? -1 * (Math.floor(Math.random() * (50 - 45 + 1)) - 50)
        : -1 * (Math.floor(Math.random() * (30 - 20 + 1)) - 30);
      let parallax_start_random = parallax_faster
        ? 50 - 45 + 45
        : Math.random() * (30 - 20) + 20;

      switch (parallax_type) {
        case "image":
          gsap
            .timeline({
              scrollTrigger: {
                trigger: $(this),
                scrub: 0.75,
              },
              defaults: {
                ease: "none",
              },
            })
            .fromTo(
              $(this),
              {
                backgroundPosition: `50% ${
                  parallax_start !== undefined ? parallax_start : 100
                }%`,
              },
              {
                backgroundPosition: `50% ${
                  parallax_end !== undefined ? parallax_end : 0
                }%`,
              }
            );
          break;
        default:
          if (elementHeight > 480) {
            // $(this).css("backgroundColor", "black");
            parallax_end_random = parallax_faster
              ? -1 * (Math.floor(Math.random() * (18 - 12 + 1)) - 18)
              : -1 * (Math.floor(Math.random() * (10 - 5 + 1)) - 10);
            parallax_start_random = parallax_faster
              ? Math.random() * (18 - 12) + 12
              : Math.random() * (10 - 5) + 5;
            // return;
          }
          gsap
            .timeline({
              scrollTrigger: {
                trigger: $(this),
                scrub: 0.75,
                // markers: true,
                start: "0% 100%",
                end: "100% 0%",
              },
              // defaults: {
              //   ease: "none"
              // }
            })
            .fromTo(
              $(this),
              {
                yPercent: `${
                  parallax_start !== undefined
                    ? parallax_start
                    : parallax_start_random
                }`,
                // yPercent: `${parallax_start !== undefined ? parallax_start : 25}`
              },
              {
                yPercent: `${
                  parallax_end !== undefined
                    ? parallax_end
                    : parallax_end_random * -1
                }`,
              }
            );
      }
    }
  });
  // }, 1500);
  $(`[fade-animation]`).each(function (index) {
    // if (windowViewPort !== "desktop") return;
    let triggerElement = $(this);
    let delay_duration = $(this).attr("delay-duration");
    if (delay_duration === undefined) {
      delay_duration = 0.1;
    }

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 80%",
        end: "bottom center",
        toggleActions: "play none none none",
        // markers: true
        // scrub: 1
        // once: true
      },
    });
    tl.fromTo(
      triggerElement,
      {
        opacity: 0,
        // y: 10
        // scale: 0.92,
      },
      {
        delay: delay_duration,
        // y: 0,
        // scale: 1,
        ease: "power1.inOut",
        duration: 0.75,
        opacity: 1,
      }
    );
  });
  let particle_existing = false;

  init_particles = (particle_number = 80) => {
    particle_existing = true;
    //Particles
    particlesJS(
      // this is the ID your particles container needs to have
      "particle-screen",
      {
        particles: {
          number: {
            value: particle_number,
            density: {
              enable: true,
              value_area: 800,
            },
          },
          color: {
            value: "#caff00",
          },
          shape: {
            type: "image",
            stroke: {
              width: 0,
              color: "#000000",
            },
            polygon: {
              nb_sides: 5,
            },
            image: {
              src: "https://uploads-ssl.webflow.com/62bde5720d5cbfc1dd34dae0/638115443df186126a9d5b52_Star.png",
              width: 100,
              height: 100,
            },
          },
          opacity: {
            value: 0.5,
            random: false,
            anim: {
              enable: false,
              speed: 1,
              opacity_min: 0.1,
              sync: false,
            },
          },
          size: {
            value: 9,
            random: true,
            anim: {
              enable: false,
              speed: 40,
              size_min: 0.1,
              sync: false,
            },
          },
          line_linked: {
            enable: false,
            distance: 150,
            color: "#ffffff",
            opacity: 0.4,
            width: 1,
          },
          move: {
            enable: true,
            speed: 5.5,
            direction: "top",
            random: true,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: {
              enable: false,
              rotateX: 600,
              rotateY: 1200,
            },
          },
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: {
              enable: false,
              mode: "repulse",
            },
            onclick: {
              enable: false,
              mode: "push",
            },
            resize: true,
          },
          modes: {
            grab: {
              distance: 400,
              line_linked: {
                opacity: 1,
              },
            },
            bubble: {
              distance: 400,
              size: 40,
              duration: 2,
              opacity: 8,
              speed: 3,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
            push: {
              particles_nb: 4,
            },
            remove: {
              particles_nb: 2,
            },
          },
        },
        retina_detect: true,
      }
    );
  };

  $(".button.cta-button:not([not-animation-trigger])").on(
    "mouseenter mouseleave",
    function () {
      if (!particle_existing) {
        init_particles();
      }
      $(".particle-section-fixed").toggleClass("is-visible");
      $("body").toggleClass("paticles-active");
      $(this).css("opacity", 1);
    }
  );

  ///Text animation

  // setTimeout(() => {
  let SplitFeaturedHeading = new SplitText(`[text-animation]`, {
    type: "lines,words, chars",
    linesClass: "magic-line",
    wordsClass: "magic-word",
    // charsClass: "magic-character"
  });
  // }, 300);

  ///Check if the whole section needs the same custom text animation for all headings

  setTimeout(() => {
    for (let index = 1; index <= 29; index++) {
      let target = `[all-headings-data-effect${index}]`;
      let not_default_text_animation = $(target).length !== 0;
      // console.log(not_default_text_animation);
      if (not_default_text_animation) {
        $(target).find("[text-animation]").attr(`data-effect${index}`, "true");
        break;
      }
    }
  }, 50);
  setTimeout(() => {
    $(`[text-animation]`).each(function (index) {
      let not_default_text_animation;
      for (let index = 1; index <= 29; index++) {
        not_default_text_animation =
          $(this).attr(`data-effect${index}`) !== undefined;
        // console.log(index, not_default_text_animation, $(this).text());
        if (not_default_text_animation) break;
      }
      if (not_default_text_animation) return;
      let triggerElement = $(this);
      $(this).css({
        opacity: 0,
      });
      $(this).find(".magic-line").css({
        overflow: "hidden",
        // lineHeight: "102%"
      });
      let delay_duration = $(this).attr("delay-duration");
      if (delay_duration === undefined) {
        delay_duration = 0;
      }
      let span_class = "span." + $(this).attr("span-class");
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: triggerElement,
          start: "top 75%",
          end: "bottom center",
          toggleActions: "play none none none",
          // scrub: 1
          // once: true
        },
      });
      tl.set($(this), {
        opacity: 1,
      }).fromTo(
        $(this).find(".magic-word"),
        {
          // opacity: 0,
          y: "102%",
        },
        {
          delay: delay_duration,
          duration: 0.6,
          // opacity: 1,
          y: "0%",
          ease: "power1.out",
          // stagger: 0.03
        }
      );
    });
    const fx1Titles = [
      ...document.querySelectorAll("[text-animation][data-effect1]"),
    ];
    const fx2Titles = [
      ...document.querySelectorAll("[text-animation][data-effect2]"),
    ];
    const fx3Titles = [
      ...document.querySelectorAll("[text-animation][data-effect3]"),
    ];
    const fx4Titles = [
      ...document.querySelectorAll("[text-animation][data-effect4]"),
    ];
    const fx5Titles = [
      ...document.querySelectorAll("[text-animation][data-effect5]"),
    ];
    const fx6Titles = [
      ...document.querySelectorAll("[text-animation][data-effect6]"),
    ];
    const fx7Titles = [
      ...document.querySelectorAll("[text-animation][data-effect7]"),
    ];
    const fx8Titles = [
      ...document.querySelectorAll("[text-animation][data-effect8]"),
    ];
    const fx9Titles = [
      ...document.querySelectorAll("[text-animation][data-effect9]"),
    ];
    const fx10Titles = [
      ...document.querySelectorAll("[text-animation][data-effect10]"),
    ];
    const fx11Titles = [
      ...document.querySelectorAll("[text-animation][data-effect11]"),
    ];
    const fx12Titles = [
      ...document.querySelectorAll("[text-animation][data-effect12]"),
    ];
    const fx13Titles = [
      ...document.querySelectorAll("[text-animation][data-effect13]"),
    ];
    const fx14Titles = [
      ...document.querySelectorAll("[text-animation][data-effect14]"),
    ];
    const fx15Titles = [
      ...document.querySelectorAll("[text-animation][data-effect15]"),
    ];
    const fx16Titles = [
      ...document.querySelectorAll("[text-animation][data-effect16]"),
    ];
    const fx17Titles = [
      ...document.querySelectorAll("[text-animation][data-effect17]"),
    ];
    const fx18Titles = [
      ...document.querySelectorAll("[text-animation][data-effect18]"),
    ];
    const fx19Titles = [
      ...document.querySelectorAll("[text-animation][data-effect19]"),
    ];
    const fx20Titles = [
      ...document.querySelectorAll("[text-animation][data-effect20]"),
    ];
    const fx21Titles = [
      ...document.querySelectorAll("[text-animation][data-effect21]"),
    ];
    const fx22Titles = [
      ...document.querySelectorAll("[text-animation][data-effect22]"),
    ];
    const fx23Titles = [
      ...document.querySelectorAll("[text-animation][data-effect23]"),
    ];
    const fx24Titles = [
      ...document.querySelectorAll("[text-animation][data-effect24]"),
    ];
    const fx25Titles = [
      ...document.querySelectorAll("[text-animation][data-effect25]"),
    ];
    const fx26Titles = [
      ...document.querySelectorAll("[text-animation][data-effect26]"),
    ];
    const fx27Titles = [
      ...document.querySelectorAll("[text-animation][data-effect27]"),
    ];
    const fx28Titles = [
      ...document.querySelectorAll("[text-animation][data-effect28]"),
    ];
    const fx29Titles = [
      ...document.querySelectorAll("[text-animation][data-effect29]"),
    ];

    fx1Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          opacity: 0,
          scale: 0.6,
          rotationZ: () => gsap.utils.random(-20, 20),
        },
        {
          ease: "power4",
          opacity: 1,
          scale: 1,
          rotation: 0,
          stagger: 0.4,
          scrollTrigger: {
            trigger: title,
            start: "center+=20% bottom",
            end: "+=50%",
            scrub: true,
          },
        }
      );
    });

    fx2Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          opacity: 0,
          yPercent: 120,
          scaleY: 2.3,
          scaleX: 0.7,
          transformOrigin: "50% 0%",
        },
        {
          duration: 1,
          ease: "back.inOut(2)",
          opacity: 1,
          yPercent: 0,
          scaleY: 1,
          scaleX: 1,
          stagger: 0.03,
          scrollTrigger: {
            trigger: title,
            start: "center bottom+=50%",
            end: "bottom top+=40%",
            scrub: true,
          },
        }
      );
    });

    fx3Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      gsap.fromTo(
        chars,
        {
          "will-change": "transform",
          transformOrigin: "50% 0%",
          scaleY: 0,
        },
        {
          ease: "back",
          opacity: 1,
          scaleY: 1,
          yPercent: 0,
          stagger: 0.03,
          scrollTrigger: {
            trigger: title,
            start: "center bottom-=5%",
            end: "top top-=20%",
            scrub: true,
          },
        }
      );
    });

    fx4Titles.forEach((title) => {
      const words = title.querySelectorAll(".magic-word");

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");

        gsap.fromTo(
          chars,
          {
            "will-change": "opacity, transform",
            x: (position, _, arr) => 150 * (position - arr.length / 2),
          },
          {
            ease: "power1.inOut",
            x: 0,
            stagger: {
              grid: "auto",
              from: "center",
            },
            scrollTrigger: {
              trigger: word,
              start: "center bottom+=30%",
              end: "top top+=15%",
              scrub: true,
            },
          }
        );
      }
    });

    fx5Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          opacity: 0,
          xPercent: () => gsap.utils.random(-200, 200),
          yPercent: () => gsap.utils.random(-150, 150),
        },
        {
          ease: "power1.inOut",
          opacity: 1,
          xPercent: 0,
          yPercent: 0,
          stagger: { each: 0.05, grid: "auto", from: "random" },
          scrollTrigger: {
            trigger: title,
            start: "center bottom+=10%",
            end: "bottom center",
            scrub: 0.9,
          },
        }
      );
    });

    fx6Titles.forEach((title) => {
      const words = title.querySelectorAll(".magic-word");

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");

        chars.forEach((char) =>
          gsap.set(char.parentNode, { perspective: 2000 })
        );

        gsap.fromTo(
          chars,
          {
            "will-change": "opacity, transform",
            opacity: 0,
            rotationX: -90,
            yPercent: 50,
          },
          {
            ease: "power1.inOut",
            opacity: 1,
            rotationX: 0,
            yPercent: 0,
            stagger: {
              each: 0.03,
              from: 0,
            },
            scrollTrigger: {
              trigger: word,
              start: "center bottom+=40%",
              end: "bottom center-=30%",
              scrub: 0.9,
            },
          }
        );
      }
    });

    fx7Titles.forEach((title) => {
      const words = title.querySelectorAll(".magic-word");

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");

        chars.forEach((char) =>
          gsap.set(char.parentNode, { perspective: 2000 })
        );

        gsap.fromTo(
          chars,
          {
            "will-change": "opacity, transform",
            transformOrigin: "100% 50%",
            opacity: 0,
            rotationY: -90,
            z: -300,
          },
          {
            ease: "expo",
            opacity: 1,
            rotationY: 0,
            z: 0,
            stagger: { each: 0.06, from: "end" },
            scrollTrigger: {
              trigger: word,
              start: "bottom bottom+=20%",
              end: "bottom top",
              scrub: 1,
            },
          }
        );
      }
    });

    const lettersAndSymbols = [
      "a",
      "b",
      "c",
      "d",
      "e",
      "f",
      "g",
      "h",
      "i",
      "j",
      "k",
      "l",
      "m",
      "n",
      "o",
      "p",
      "q",
      "r",
      "s",
      "t",
      "u",
      "v",
      "w",
      "x",
      "y",
      "z",
      "!",
      "@",
      "#",
      "$",
      "%",
      "^",
      "&",
      "*",
      "-",
      "_",
      "+",
      "=",
      ";",
      ":",
      "<",
      ">",
      ",",
    ];
    fx8Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char, position) => {
        let initialHTML = char.innerHTML;

        gsap.fromTo(
          char,
          {
            opacity: 0,
          },
          {
            duration: 0.03,
            innerHTML: () =>
              lettersAndSymbols[
                Math.floor(Math.random() * lettersAndSymbols.length)
              ],
            repeat: 1,
            repeatRefresh: true,
            opacity: 1,
            repeatDelay: 0.03,
            delay: (position + 1) * 0.18,
            onComplete: () =>
              gsap.set(char, { innerHTML: initialHTML, delay: 0.03 }),
            scrollTrigger: {
              trigger: title,
              start: "top bottom",
              end: "bottom center",
              toggleActions: "play resume resume reset",
              onEnter: () => gsap.set(char, { opacity: 0 }),
            },
          }
        );
      });
    });

    fx9Titles.forEach((title) => {
      const words = title.querySelectorAll(".magic-word");

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");

        gsap.fromTo(
          chars,
          {
            "will-change": "transform",
            scaleX: 0,
            x: (_, target) =>
              window.innerWidth / 2 -
              target.offsetLeft -
              target.offsetWidth / 2,
          },
          {
            ease: "power1.inOut",
            scaleX: 1,
            x: 0,
            scrollTrigger: {
              trigger: word,
              start: "top bottom",
              end: "top top",
              scrub: true,
            },
          }
        );
      }
    });

    fx10Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity",
          opacity: 0,
          filter: "blur(20px)",
        },
        {
          duration: 0.25,
          ease: "power1.inOut",
          opacity: 1,
          filter: "blur(0px)",
          stagger: { each: 0.05, from: "random" },
          scrollTrigger: {
            trigger: title,
            start: "top bottom",
            end: "center center",
            toggleActions: "play resume resume reset",
          },
        }
      );
    });

    fx11Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");
      wrapElements(chars, "span", "char-wrap");

      gsap.fromTo(
        chars,
        {
          "will-change": "transform",
          transformOrigin: "0% 50%",
          xPercent: 105,
        },
        {
          duration: 1,
          ease: "expo",
          xPercent: 0,
          stagger: 0.042,
          scrollTrigger: {
            trigger: title,
            start: "top bottom",
            end: "top top+=10%",
            toggleActions: "play resume resume reset",
          },
        }
      );
    });

    fx12Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");
      wrapElements(chars, "span", "char-wrap");

      gsap.fromTo(
        chars,
        {
          "will-change": "transform",
          xPercent: -250,
          rotationZ: 45,
          scaleX: 6,
          transformOrigin: "100% 50%",
        },
        {
          duration: 1,
          ease: "power2",
          xPercent: 0,
          rotationZ: 0,
          scaleX: 1,
          stagger: -0.06,
          scrollTrigger: {
            trigger: title,
            start: "top bottom+=10%",
            end: "bottom top+=10%",
            scrub: true,
          },
        }
      );
    });

    fx13Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char) => gsap.set(char.parentNode, { perspective: 2000 }));

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          opacity: 0,
          rotationY: 180,
          xPercent: -40,
          yPercent: 100,
        },
        {
          ease: "power4.inOut()",
          opacity: 1,
          rotationY: 0,
          xPercent: 0,
          yPercent: 0,
          stagger: {
            each: -0.03,
            from: 0,
          },
          scrollTrigger: {
            trigger: title,
            start: "center bottom",
            end: "bottom center-=30%",
            scrub: 0.9,
          },
        }
      );
    });

    fx14Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      gsap
        .timeline()
        .fromTo(
          title,
          {
            "will-change": "transform",
            xPercent: 100,
          },
          {
            ease: "none",
            xPercent: 0,
            scrollTrigger: {
              trigger: title,
              scrub: true,
              start: "center center",
              end: "+=100%",
              pin: title.parentNode,
            },
          }
        )
        .fromTo(
          chars,
          {
            "will-change": "transform",
            scale: 3,
            yPercent: -900,
          },
          {
            ease: "back(2)",
            scale: 1,
            yPercent: 0,
            stagger: 0.05,
            scrollTrigger: {
              trigger: title,
              start: "center center",
              end: "+=100%",
              scrub: 1.9,
            },
          },
          0
        );
    });

    fx15Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char) => gsap.set(char.parentNode, { perspective: 2000 }));

      gsap
        .timeline()
        .fromTo(
          title,
          {
            "will-change": "transform",
            xPercent: -80,
          },
          {
            ease: "none",
            xPercent: 0,
            scrollTrigger: {
              trigger: title,
              scrub: true,
              start: "center center",
              end: "+=100%",
              pin: title.parentNode,
            },
          }
        )
        .fromTo(
          chars,
          {
            "will-change": "opacity, transform",
            transformOrigin: "50% 50% -200px",
            rotationX: 380,
            opacity: 0,
          },
          {
            ease: "expo.inOut",
            rotationX: 0,
            z: 0,
            opacity: 1,
            stagger: -0.03,
            scrollTrigger: {
              trigger: title,
              start: "center center",
              end: "+=140%",
              scrub: 1.2,
            },
          },
          0
        );
    });

    fx16Titles.forEach((title) => {
      gsap.fromTo(
        title,
        {
          transformOrigin: "0% 50%",
          rotate: 3,
        },
        {
          ease: "none",
          rotate: 0,
          scrollTrigger: {
            trigger: title,
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        }
      );

      gsap.fromTo(
        title.querySelectorAll(".word"),
        {
          "will-change": "opacity",
          opacity: 0.1,
        },
        {
          ease: "none",
          opacity: 1,
          stagger: 0.05,
          scrollTrigger: {
            trigger: title,
            start: "top bottom-=20%",
            end: "center top+=20%",
            scrub: true,
          },
        }
      );
    });

    fx17Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char) => gsap.set(char.parentNode, { perspective: 1000 }));

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          opacity: 0,
          rotateX: () => gsap.utils.random(-120, 120),
          z: () => gsap.utils.random(-200, 200),
        },
        {
          ease: "none",
          opacity: 1,
          rotateX: 0,
          z: 0,
          stagger: 0.02,
          scrollTrigger: {
            trigger: title,
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        }
      );
    });

    fx18Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char) => gsap.set(char.parentNode, { perspective: 1000 }));

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          opacity: 0.2,
          z: -800,
        },
        {
          ease: "back.out(1.2)",
          opacity: 1,
          z: 0,
          stagger: 0.04,
          scrollTrigger: {
            trigger: title,
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        }
      );
    });

    fx19Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char) => gsap.set(char.parentNode, { perspective: 1000 }));

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          transformOrigin: "50% 0%",
          opacity: 0,
          rotationX: -90,
          z: -200,
        },
        {
          ease: "power1",
          opacity: 1,
          stagger: 0.05,
          rotationX: 0,
          z: 0,
          scrollTrigger: {
            trigger: title,
            start: "center bottom",
            end: "bottom top+=20%",
            scrub: true,
          },
        }
      );
    });

    fx20Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");

      chars.forEach((char) => gsap.set(char.parentNode, { perspective: 1000 }));

      gsap.fromTo(
        chars,
        {
          "will-change": "opacity, transform",
          transformOrigin: "50% 100%",
          opacity: 0,
          rotationX: 90,
        },
        {
          ease: "power4",
          opacity: 1,
          stagger: {
            each: 0.03,
            from: "random",
          },
          rotationX: 0,
          scrollTrigger: {
            trigger: title,
            start: "center bottom",
            end: "bottom top+=20%",
            scrub: true,
          },
        }
      );
    });

    fx21Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");

        chars.forEach((char) =>
          gsap.set(char.parentNode, { perspective: 2000 })
        );

        gsap.fromTo(
          chars,
          {
            "will-change": "opacity, transform",
            opacity: 0,
            y: (position, _, arr) => -40 * Math.abs(position - arr.length / 2),
            z: () => gsap.utils.random(-1500, -600),
            rotationX: () => gsap.utils.random(-500, -200),
          },
          {
            ease: "power1.inOut",
            opacity: 1,
            y: 0,
            z: 0,
            rotationX: 0,
            stagger: {
              each: 0.06,
              from: "center",
            },
            scrollTrigger: {
              trigger: word,
              start: "top bottom",
              end: "top top+=15%",
              scrub: true,
            },
          }
        );
      }
    });

    fx22Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");
        const charsTotal = chars.length;

        chars.forEach((char) =>
          gsap.set(char.parentNode, { perspective: 1000 })
        );

        gsap.fromTo(
          chars,
          {
            "will-change": "transform",
            x: (position) => {
              const factor =
                position < Math.ceil(charsTotal / 2)
                  ? position
                  : Math.ceil(charsTotal / 2) -
                    Math.abs(Math.floor(charsTotal / 2) - position) -
                    1;
              return (
                (charsTotal % 2
                  ? Math.abs(Math.ceil(charsTotal / 2) - 1 - factor)
                  : Math.abs(Math.ceil(charsTotal / 2) - factor)) *
                200 *
                (position < charsTotal / 2 ? -1 : 1)
              );
            },
            y: (position) => {
              const factor =
                position < Math.ceil(charsTotal / 2)
                  ? position
                  : Math.ceil(charsTotal / 2) -
                    Math.abs(Math.floor(charsTotal / 2) - position) -
                    1;
              return factor * 60;
            },
            rotationY: -270,
            rotationZ: (position) => {
              const factor =
                position < Math.ceil(charsTotal / 2)
                  ? position
                  : Math.ceil(charsTotal / 2) -
                    Math.abs(Math.floor(charsTotal / 2) - position) -
                    1;
              return position < charsTotal / 2
                ? Math.abs(factor - charsTotal / 2) * 8
                : -1 * Math.abs(factor - charsTotal / 2) * 8;
            },
          },
          {
            ease: "power2.inOut",
            x: 0,
            y: 0,
            rotationZ: 0,
            rotationY: 0,
            scale: 1,
            scrollTrigger: {
              trigger: word,
              start: "top bottom+=40%",
              end: "top top+=15%",
              scrub: true,
            },
          }
        );
      }
    });

    fx23Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];

      for (const [wordPosition, word] of words.entries()) {
        gsap.fromTo(
          word.querySelectorAll(".magic-character"),
          {
            "will-change": "transform",
            scale: 0.01,
            x: (pos, _, arr) => {
              return wordPosition % 2 ? pos * 50 : (arr.length - pos - 1) * -50;
            },
          },
          {
            ease: "power4",
            scale: 1,
            x: 0,
            scrollTrigger: {
              trigger: word,
              start: "center bottom",
              end: "bottom top-=40%",
              scrub: true,
            },
          }
        );
      }
    });

    fx24Titles.forEach((title) => {
      const chars = title.querySelectorAll(".magic-character");
      const charsTotal = chars.length;

      gsap.fromTo(
        chars,
        {
          "will-change": "transform",
          y: (position) => {
            const factor =
              position < Math.ceil(charsTotal / 2)
                ? position
                : Math.ceil(charsTotal / 2) -
                  Math.abs(Math.floor(charsTotal / 2) - position) -
                  1;
            return (charsTotal / 2 - factor + 6) * 130;
          },
        },
        {
          ease: "elastic.out(.4)",
          y: 0,
          stagger: {
            amount: 0.1,
            from: "center",
          },
          scrollTrigger: {
            trigger: title,
            start: "top bottom",
            end: "bottom top-=50%",
            scrub: true,
          },
        }
      );
    });

    fx25Titles.forEach((title) => {
      gsap.fromTo(
        title.querySelectorAll(".magic-character"),
        {
          "will-change": "transform",
          transformOrigin: "50% 100%",
          scaleY: 0,
        },
        {
          ease: "power3.in",
          opacity: 1,
          scaleY: 1,
          stagger: 0.05,
          scrollTrigger: {
            trigger: title,
            start: "center center",
            end: "+=500%",
            scrub: true,
            pin: title.parentNode,
          },
        }
      );
    });

    fx26Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: title,
          start: "center center",
          end: "+=100%",
          scrub: true,
          pin: title.parentNode,
        },
      });
      for (const [wordPosition, word] of words.entries()) {
        tl.fromTo(
          word.querySelectorAll(".magic-character"),
          {
            "will-change": "transform",
            transformOrigin: () => (!wordPosition % 2 ? "50% 0%" : "50% 100%"),
            scaleY: 0,
          },
          {
            ease: "power1.inOut",
            scaleY: 1,
            stagger: {
              amount: 0.3,
              from: "center",
            },
          },
          0
        );
      }
    });

    fx27Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];

      words.forEach((word) => gsap.set(word.parentNode, { perspective: 1000 }));

      gsap.fromTo(
        words,
        {
          "will-change": "opacity, transform",
          z: () => gsap.utils.random(500, 950),
          opacity: 0,
          xPercent: (pos) => gsap.utils.random(-100, 100),
          yPercent: (pos) => gsap.utils.random(-10, 10),
          rotationX: () => gsap.utils.random(-90, 90),
        },
        {
          ease: "expo",
          opacity: 1,
          rotationX: 0,
          rotationY: 0,
          xPercent: 0,
          yPercent: 0,
          z: 0,
          scrollTrigger: {
            trigger: title,
            start: "center center",
            end: "+=300%",
            scrub: true,
            pin: title.parentNode,
          },
          stagger: {
            each: 0.006,
            from: "random",
          },
        }
      );
    });

    fx28Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];

      for (const word of words) {
        const chars = word.querySelectorAll(".magic-character");
        const charsTotal = chars.length;

        gsap.fromTo(
          chars,
          {
            "will-change": "transform, filter",
            transformOrigin: "50% 100%",
            scale: (position) => {
              const factor =
                position < Math.ceil(charsTotal / 2)
                  ? position
                  : Math.ceil(charsTotal / 2) -
                    Math.abs(Math.floor(charsTotal / 2) - position) -
                    1;
              return gsap.utils.mapRange(
                0,
                Math.ceil(charsTotal / 2),
                0.5,
                2.1,
                factor
              );
            },
            y: (position) => {
              const factor =
                position < Math.ceil(charsTotal / 2)
                  ? position
                  : Math.ceil(charsTotal / 2) -
                    Math.abs(Math.floor(charsTotal / 2) - position) -
                    1;
              return gsap.utils.mapRange(
                0,
                Math.ceil(charsTotal / 2),
                0,
                60,
                factor
              );
            },
            rotation: (position) => {
              const factor =
                position < Math.ceil(charsTotal / 2)
                  ? position
                  : Math.ceil(charsTotal / 2) -
                    Math.abs(Math.floor(charsTotal / 2) - position) -
                    1;
              return position < charsTotal / 2
                ? gsap.utils.mapRange(
                    0,
                    Math.ceil(charsTotal / 2),
                    -4,
                    0,
                    factor
                  )
                : gsap.utils.mapRange(
                    0,
                    Math.ceil(charsTotal / 2),
                    0,
                    4,
                    factor
                  );
            },
            filter: "blur(12px) opacity(0)",
          },
          {
            ease: "power2.inOut",
            y: 0,
            rotation: 0,
            scale: 1,
            filter: "blur(0px) opacity(1)",
            scrollTrigger: {
              trigger: word,
              start: "top bottom+=40%",
              end: "top top+=15%",
              scrub: true,
            },
            stagger: {
              amount: 0.15,
              from: "center",
            },
          }
        );
      }
    });

    fx29Titles.forEach((title) => {
      const words = [...title.querySelectorAll(".magic-word")];

      for (const [pos, word] of words.entries()) {
        const chars = word.querySelectorAll(".magic-character");

        gsap.fromTo(
          chars,
          {
            "will-change": "transform",
            transformOrigin: `${pos % 2 ? 0 : 100}% ${pos % 2 ? 100 : 0}%`,
            scale: 0,
          },
          {
            ease: "power4",
            scale: 1,
            stagger: {
              each: 0.03,
              from: pos % 2 ? "end" : "start",
            },
            scrollTrigger: {
              trigger: word,
              start: "top bottom-=10%",
              end: "top top",
              scrub: true,
            },
          }
        );
      }
    });
  }, 100);
  // };

  const init_particles_small = (particle_number, canvas_wrapper_id) => {
    particlesJS(
      // this is the ID your particles container needs to have
      canvas_wrapper_id,
      {
        particles: {
          number: {
            value: particle_number,
            density: {
              enable: true,
              value_area: 800,
            },
          },
          color: {
            value: "#caff00",
          },
          shape: {
            type: "image",
            stroke: {
              width: 0,
              color: "#000000",
            },
            polygon: {
              nb_sides: 5,
            },
            image: {
              src: "https://uploads-ssl.webflow.com/62bde5720d5cbfc1dd34dae0/63dc1f186796f746f5f03719_star-white.png",
              width: 100,
              height: 100,
            },
          },
          opacity: {
            value: 0.25,
            random: false,
            anim: {
              enable: false,
              speed: 1,
              opacity_min: 0.1,
              sync: false,
            },
          },
          size: {
            value: 9,
            random: true,
            anim: {
              enable: false,
              speed: 40,
              size_min: 0.1,
              sync: false,
            },
          },
          line_linked: {
            enable: false,
            distance: 150,
            color: "#ffffff",
            opacity: 0.4,
            width: 1,
          },
          move: {
            enable: true,
            speed: 5.5,
            direction: "top",
            random: true,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: {
              enable: false,
              rotateX: 600,
              rotateY: 1200,
            },
          },
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: {
              enable: false,
              mode: "repulse",
            },
            onclick: {
              enable: false,
              mode: "push",
            },
            resize: true,
          },
          modes: {
            grab: {
              distance: 400,
              line_linked: {
                opacity: 1,
              },
            },
            bubble: {
              distance: 400,
              size: 40,
              duration: 2,
              opacity: 8,
              speed: 3,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
            push: {
              particles_nb: 4,
            },
            remove: {
              particles_nb: 2,
            },
          },
        },
        retina_detect: true,
      }
    );
  };

  $(".hero-main-reel-btn").hover(function () {
    if ($(this).find("canvas").length === 0) {
      init_particles_small(90, "particle-screen-home-hero-btn-version");
    }

    $(this).find(".particle-section-fixed-small").toggleClass("is-visible");
  });
  $("#nav-cta-btn").hover(function () {
    if ($(this).find("canvas").length === 0) {
      init_particles_small(90, "particle-screen-nav-cta-version");
    }
    $(this).find(".particle-section-fixed-small").toggleClass("is-visible");
  });

  function g_play_video(video_src, video_screen_ele) {
    const iframe_component = video_screen_ele.find("iframe");

    if (video_src.includes("iframe")) {
      video_src = $(`${video_src}`).attr("src");
      console.log("Iframe case");
    }
    if (!video_src) {
      video_src =
        "https://www.youtube.com/embed/E4RXZIps4cc?si=gXSjgSuD298pfyHv";
      console.log("no video_src found");
    }

    console.log(video_src);

    iframe_component.attr("src", video_src);
    //Youtube
    if (video_src.includes("youtube")) {
      console.log("youtube case");
      video_screen_ele.find("[v_platform='vimeo']").hide();
      video_screen_ele.find("[v_platform='youtube']").show();
    }
    //Vimeo
    if (video_src.includes("vimeo")) {
      console.log("vimeo case");
      video_screen_ele.find("[v_platform='youtube']").hide();
      video_screen_ele.find("[v_platform='vimeo']").show();
      setTimeout(() => {
        const script = document.createElement("script");
        script.src = "https://player.vimeo.com/api/player.js";
        script.async = true; // Optional: Load the script asynchronously
        document.head.appendChild(script); // Append the script to the document
      }, 10); // 3
    }
  }

  function g_stop_video() {
    const iframe_component = $("iframe[v_platform]");
    iframe_component.attr("src", "");
  }

  const video_screen = $(".video_screen");

  function openVideoScreenSrc(src) {
    // console.log("clicking");
    g_play_video(src, video_screen);
    //   video_screen.addClass("is_active");

    gsap.set("body", {
      overflow: "hidden",
    });
    gsap.set(".video_screen .video_iframe", {
      opacity: "0",
    });

    gsap
      .timeline()
      .to(".video_screen", {
        opacity: 1,
        pointerEvents: "auto",
      })
      .from(".grid-system_line.is-vertical, .animated_line.is-vertical", {
        height: "0%",
        stagger: {
          from: "random",
          amount: 1,
        },
      })
      .from(
        ".grid-system_line.is-horizontal, .animated_line.is-horizontal",
        {
          width: "0%",
          stagger: {
            from: "random",
            amount: 1,
          },
        },
        "<"
      )
      .to(
        ".video_screen .video_iframe",
        {
          opacity: "1",
          delay: 0.75,
        },
        "<"
      )
      .fromTo(
        ".video_screen .video_screen_close_btn",
        {
          opacity: 0,
        },
        {
          opacity: 1,
        }
      );

    // lenis.stop();
  }
  function closeVideoScreenSrc() {
    const iframe_component = video_screen.find("iframe");
    //Youtube
    //   video_screen.removeClass("is_active");
    gsap.to(".video_screen", {
      opacity: 0,
      pointerEvents: "none",
    });
    iframe_component.attr("src", "");
    gsap.set("body", {
      overflow: "auto",
    });
    // lenis.start();
  }

  function video_section() {
    $(".video_screen:not(#main_ele)");
    $(".page-wrapper").prepend($(".video_screen#main_ele"));

    $("[video_section]").each(function (index) {
      const video_section = $(this);

      const open_btns = video_section.find("[video_play_btn='true']");

      open_btns.removeAttr("href");

      const video_screen_close_btn = video_screen.find(
        ".video_screen_close_btn, .video_screen_bg"
      );

      gsap.set(video_section, {
        zIndex: 5,
      });

      open_btns.on("click", function (event) {
        const iframe_src = $(this).attr("video_src");
        // console.log("clicked");
        console.log("iframe_src", iframe_src);
        // event.preventDefault();
        openVideoScreenSrc(iframe_src);
      });
      video_screen_close_btn.on("click", function () {
        closeVideoScreenSrc();
      });
    });
  }

  video_section();
});