$(document).ready(function () {
  /**
   * Service pages
   */
  if ($(".service-card-item").length > 0) {
    if (isDesktop) {
      $(".service-card-item").hover(
        function () {
          gsap.from($(this).find(".service-card-icon"), {
            scale: 0,
            opacity: 0,
            rotationY: 90,
            rotationZ: 360,
          });
          gsap.to(
            $(this),
            { backgroundColor: "#222", color: "#ffcd00", duration: 0.4 },
            "<"
          );
        },
        function () {
          gsap.to(
            $(this),
            { backgroundColor: "#ffcd00", color: "#222", duration: 0.4 },
            "<"
          );
        }
      );
    }
  }

  /**
   * Our approach service puzzle
   */
  if ($(".puzzle-container").length > 0) {
    gsap.set(".puzzle-diagram", { scale: 0, rotationZ: 360 });
    gsap.to(".puzzle-diagram-logo", { scale: 0 });
    const puzzleTl = gsap.timeline({
      scrollTrigger: {
        trigger: ".our-approach",
        pin: false,
        start: "top 80%",
        end: "top top",
        scrub: 1,
        anticipatedpin: 1,
        toggleActions: "play pause resume reset",
        onEnter: () => {
          gsap.to(
            ".puzzle-diagram",
            {
              rotationZ: 0,
              scale: 1,
              duration: 0.9,
              ease: "power2.out",
            },
            "<"
          );
          gsap.to(
            ".puzzle-diagram-logo",
            {
              scale: 1,
              duration: 0.5,
              ease: "power2.out",
            },
            ">=-0.2"
          );
        },
      },
    });
  }
});

/**
 * logo colour change.
 */
if ($(".dark-section").length > 0) {
  if ($(".service-hero").length > 0) {
    logoLight();
  }
  const darkSectionTl = gsap.timeline({
    scrollTrigger: {
      trigger: ".dark-section, .service-hero",
      pin: false,
      start: "top top",
      end: "bottom top",
      scrub: 1,
      anticipatepin: 1,
      onEnter: logoLight,
      onLeave: logoDark,
      onEnterBack: logoLight,
      onLeaveBack: logoLight,
    },
  });
}