<style>
/*this code is used for background gradient*/
/*================================*/
/*==================================*/
#main-wrapper::after {
  content: "";
  position: absolute;
  top:-50dvh;
  left: 50%;
  transform: translate(-50%);
  width: 100%;
  height: 100dvw;
  /* elliptical spotlight */
   background: radial-gradient(at center center, #31D677 30%, #259B57 72%);
   
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 10%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
}

/* Tablet (768px – 1024px) */
@media (max-width: 1024px) {
  #main-wrapper::after {
    top: -30dvh;
    width: 120%;
    height: 120dvh;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.15) 15%,
      rgba(255, 255, 255, 0) 60%
    );
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  #main-wrapper::after {
    left: 65%;
    top: -20dvh;
    width: 150%;
    height: 140dvh;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0) 70%
    );
  }
}

/*end of gradient code */
/*===================*/
/*---------------------------------*/

.text-container {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}
.text-container button,
.text-container a {
  pointer-events: auto;
}
</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const gradients = [
      "radial-gradient(at center center, #31D677 30%, #259B57 72%)",
      "radial-gradient(at center center, #FF4F78 40%, #D92A54 72%)",
      "radial-gradient(at center center, #FFA94D 40%, #FF7E3D 72%)",
      "radial-gradient(at center center, #A259FF 0%, #6A0DAD 72%)",
    ];
    const smallest_scale = 0.5;
    
    // set all sections initially to scale(0.7)
    gsap.set("#img-container .section", { scale: smallest_scale });

    const fullpageInstance = new fullpage("#img-container", {
      scrollingSpeed: 1000,
      autoScrolling: true,
      scrollHorizontally: true,
      navigation: false,
      
      // When section loads
      afterLoad: function (origin, destination) {
        // grow the loaded section
        gsap.to(destination.item, {
          scale: 1,
          duration: 0,
          ease: "power2.out"
        });
      },

      // Triggered when leaving a section
      onLeave: function (origin, destination, direction) {
        const toGradient = gradients[destination.index];

        // Change background (instant switch between gradients)
        gsap.to("#main-wrapper", {
          backgroundImage: toGradient,
          duration: 0.5,
          ease: "none"
        });
        
        // Shrink leaving section
        gsap.to(origin.item, {
          scale: smallest_scale,
          duration: 0.6,
          ease: "power2.out"
        });

        // Grow entering section
        gsap.to(destination.item, {
          scale: 1,
          duration: 0.6,
          ease: "power2.out"
        });
      }
    });
  });
</script>