gsap.registerPlugin(ScrollTrigger);

window.onload = function () {
    tl = new gsap.timeline()
        .from(window, {
            duration: .5, scrollTo: ".main-h1 .second",
            onStart: () => { document.documentElement.style.scrollBehavior = "auto"; },
        })

};

window.onload = function () {
  $(".container-waper").fadeOut("slow")
}

const faq = gsap.from(".main-h1 h1", .5,
 { y: 170, 
    ease: "power4.out", 
    delay: .5, 
    opacity: 1, 
     stagger: { amount: 0.4 } 
})

let sections = gsap.utils.toArray(".pay-chart-wrapper");

gsap.utils.toArray('.cursor-anim-wrapper').forEach(image=>{
    gsap.fromTo(image,{
      x:0
    },{
      opacity:1,
      x:-100,
      scrollTrigger:{
        trigger:image,
        start:"",
        end:"",
           scrub:1 ,
        stagger:{
          amount:.4
        }
      }
    })
})

gsap.timeline({
  scrollTrigger:{
    trigger:".main--div",
    start:"-250px top",
    end:"10px top",
    duration:0.2,
  }
})
  .from(".second",{ y : 350 * 1 }) 

gsap.timeline({
      scrollTrigger:{
        trigger:".hoz-scroll-section",
        start:"-300px",
        end:"-150px",
        
      }
})
  .from(".anim-block",{ y : 100 * 1 })   
gsap.timeline({
    scrollTrigger:{
      trigger:"#Ch-1-data-2",
      start:"-450px",

    }
})
  .from("#if",{ y : 200 * 1 })    

  gsap.timeline({
    scrollTrigger:{
      trigger:".quote-bg-pattern",
      start:"-250px",
      end:"-200px",
      duration:0.1,

    }
})
  .from("#quote",{ y : 200 * 1 })  
 
gsap.timeline({
    scrollTrigger:{
      trigger:"#chart-quote",
      start:"-250px",
      end:"-250px",
    }
})
 .from("#quote-text-wrapper",{ y: innerHeight * 1 })


gsap.timeline({
  scrollTrigger:{
    trigger:"#Ch-pay-2",
    start:"-50px",
    end:"-120px",
    
  }
})
.from(".first",{ opacity:0})
gsap.timeline({
  scrollTrigger:{
    trigger:"#Ch-pay-3",
    start:"-10px",
    end:"-90px",
    
  }
})
.from(".secondd",{ opacity:0})
gsap.timeline({
  scrollTrigger:{
    trigger:"#pay-chart-wrapper3",
    start:"-10px",
    end:"-90px",
    
  }
})
.from(".third",{ opacity:0})
gsap.timeline({
  scrollTrigger:{
    trigger:"#Ch-1-data-3",
    start:"-50px",
    end:"-110px",
  }
})
.to("#inner-chart-line",{ height:"46%"})
.to("#inner-chart-line1",{ height:"69%"})
.to("#inner-chart-line2",{ height:"20%"})


gsap.timeline({
  scrollTrigger:{
    trigger:"#Ch-1-data-2",
    start:"top top",
    end:"-20px",
  }
})
// .from(".chart-line-def2",{width: "100%",backgroundColor:"black"})

.to("#chart-line-def",{width: '32%',backgroundColor:"black"})
.to(".big-number-wrapper",{opacity:1})
.to(".triangle1",{marginLeft:"8rem"})
.to(".big-number-wrapper",{opacity:1})
.to("#chart-line-def2",{width: '56%',backgroundColor:"black"})
.to(".triangle2",{marginLeft:"18rem"})
.to("#chart-line-def3",{width: '12%',backgroundColor:"black"})
.to(".big-number-wrapper",{opacity:1})
.to(".triangle3",{marginLeft:"1rem"})

if (window.matchMedia("(min-width: 900px)").matches){
  gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".hoz-mask",
      pin: true,
      scrub: 1,
      snap: 1 / (sections.length - 1),
      // base vertical scrolling on how wide the container is so it feels more natural.
      end: "+=1300",
    }
  });
 
  
    gsap.to("#line",{
      width: '200%', duration:1.5
    })
    gsap.timeline({
      scrollTrigger:{
        trigger:".main-h1",
        start:"-200px",
        end:"-100px",
        duration:0.1,
      }
    })
      .from(".main-h1-1 h1",{ y : innerHeight * 1})

}

if (window.matchMedia("(max-width: 900px)").matches)
{
// The viewport is less than 768 pixels wide

  gsap.timeline({
    scrollTrigger:{
      trigger:".main-h1",
      start:"-200px",
      end:"-100px",
      duration:0.1,
    }
  })
    .from(".main-h1-1 h1",{ y : innerHeight * 1})

  //   gsap.timeline({
  //     scrollTrigger:{
  //       trigger:".main-h1-1",
  //       start:"-250px",
  //       end:"-200px",
  //     }
  // })
  //     .from(".second",{ y : innerHeight * 1 }) 
  gsap.timeline({
    scrollTrigger:{
      trigger:"#Ch-pay-2",
      start:"0",
      end:"10px",
      duration:0.1,
    }
  })
  .from(".first",{ opacity:0}) 

  gsap.timeline({
    scrollTrigger:{
      trigger:"#Ch-1-data-2",
      start:"top",
      end:"-10px",
    }
  })
  // .from(".chart-line-def2",{width: "100%",backgroundColor:"black"})
  
  .to("#chart-line-def",{width: '7rem',backgroundColor:"black"})
  .to(".big-number-wrapper",{opacity:1})
  .to(".triangle1",{marginLeft:"3.5rem"})
  .to(".big-number-wrapper",{opacity:1})
  .to("#chart-line-def2",{width: '13rem',backgroundColor:"black"})
  .to(".triangle2",{marginLeft:"9.5rem"})
  .to("#chart-line-def3",{width: '4rem',backgroundColor:"black"})
  .to(".big-number-wrapper",{opacity:1})
  .to(".triangle3",{marginLeft:"0.5rem"})

  gsap.to("#line",{
    width: '100%', duration:1.5
  }) 
}


if (window.matchMedia("(max-width: 600px)").matches)
{
//   gsap.timeline({
//     scrollTrigger:{
//       trigger:".main-h1-1",
//       start:"-250px",
//       end:"-200px",
//     }
// })
//     .from(".second",{ y : innerHeight * 1 }) 
  gsap.to("#line",{
    width: '100%', duration:1.5
  })
  gsap.timeline({
    scrollTrigger:{
      trigger:"#Ch-1-data-2",
      start:"-10px",
      end:"-5px",
    }
  })
  // .from(".chart-line-def2",{width: "100%",backgroundColor:"black"})
  
  .to("#chart-line-def",{width: '4.5rem',backgroundColor:"black"})
  .to(".big-number-wrapper",{opacity:1})
  .to(".triangle1",{marginLeft:".5rem"})
  .to(".big-number-wrapper",{opacity:1})
  .to("#chart-line-def2",{width: '6.5rem',backgroundColor:"black"})
  .to(".triangle2",{marginLeft:"3rem"})
  .to("#chart-line-def3",{width: '3.5rem',backgroundColor:"black"})
  .to(".big-number-wrapper",{opacity:1})
  .to(".triangle3",{marginLeft:"0.1rem"})

}