var cheatboxes = document.querySelectorAll('.cheatbox');
  var numParticles = 200;

  cheatboxes.forEach(cheatbox => {
    const particleContainer = document.createElement('div');
    particleContainer.classList.add('particle-container');
    cheatbox.appendChild(particleContainer);

    for (let i = 0; i < numParticles; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      particleContainer.appendChild(particle);
    }

    const particles = cheatbox.querySelectorAll('.particle');

    const animateParticle = (particle) => {
      const { width, height } = cheatbox.getBoundingClientRect();
      const centerX = width / 2;
      const centerY = height / 2;
      const maxDistance = Math.min(width, height) * 0.2;

      const angle = Math.PI * 2 * Math.random();
      const x = Math.cos(angle) * maxDistance;
      const y = Math.sin(angle) * maxDistance;

      gsap.set(particle, {
        x: centerX + x,
        y: centerY + y,
        opacity: 0
      });

      const direction = Math.random() < 0.5 ? -1 : 1;
      const duration = gsap.utils.random(0.5, 1.5);

      const particleAnimation = gsap.timeline();

      particleAnimation.to(particle, {
        duration: duration,
        delay: gsap.utils.random(0, 1),
        opacity: 1,
        x: (i) => {
          const angle = Math.PI * 2 * Math.random();
          const radius = Math.max(width, height) / 2;
          const x = Math.cos(angle) * radius;
          return centerX + x;
        },
        y: (i) => {
          const angle = Math.PI * 2 * Math.random();
          const radius = Math.max(width, height) * 0.7;
          const y = Math.sin(angle) * radius;
          return centerY + y * direction;
        },
        ease: 'none',
        onUpdate: () => {
          const { left, top, right, bottom } = cheatbox.getBoundingClientRect();
          const particleRect = particle.getBoundingClientRect();

          if (
            particleRect.left >= left - 10 &&
            particleRect.top >= top - 10 &&
            particleRect.right <= right + 10 &&
            particleRect.bottom <= bottom + 10
          ) {
            gsap.set(particle, { opacity: 0 });
          } else {
            gsap.set(particle, { opacity: 1 });
          }
        }
      });

      particleAnimation.to(particle, {
        duration: duration * 0.2,
        opacity: 0,
        ease: 'none',
        onComplete: function () {
          animateParticle(particle);
        }
      }, `-=${duration * 0.2}`);
    };

    let isHovering = false;

    const startAnimation = () => {
      if (!isHovering) {
        isHovering = true;
        particles.forEach(particle => {
          animateParticle(particle);
        });
      }
    };

    const stopAnimation = () => {
      isHovering = false;
      particles.forEach(particle => {
        gsap.killTweensOf(particle);
        gsap.set(particle, { opacity: 0 });
      });
    };

    cheatbox.addEventListener('mouseenter', startAnimation);
    cheatbox.addEventListener('mouseleave', stopAnimation);
  });

  var isInfoVisible1 = false; // Track the visibility state of the elements
  var tl1; // Declare the timeline variable

  var isInfoVisible2 = false; // Track the visibility state of the elements
  var tl2; // Declare the timeline variable

  var isInfoVisible3 = false; // Track the visibility state of the elements
  var tl3; // Declare the timeline variable

  function infocheatspu1() {
    var cheatboxElement1 = document.querySelector('.cheatbox.green .infocheatsbox');
    var cheatboxText1 = document.querySelector('.cheatbox.green .infocheats');

    if (!tl1) {
      // If the timeline doesn't exist, create a new one
      tl1 = gsap.timeline({
        paused: true, // Start the timeline in a paused state
        onReverseComplete: resetTimeline1 // Add a callback function to reset the timeline when the reverse is complete
      });

      // Set up the animation
      tl1.to(cheatboxElement1, { duration: 0.4, opacity: 1, ease: "power1.inOut"})
        .from(cheatboxElement1, { duration: 1, height: '5.9vh', ease: "power1.inOut"}, "-=0.4") // Set the initial height to '0vh'
        .to(cheatboxText1, { duration: 1, y: "-28vh", ease: "power1.inOut"}, "-=1");
    }

    // Toggle the visibility
    if (!isInfoVisible1) {
      // If elements are hidden, play the timeline
      tl1.play();
    } else {
      // If elements are visible, reverse the timeline
      tl1.reverse();
    }

    // Update the visibility state
    isInfoVisible1 = !isInfoVisible1;
  }

  function resetTimeline1() {
    // Reset the timeline to its initial state
    tl1.progress(0).pause();
  }

  function opencheats1(bypassAnimation = false) {
    var cheatboxOpen1 = document.querySelector('.cheatbox.green .cheatboxThanks');
    var cheatboxShow1 = document.querySelector('.cheatbox.green .cheatboxActive');

    const tl4 = gsap.timeline();

    cheatboxShow1.style.pointerEvents = 'auto';

    if (false) {
      cheatboxShow1.style.opacity = 1;
    } else {
      // Add animations to the timeline
      tl4.to(cheatboxOpen1, { duration: 0.4, opacity: 1, ease: "power1.inOut", })
        .from(cheatboxOpen1, { duration: 1, height: '5.9vh', ease: "sine.inOut", }, 0)
        .to(cheatboxOpen1, { delay: 3, duration: 1, height: '-0%', ease: "sine.inOut", transformOrigin: "bottom", }, 0)
        .to(cheatboxOpen1, { delay: 3.6, duration: 0.4, opacity: 0, ease: "power1.inOut", }, 0)
        .to(cheatboxShow1, { delay: 3, duration: 0.4, opacity: 1, ease: "power1.inOut", }, 0)
    }
  } 
  function opencheats2(bypassAnimation = false) {
    /* opencheats1(bypassAnimation); */

    var cheatboxOpen2 = document.querySelector('.cheatbox.blue .cheatboxThanks');
    var cheatboxShow2 = document.querySelector('.cheatbox.blue .cheatboxActive');

    const tl5 = gsap.timeline();

    cheatboxShow2.style.pointerEvents = 'auto';

    if (false) {
      cheatboxShow2.style.opacity = 1;
    } else {
      // Add animations to the timeline
      tl5.to(cheatboxOpen2, { duration: 0.4, opacity: 1, ease: "power1.inOut", })
        .from(cheatboxOpen2, { duration: 1, height: '5.9vh', ease: "sine.inOut", }, 0)
        .to(cheatboxOpen2, { delay: 3, duration: 1, height: '-0%', ease: "sine.inOut", transformOrigin: "bottom", }, 0)
        .to(cheatboxOpen2, { delay: 3.6, duration: 0.4, opacity: 0, ease: "power1.inOut", }, 0)
        .to(cheatboxShow2, { delay: 3, duration: 0.4, opacity: 1, ease: "power1.inOut", }, 0)
    }
  }

  function opencheats3(bypassAnimation = false) {
    /* opencheats2(bypassAnimation); */

    var cheatboxOpen3 = document.querySelector('.cheatbox.purple .cheatboxThanks');
    var cheatboxShow3 = document.querySelector('.cheatbox.purple .cheatboxActive');

    const tl6 = gsap.timeline();

    cheatboxShow3.style.pointerEvents = 'auto';

    if (false) {
      cheatboxShow3.style.opacity = 1;
    } else {
      // Add animations to the timeline
      tl6.to(cheatboxOpen3, { duration: 0.4, opacity: 1, ease: "power1.inOut", })
        .from(cheatboxOpen3, { duration: 1, height: '5.9vh', ease: "sine.inOut", }, 0)
        .to(cheatboxOpen3, { delay: 3, duration: 1, height: '-0%', ease: "sine.inOut", transformOrigin: "bottom", }, 0)
        .to(cheatboxOpen3, { delay: 3.6, duration: 0.4, opacity: 0, ease: "power1.inOut", }, 0)
        .to(cheatboxShow3, { delay: 3, duration: 0.4, opacity: 1, ease: "power1.inOut", }, 0)
    }
  }

  function infocheatspu2() {
    var cheatboxElement2 = document.querySelector('.cheatbox.blue .infocheatsbox');
    var cheatboxText2 = document.querySelector('.cheatbox.blue .infocheats');

    if (!tl2) {
      // If the timeline doesn't exist, create a new one
      tl2 = gsap.timeline({
        paused: true, // Start the timeline in a paused state
        onReverseComplete: resetTimeline2 // Add a callback function to reset the timeline when the reverse is complete
      });

      // Set up the animation
      tl2.to(cheatboxElement2, { duration: 0.4, opacity: 1, ease: "power1.inOut"})
        .from(cheatboxElement2, { duration: 1, height: '5.9vh', ease: "power1.inOut"}, "-=0.4") // Set the initial height to '0vh'
        .to(cheatboxText2, { duration: 1, y: "-28vh", ease: "power1.inOut"}, "-=1");
    }

    // Toggle the visibility
    if (!isInfoVisible2) {
      // If elements are hidden, play the timeline
      tl2.play();
    } else {
      // If elements are visible, reverse the timeline
      tl2.reverse();
    }

    // Update the visibility state
    isInfoVisible2 = !isInfoVisible2;
  }

  function resetTimeline2() {
    // Reset the timeline to its initial state
    tl2.progress(0).pause();
  }

  function infocheatspu3() {
    var cheatboxElement3 = document.querySelector('.cheatbox.purple .infocheatsbox');
    var cheatboxText3 = document.querySelector('.cheatbox.purple .infocheats');

    if (!tl3) {
      // If the timeline doesn't exist, create a new one
      tl3 = gsap.timeline({
        paused: true, // Start the timeline in a paused state
        onReverseComplete: resetTimeline3 // Add a callback function to reset the timeline when the reverse is complete
      });

      // Set up the animation
      tl3.to(cheatboxElement3, { duration: 0.4, opacity: 1, ease: "power1.inOut"})
        .from(cheatboxElement3, { duration: 1, height: '5.9vh', ease: "power1.inOut"}, "-=0.4") // Set the initial height to '0vh'
        .to(cheatboxText3, { duration: 1, y: "-28vh", ease: "power1.inOut"}, "-=1");
    }

    // Toggle the visibility
    if (!isInfoVisible3) {
      // If elements are hidden, play the timeline
      tl3.play();
    } else {
      // If elements are visible, reverse the timeline
      tl3.reverse();
    }

    // Update the visibility state
    isInfoVisible3 = !isInfoVisible3;
  }

  function resetTimeline3() {
    // Reset the timeline to its initial state
    tl3.progress(0).pause();
  }

  function clearInputValue(input) {
    if (input.value === "Enter Code Here") {
      input.value = "";
    }
  }

  function resetInputValue(input) {
    if (input.value === "") {
      input.value = "Enter Code Here";
    }
  }

  var buttonBuyCheats = document.getElementById('buycheatslvl1');
  var buttonBuyCheats2 = document.getElementById('buycheatslvl2');
  var buttonBuyCheats3 = document.getElementById('buycheatslvl3');
  var buttonBuyCheats_subscribestar = document.querySelector('.subs_subscribestar');
  /* var buttonBuyCheats_patreon = document.querySelector('.subs_patreon'); */
  var buttonBuyCheats2_subscribestar = document.querySelector('.subs_subscribestar2');
  /* var buttonBuyCheats2_patreon = document.querySelector('.subs_patreon2'); */
  var buttonBuyCheats3_subscribestar = document.querySelector('.subs_subscribestar3');
  /* var buttonBuyCheats3_patreon = document.querySelector('.subs_patreon3'); */

  var breathingAnimation;

  buttonBuyCheats.addEventListener('mouseenter', () => {
    breathingAnimation = gsap.to(buttonBuyCheats, {
      duration: 0.5,
      ease: "none",
      repeat: -1,
      yoyo: true,
      scale: 1.05,
    });
  });

  buttonBuyCheats.addEventListener('mouseleave', () => {
    breathingAnimation.kill();
    gsap.to(buttonBuyCheats, {
      duration: 0.5,
      ease: "power2.inOut",
      scale: 1,
    });
  });

  // Add event listener to open the link in a new tab when the button is clicked
  buttonBuyCheats_subscribestar.addEventListener('click', function() {
    // Define the URL to be opened in a new tab
    const url = 'https://fap-ocalypse.com/subscribestar/';

    // Open the URL in a new tab
    window.open(url, '_blank');
  });

  buttonBuyCheats2.addEventListener('mouseenter', () => {
    breathingAnimation = gsap.to(buttonBuyCheats2, {
      duration: 0.5,
      ease: "none",
      repeat: -1,
      yoyo: true,
      scale: 1.05,
    });
  });

  buttonBuyCheats2.addEventListener('mouseleave', () => {
    breathingAnimation.kill();
    gsap.to(buttonBuyCheats2, {
      duration: 0.5,
      ease: "power2.inOut",
      scale: 1,
    });
  });

  buttonBuyCheats2_subscribestar.addEventListener('click', function() {
    // Define the URL to be opened in a new tab
    const url = 'https://fap-ocalypse.com/subscribestar/';

    // Open the URL in a new tab
    window.open(url, '_blank');
  });

  buttonBuyCheats3.addEventListener('mouseenter', () => {
    breathingAnimation = gsap.to(buttonBuyCheats3, {
      duration: 0.5,
      ease: "none",
      repeat: -1,
      yoyo: true,
      scale: 1.05,
    });
  });

  buttonBuyCheats3.addEventListener('mouseleave', () => {
    breathingAnimation.kill();
    gsap.to(buttonBuyCheats3, {
      duration: 0.5,
      ease: "power2.inOut",
      scale: 1,
    });
  });

  buttonBuyCheats3_subscribestar.addEventListener('click', function() {
    // Define the URL to be opened in a new tab
    const url = 'https://fap-ocalypse.com/subscribestar/';

    // Open the URL in a new tab
    window.open(url, '_blank');
  });
  /* buttonBuyCheats_patreon.addEventListener('click', function() {
    // Define the URL to be opened in a new tab
    const url = 'https://fap-ocalypse.com/patreon?';

    // Open the URL in a new tab
    window.open(url, '_blank');
  }); */
  /* buttonBuyCheats2_patreon.addEventListener('click', function() {
    // Define the URL to be opened in a new tab
    const url = 'https://fap-ocalypse.com/patreon?';

    // Open the URL in a new tab
    window.open(url, '_blank');
  }); */
  /* buttonBuyCheats3_patreon.addEventListener('click', function() {
    // Define the URL to be opened in a new tab
    const url = 'https://fap-ocalypse.com/patreon?';

    // Open the URL in a new tab
    window.open(url, '_blank');
  }); */