// gsap.registerPlugin(ScrollTrigger, SplitText);
// function smoothElements() {
//   gsap.set(["div", "img"], {force3D: true, backfaceVisibility: "hidden", rotationZ: "0.01deg", z:0.01});
// }

// Prepare

gsap.set(".section7", { marginTop:"5500px"});
gsap.set(".quotes div", { position:"absolute"});

// Transition

function hideTrans(){
  gsap.set(".transition", {display:"none"});
}

$(document).ready(function () {
  $(".trans-btn").on("click", function (e) {
    e.preventDefault();
    let destination = $(this).attr("href");
      gsap.set(".transition", {display:"grid"});
      gsap.fromTo(".trans1", 1, {opacity:0.6, height:"0vh"}, {opacity:1, height:"50vh", ease:Power3.easeOut});
      gsap.fromTo(".trans2", 1, {opacity:0.3, marginTop:"100vh", height:"0vh"}, {opacity:1, marginTop:"0vh", height:"50vh", ease:Power3.easeOut});
      gsap.fromTo(".trans3", 1, {opacity:0.3, height:"0vh"}, {opacity:1, height:"50vh", ease:Power3.easeOut});
      gsap.fromTo(".trans4", 1, {opacity:0.6, marginTop:"100vh", height:"0vh"}, {opacity:1, marginTop:"0vh", height:"50vh", ease:Power3.easeOut});
      gsap.fromTo(".trans-content", .7, {opacity:0}, {delay:.9, opacity:1, ease:Linear.easeOut,
        onComplete: () => {window.location = destination}
    });
  });

  $(".nav-button").on("click", function () {
    gsap.set(".menu",             {marginLeft:"-100vw"});
    gsap.set(".menu-wrapper",     {backgroundColor:"rgba(0, 0, 0, 0)", display:"block", opacity:1});
    gsap.to(".menu-wrapper", .7,  {backgroundColor:"rgba(0, 0, 0, 0.7)", ease:Linear.easeOut});
    gsap.to(".menu", 1,           {delay:0.2, marginLeft:"0vw", ease:Expo.easeOut});
  });

  $(".close-menu").on("click", function () {
    gsap.to(".menu-wrapper", .7,  {backgroundColor:"rgba(0, 0, 0, 0)", ease:Linear.easeOut});
    gsap.to(".menu", .7,          {marginLeft:"-100vw", ease:Expo.easeIn});
    gsap.set(".menu-wrapper",     {delay:.7, display:"none", opacity:1, });
  });
});


// ********  REOCCURING SECTIONS  **********


// SECTION 6

ScrollTrigger.create({
  trigger: ".section6",
  start: "top top", 
  end: "1200% top",
  pin: true,
  anticipatePin: 1,
  pinSpacing: false
});


// Quote ASML
gsap.fromTo(".quote-asml", {marginLeft:"0px", opacity:1}, {marginLeft:"100px", opacity:0, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "400% bottom",
  end: "600% bottom",
  scrub: true
}});

gsap.fromTo(".quote-asml", {marginLeft:"-100px", opacity:0}, {marginLeft:"0px", opacity:1, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "200% bottom",
  end: "400% bottom",
  scrub: true
}});

gsap.fromTo(".asml-logo", {backgroundColor:"#10069F"}, {backgroundColor:"#d2b48c", ease:Sine.easeIn, scrollTrigger: {
  trigger: ".case-cta",
  start: "400% bottom",
  end: "600% bottom",
  scrub: true
}});

gsap.fromTo(".asml-logo", {backgroundColor:"#d2b48c"}, {backgroundColor:"#10069F", ease:Sine.easeOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "200% bottom",
  end: "400% bottom",
  scrub: true
}});


// Quote Ahold
gsap.fromTo(".quote-ahold", {marginLeft:"0px", opacity:1}, {marginLeft:"100px", opacity:0, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "800% bottom",
  end: "1000% bottom",
  scrub: true
}});

gsap.fromTo(".quote-ahold", {marginLeft:"-100px", opacity:0}, {marginLeft:"0px", opacity:1, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "600% bottom",
  end: "800% bottom",
  scrub: true
}});

gsap.fromTo(".ahold-logo", {backgroundColor:"#00812E"}, {backgroundColor:"#d2b48c", ease:Sine.easeIn, scrollTrigger: {
  trigger: ".case-cta",
  start: "800% bottom",
  end: "1000% bottom",
  scrub: true
}});

gsap.fromTo(".ahold-logo", {backgroundColor:"#d2b48c"}, {backgroundColor:"#00812E", ease:Sine.easeOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "600% bottom",
  end: "800% bottom",
  scrub: true
}});


// Quote CocaCola
gsap.fromTo(".quote-cc", {marginLeft:"0px", opacity:1}, {marginLeft:"100px", opacity:0, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "1200% bottom",
  end: "1400% bottom",
  scrub: true
}});

gsap.fromTo(".quote-cc", {marginLeft:"-100px", opacity:0}, {marginLeft:"0px", opacity:1, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "1000% bottom",
  end: "1200% bottom",
  scrub: true
}});

gsap.fromTo(".cocacola-logo", {backgroundColor:"#EB0A1E"}, {backgroundColor:"#d2b48c", ease:Sine.easeIn, scrollTrigger: {
  trigger: ".case-cta",
  start: "1200% bottom",
  end: "1400% bottom",
  scrub: true
}});

gsap.fromTo(".cocacola-logo", {backgroundColor:"#d2b48c"}, {backgroundColor:"#EB0A1E", ease:Sine.easeOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "1000% bottom",
  end: "1200% bottom",
  scrub: true
}});




// Quote Four


/*gsap.fromTo(".quote-asics", {marginLeft:"0px", opacity:1}, {marginLeft:"100px", opacity:0, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "1600% bottom",
  end: "1800% bottom",
  scrub: true
}});
*/
gsap.fromTo(".quote-asics", {marginLeft:"-100px", opacity:0}, {marginLeft:"0px", opacity:1, ease:Sine.easeInOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "1400% bottom",
  end: "1600% bottom",
  scrub: true
}});

/*gsap.fromTo(".asics-logo", {backgroundColor:"#EB0A1E"}, {backgroundColor:"#d2b48c", ease:Sine.easeIn, scrollTrigger: {
  trigger: ".case-cta",
  start: "1600% bottom",
  end: "1800% bottom",
  scrub: true
}});
*/
gsap.fromTo(".asics-logo", {backgroundColor:"#d2b48c"}, {backgroundColor:"#001E62", ease:Sine.easeOut, scrollTrigger: {
  trigger: ".case-cta",
  start: "1400% bottom",
  end: "1600% bottom",
  scrub: true
}});