gsap.matchMedia().add("(min-width: 480px)", () => {
  gsap.to(".main_clip-wrap", {
    scale: 5,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: ".section_main",
      start: "top top",
      end: "+=500vh",
      scrub: true,
      pin: true,
    },
  });

  let imgAnim = gsap.timeline({
    scrollTrigger: {
      trigger: ".main-wrapper",
      start: "top top",
      end: "+=200%",
      scrub: true,
    },
  });

  imgAnim
    .to(".main_cr-1", { x: "-100vw", ease: "easeInOut" }, 0)
    .to(".main_cr-2", { x: "100vw", ease: "easeInOut" }, 0)
    .to(
      ".main_img-item",
      {
        scale: 1.1,
      },
      "<80%"
    );
});

gsap.matchMedia().add("(max-width: 479px)", () => {
  gsap.to(".main_clip-wrap", {
    scale: 5,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: ".section_main",
      start: "top top",
      end: "+=500vh",
      scrub: true,
      pin: true,
    },
  });

  let imgAnim = gsap.timeline({
    scrollTrigger: {
      trigger: ".main-wrapper",
      start: "top top",
      end: "+=200%",
      scrub: true,
    },
  });

  imgAnim
    .to(".main_cr-1", { x: "-100vw", ease: "easeInOut" }, 0)
    .to(".main_cr-2", { x: "100vw", ease: "easeInOut" }, 0);
});

// Initialize your elements
const progressBar1 = document.querySelectorAll(".progress-bar")[0];
const progressBar2 = document.querySelectorAll(".progress-bar")[1];
const is1 = document.querySelector(".unlock_txt-wrap_one.is-1");
const is2 = document.querySelector(".unlock_txt-wrap_one.is-2");

// Clear any previous inline styles
gsap.set([is1, is2, progressBar1, progressBar2], { clearProps: "all" });

// Define the animation timeline with labels
const tl = gsap.timeline({ repeat: -1, repeatDelay: 0 });

tl.set([is1, is2], { autoAlpha: 0 }) // Initially hide both cards
  .add("start") // Label for the start of the first card
  .set(is1, { autoAlpha: 1 }) // Show first card
  .to(progressBar1, { width: "100%", duration: 8 })
  .add("afterCard1") // Label after the first card's progress
  .to(progressBar1, { xPercent: 100, duration: 0.3, ease: "power2.inOut" })
  .to(is1, { autoAlpha: 0, duration: 0.3 }, "<")
  .add("startCard2") // Label for the start of the second card
  .set(is2, { autoAlpha: 1 }) // Show second card
  .to(progressBar2, { width: "100%", duration: 8 })
  .add("afterCard2") // Label after the second card's progress
  .to(progressBar2, { xPercent: 100, duration: 0.3, ease: "power2.inOut" })
  .to(is2, { autoAlpha: 0, duration: 0.3 })
  .add("loopEnd");

// Get references to the progress bar wrappers
const progressBarWraps = document.querySelectorAll(".progress_bar-wrap");

// Click handler for the first progress bar
progressBarWraps[0].addEventListener("click", function () {
  tl.pause();
  tl.play("start"); // Play from the label 'start'
});

// Click handler for the second progress bar
progressBarWraps[1].addEventListener("click", function () {
  tl.pause();
  tl.play("startCard2"); // Play from the label 'startCard2'
});

gsap.matchMedia().add("(min-width: 480px)", () => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: ".section_cta",
        start: "-50% top",
        end: "top top",
        scrub: true,
        markers: false,
      },
    })
    .from(".cta_clip-wrap", {
      scale: 3,
      duration: 1,
      ease: "none",
    })
    .from(
      ".cta_cr-1",
      {
        x: "-100vw",
        duration: 1,
        ease: "none",
      },
      0
    )
    .from(
      ".cta_cr-2",
      {
        x: "100vw",
        duration: 1,
        ease: "none",
      },
      0
    )
    .to(
      ".main_img-item",
      {
        scale: 1,
      },
      "<"
    );
});