// STATIC ANIMATIONS
// const homeAnimations = function() {
gsap.registerPlugin(ScrollTrigger);

let mm = gsap.matchMedia();

mm.add("(min-width: 991px)", () => {
  //~ Intro Scene

  const sceneIntro = gsap
    .timeline()

    .set("body", { overflow: "hidden", duration: 0.01 })
    .to(".hero-logo", { opacity: 0, scale: 0.8, delay: 0.5, duration: 1.2 })
    .to(
      ".tree-wrap.is--1",
      {
        opacity: 0.8,
        x: "15em",
        y: "15em",
        scale: 0.4,
        rotationZ: 0,
        duration: 1.5,
        ease: "power2.inOut",
      },
      "<+0.5"
    )
    .to(
      ".tree-wrap.is--2",
      {
        opacity: 0.6,
        x: "-10em",
        y: "13em",
        scale: 0.7,
        rotationZ: -1,
        duration: 1.2,
        ease: "power2.inOut",
      },
      "<"
    )
    .to(
      ".tree-wrap.is--3",
      {
        opacity: 0.6,
        x: "-12em",
        y: "15em",
        scale: 0.7,
        rotationZ: 3,
        duration: 1.2,
        ease: "power2.inOut",
      },
      "<"
    )
    .to(
      ".scene_background-wrap",
      { opacity: 1, filter: "blur(0px)", ease: "power3.inOut", duration: 1.2 },
      "<"
    )
    .fromTo(
      ".scene_right",
      { opacity: 0.0, y: "10em", filter: "blur(5px)" },
      {
        autoAlpha: 1,
        opacity: 1,
        y: "0em",
        ease: "power3.Out",
        filter: "blur(0px)",
        duration: 1.2,
      },
      "<+0.5"
    )
    .fromTo(
      ".scene_left",
      { opacity: 0.0, y: "10em", filter: "blur(5px)" },
      {
        autoAlpha: 1,
        opacity: 1,
        y: "0em",
        ease: "power3.Out",
        filter: "blur(0px)",
        duration: 1.2,
      },
      "<"
    )
    .fromTo(
      ".scene_middle",
      { opacity: 0.0, y: "10em", filter: "blur(5px)" },
      {
        autoAlpha: 1,
        opacity: 1,
        y: "0em",
        ease: "power3.Out",
        filter: "blur(0px)",
        duration: 1.2,
      },
      "<"
    )

    .fromTo(
      ".navigation",
      { opacity: 0, y: "-100%", marginBottom: "-5em" },
      {
        opacity: 1,
        y: "0%",
        marginBottom: "0em",
        duration: 2,
        ease: "power3.inOut",
      },
      "<"
    )

    .fromTo(
      ".scene_tent",
      { opacity: 0.0, y: "10em", filter: "blur(5px)" },
      {
        autoAlpha: 1,
        opacity: 1,
        y: "0em",
        ease: "power3.Out",
        filter: "blur(0px)",
        duration: 1.2,
      },
      "<"
    )
    .to("body", { overflow: "auto", duration: 0.01 }, "<");
  ScrollTrigger.create({
    animation: sceneIntro,
    trigger: ".section-hero",
    start: "-10% top",
    end: "20% top",
    immediateRender: false,
    toggleActions: "play complete none none",
  });

  /// Scrolling Animtions

  // set defaults
  gsap.set(".section-scene", { zIndex: 1 });
  gsap.set(".section-about", { opacity: 0, zIndex: 0 });
  gsap.set(".section-home-collections", { opacity: 0 });
  gsap.set(".section-about", { pointerEvents: "none" });

  /// 1

  /// scene dissapears
  const sceneDissapear = gsap
    .timeline()
    .to(".scene_middle", { y: "-4em", opacity: 0, duration: 1 })
    .to(".scene_left", { x: "-18em", opacity: 0, scale: 1.2, duration: 2 }, "<")
    .to(
      ".scene_right",
      { x: "18em", opacity: 0, scale: 1.2, duration: 2 },
      "<"
    );

  /// trees dissapear
  const trees = gsap
    .timeline()
    .to(".hero-trees", { opacity: 0, scale: 1.5, duration: 1 });

  /// tent zooms in
  const tent = gsap
    .timeline()
    .to(".scene_tent", { scale: 6, duration: 1.5, y: "-18em", x: "-5em" })
    .to(".section-hero", { backgroundColor: "#0C192B" }, "<")
    .to(".scene_background-wrap", { opacity: 0, scale: 1.2 }, "<")
    .to(".scene_tent", { opacity: 0 }, "<+1")
    .to(".tree-to-space", { opacity: 0 }, "1");

  /// 2

  /// space transition
  const spaceTransition = gsap
    .timeline()
    .to(".section-scene", { zIndex: 0 })
    .to(".tree-to-space", { opacity: 0 }, "<")
    .to(".section-about", { opacity: 1, autoAlpha: 1, zIndex: 1 }, "<");

  const spaceIntro = gsap
    .timeline()
    .to(".planet-fireball", { opacity: 0.8 })
    .to(
      ".planet-fireball",
      { y: "100em", x: "-180em", scale: 2, ease: "none" },
      "<"
    );

  const spaceAnimation = gsap
    .timeline()
    .from(
      ".planet_our-team",
      {
        x: "80%",
        y: "-30%",
        opacity: 0,
        filter: "blur(5px)",
        duration: 1,
        ease: "power4.inOut",
      },
      "<"
    )
    .from(
      ".planet_process",
      {
        x: "80%",
        y: "-30%",
        opacity: 0,
        filter: "blur(5px)",
        duration: 1,
        ease: "power4.inOut",
      },
      "<+0.3"
    )
    .from(
      ".planet_reviews",
      {
        x: "80%",
        y: "-30%",
        opacity: 0,
        filter: "blur(5px)",
        duration: 1,
        ease: "power4.inOut",
      },
      "<+0.3"
    )
    .fromTo(
      ".about-space_left",
      { y: "20%", opacity: 0, filter: "blur(5px)" },
      {
        y: "0%",
        opacity: 1,
        filter: "blur(0px)",
        autoAlpha: 1,
        duration: 1,
        ease: "power4.inOut",
      },
      "<+0.5"
    )
    .to(".section-about", { pointerEvents: "auto" }, "<");

  // Space Rock Moving

  const spaceRock = gsap.timeline().to(".space-rock", {
    x: "60em",
    y: "-40em",
    scale: 0.9,
    ease: "none",
    duration: 0.5,
  });

  const planetVenus = gsap.timeline().to(".planet-venus", {
    x: "-40em",
    y: "40em",
    scale: 1.3,
    ease: "none",
    duration: 0.5,
  });

  // 3

  // Space Outro

  const spaceOutro = gsap
    .timeline()
    .to(".section-about", { opacity: 0, filter: "blur(5px)", zIndex: 0 })
    .to(".section-home-collections", { opacity: 1, autoAlpha: 1, zIndex: 1 });

  /// Collections

  const collections = gsap
    .timeline()
    .from(".home-collections-middle", {
      opacity: 0,
      y: "3em",
      ease: "power2.out",
    })
    .from(
      ".home-collection-block",
      {
        opacity: 0.0,
        y: "3em",
        stagger: 0.2,
        duration: 0.5,
        ease: "power2.out",
      },
      "<+0.5"
    );

  /// Timelines

  ScrollTrigger.create({
    animation: trees,
    trigger: ".section-hero",
    start: "22% top",
    end: "25% top",
    scrub: 1.5,
    immediateRender: false,
  });

  ScrollTrigger.create({
    animation: sceneDissapear,
    trigger: ".section-hero",
    start: "22% top",
    end: "33% top",
    scrub: 1.5,
    immediateRender: false,
    /// onEnter, onLeave, onEnterBack, onLeaveBack
    // toggleActions: "play complete none none",
    /// Options: play, pause, resume, reset, restart, complete, reverse, none
  });

  ScrollTrigger.create({
    animation: tent,
    trigger: ".section-hero",
    start: "30% top",
    end: "40% top",
    scrub: 1.5,
    immediateRender: false,
    // toggleActions: "play complete none none"
  });

  ScrollTrigger.create({
    animation: spaceTransition,
    trigger: ".section-hero",
    start: "40.5% top",
    end: "42% top",
    immediateRender: false,
    scrub: 1.3,
    // toggleActions: "play reverse play reverse",
    // markers: true
  });

  ScrollTrigger.create({
    animation: spaceIntro,
    trigger: ".section-hero",
    start: "42% top",
    end: "50% top",
    immediateRender: false,
    scrub: 1.3,
    // toggleActions: "play reverse play reverse",
    // markers: true
  });

  ScrollTrigger.create({
    animation: spaceAnimation,
    trigger: ".section-hero",
    start: "43% top",
    end: "50% top",
    immediateRender: false,
    scrub: 1.3,
    // toggleActions: "play reverse play reverse",
    // markers: true
  });

  ScrollTrigger.create({
    animation: spaceRock,
    trigger: ".section-hero",
    start: "48% top",
    end: "72% top",
    scrub: 1.8,
    immediateRender: false,
  });

  ScrollTrigger.create({
    animation: planetVenus,
    trigger: ".section-hero",
    start: "52% top",
    end: "72% top",
    scrub: 1.8,
    immediateRender: false,
  });

  ScrollTrigger.create({
    animation: spaceOutro,
    trigger: ".section-hero",
    start: "70% top",
    end: "72% top",
    immediateRender: false,
    scrub: 1,
    // toggleActions: "play reverse play none"
  });

  ScrollTrigger.create({
    animation: collections,
    trigger: ".section-hero",
    start: "72% top",
    end: "73% top",
    scrub: 1.5,
    /// onEnter, onLeave, onEnterBack, onLeaveBack
    // toggleActions: "play reverse reverse reverse"
  });

  //   ScrollLottie({
  //     target: '.tent-lottie',
  //     trigger: ".section-hero",
  //     path: 'https://uploads-ssl.webflow.com/623eeed217c4f432cc8ebfeb/6295fb360ab4ea6e8fd7cd7b_lf20_ebhpxuvh.json',
  //     speed: 'medium',
  //     scrub: 1.5,
  //     start: "30% top"
  //    })

  LottieScrollTrigger({
    target: ".tent-lottie",
    trigger: ".section-hero",
    path: "https://uploads-ssl.webflow.com/623eeed217c4f432cc8ebfeb/6295fb360ab4ea6e8fd7cd7b_lf20_ebhpxuvh.json",
    speed: "medium",
    pin: false,
    // markers: true,
    start: "30% top",
    end: "45% top",
    scrub: 1.5, // seconds it takes for the playhead to "catch up"
    // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger
  });

  function LottieScrollTrigger(vars) {
    let playhead = { frame: 0 },
      target = gsap.utils.toArray(vars.target)[0],
      speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
      st = {
        trigger: target,
        pin: true,
        start: "top top",
        end: speeds[vars.speed] || "+=1000",
        scrub: 1,
      },
      animation = lottie.loadAnimation({
        container: target,
        renderer: vars.renderer || "svg",
        loop: false,
        autoplay: false,
        path: vars.path,
      });
    for (let p in vars) {
      // let users override the ScrollTrigger defaults
      st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function () {
      gsap.to(playhead, {
        frame: animation.totalFrames - 1,
        ease: "none",
        onUpdate: () => animation.goToAndStop(playhead.frame, true),
        scrollTrigger: st,
      });
      // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
      ScrollTrigger.sort();
      ScrollTrigger.refresh();
    });
    return animation;
  }

  if (window.innerWidth > 991) {
    if (sessionStorage.getItem("visited") == null) {
      sceneIntro.play();
    } else {
      sceneIntro.progress(1);
      gsap.to(".navigation", { opacity: 1 });
      gsap.set(".hero-logo", { opacity: 0 });
      gsap.fromTo(
        ".scene_tent",
        { opacity: 0, y: "2em" },
        { opacity: 1, y: "0em", duration: 1.5, ease: "power2.inOut" }
      );
      gsap.fromTo(
        ".main-wrapper",
        { opacity: 0, marginTop: "2em" },
        { opacity: 1, marginTop: "0em", duration: 0.5, ease: "power2.inOut" }
      );
    }

    sessionStorage.setItem("visited", "true");
  }
});

const planetImg = $(".planet_reviews_wrap").find(".planet-img");

mm.add("(max-width: 991px)", () => {
  /* MOBILE ANIMATIONS */
  // Space

  const spaceMobile = gsap
    .timeline({ ease: "power3.out" })

    .from(".planet_reviews", { bottom: "-8em", scale: 0.75, duration: 1 })
    .to(planetImg, { opacity: 0 });

  ScrollTrigger.create({
    trigger: ".section-about",
    start: "-20% 20%",
    end: "95% bottom",
    animation: spaceMobile,
    scrub: 1.1,
    // markers: true
  });

  // Planet Animations

  gsap.to(".planet-venus", {
    yoyo: true,
    repeat: -1,
    ease: "power1.inOut",
    marginBottom: "-4.65em",
    duration: 5,
  });

  const rock = gsap.fromTo(
    ".space-rock",
    { marginBottom: "-5.45em" },
    {
      yoyo: true,
      repeat: -1,
      ease: "power1.inOut",
      marginBottom: "-1.23em",
      duration: 4.5,
    }
  );

  rock.repeat(-1).yoyo(true);

  gsap.to(".planet_process", {
    yoyo: true,
    repeat: -1,
    ease: "power1.inOut",
    marginBottom: "-3em",
    duration: 6,
  });

  // ScrollTrigger.create({
  //   trigger: ".section-about",
  //   start: "top top",
  //   animation: planetMove
  // });

  // Night sky

  const nightSky = gsap.timeline().from(".home-collection-block", {
    opacity: 0,
    y: "2em",
    stagger: 0.2,
    duration: 0.5,
    ease: "power3.out",
  });

  ScrollTrigger.create({
    trigger: ".home-collections-top",
    start: "top 80%",
    animation: nightSky,
  });
});

//~ Scrolling Animations

// SCROLL ANIMATIONS

// installMediaQueryWatcher("(min-width: 991px)", (matches) => {

// if (matches) {

// };

// homeAnimations();
// window.addEventListener("resize", homeAnimations);

// function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) {
//   var mql = window.matchMedia(mediaQuery);
//   mql.addEventListener("change", function (e) {
//     return layoutChangedCallback(e.matches);});
//   layoutChangedCallback(mql.matches);
// }

/// Animating Circles

const circles = gsap.timeline().from(".plus-outer", {
  scale: 0.8,
  opacity: 0.6,
  duration: 1.3,
  repeat: -1,
  yoyo: true,
  ease: "power2.inOut",
});

// Cloud Animation

var tl = gsap.timeline({ ease: "sine.out", repeat: -1, yoyo: true });

tl.to(".product-cloud-img", {
  duration: 2.5,
  ease: "power2.out",
  y: "-3em",
  opacity: 0.8,
});

var tlNewsletter = gsap.timeline({ ease: "sine.out", repeat: -1, yoyo: true });

tlNewsletter.to(".product-cloud-img.newsletter-img", {
  duration: 4,
  ease: "power2.out",
  y: "-2em",
  opacity: 0.7,
});

tlNewsletter.to(".product-cloud-img.newsletter-img.is--2", {
  duration: 2.5,
  ease: "power2.out",
  y: "-1em",
  opacity: 0.7,
});

const cloudA = gsap.fromTo(
  "[gsap=cloud]",
  { y: "-1em", opacity: 0.3, scale: 0.8 },
  { y: "1em", opacity: 0.6, scale: 0.8, duration: 3, ease: "power1.inOut" }
);

const cloudB = gsap.fromTo(
  "[gsap=cloud-2]",
  { y: "-1em", opacity: 0.3, scale: 0.8 },
  { y: "1em", opacity: 0.6, scale: 0.8, duration: 5, ease: "power1.inOut" }
);

cloudA.repeat(-1).yoyo(true);
cloudB.repeat(-1).yoyo(true);