script.js

document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);

  // --- Canvas Image Sequence Logic ---
  const canvas = document.getElementById("scrolly-canvas");
  const ctx = canvas.getContext("2d");
  const loadingProgress = document.getElementById("loading-progress");
  const loadingHud = document.getElementById("loading-hud");

  const FRAME_COUNT = 88;
  const images = [];
  let imagesLoaded = 0;

  // Preload Images
  for (let i = 0; i < FRAME_COUNT; i++) {
    const img = new Image();
    const paddedIndex = i.toString().padStart(2, "0");
    img.src = `sequence/frame_${paddedIndex}_delay-0.09s.png`;
    img.onload = () => {
      imagesLoaded++;
      loadingProgress.innerText = `${Math.round((imagesLoaded / FRAME_COUNT) * 100)}%`;
      if (imagesLoaded === FRAME_COUNT) {
        // Hide loading HUD
        gsap.to(loadingHud, { opacity: 0, duration: 1 });
        renderFrame(0);
      }
    };
    images.push(img);
  }

  const renderFrame = (index) => {
    if (images[index] && images[index].complete) {
      // Object-fit cover calculations
      const img = images[index];
      const canvasRatio = canvas.width / canvas.height;
      const imgRatio = img.width / img.height;

      let drawWidth = canvas.width;
      let drawHeight = canvas.height;
      let offsetX = 0;
      let offsetY = 0;

      if (canvasRatio > imgRatio) {
        drawHeight = canvas.width / imgRatio;
        offsetY = (canvas.height - drawHeight) / 2;
      } else {
        drawWidth = canvas.height * imgRatio;
        offsetX = (canvas.width - drawWidth) / 2;
      }

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
    }
  };

  const handleResize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Determine which frame to render based on current scroll
    const scrollContainer = document.querySelector('.scroll-container');
    const scrollMax = scrollContainer.offsetHeight - window.innerHeight;
    const progress = window.scrollY / scrollMax;
    const frameIndex = Math.min(FRAME_COUNT - 1, Math.max(0, Math.round(progress * (FRAME_COUNT - 1))));
    
    renderFrame(frameIndex || 0);
  };

  window.addEventListener('resize', handleResize);
  handleResize();

  // Link Canvas rendering to scroll via GSAP
  gsap.to({ frame: 0 }, {
    frame: FRAME_COUNT - 1,
    snap: "frame",
    ease: "none",
    scrollTrigger: {
      trigger: ".scroll-container",
      start: "top top",
      end: "bottom bottom",
      scrub: 0.5 // Smoothing
    },
    onUpdate: function() {
      renderFrame(Math.round(this.targets()[0].frame));
    }
  });


  // --- Cinematic Overlays (Scrollytelling Scenes) ---
  
  // Scene 1
  gsap.timeline({
    scrollTrigger: {
      trigger: ".scroll-container",
      start: "top top",
      end: "15% top",
      scrub: 1
    }
  })
  .fromTo("#scene-1", { opacity: 1, y: 0, position: "fixed" }, { opacity: 0, y: -100 });

  // Scene 2
  gsap.timeline({
    scrollTrigger: {
      trigger: ".scroll-container",
      start: "25% top",
      end: "50% top",
      scrub: 1
    }
  })
  .fromTo("#scene-2", { opacity: 0, y: 50, position: "fixed" }, { opacity: 1, y: 0 })
  .to("#scene-2", { opacity: 0, y: -50 }, "+=0.5");

  // Scene 3
  gsap.timeline({
    scrollTrigger: {
      trigger: ".scroll-container",
      start: "60% top",
      end: "85% top",
      scrub: 1
    }
  })
  .fromTo("#scene-3", { opacity: 0, y: 50, position: "fixed" }, { opacity: 1, y: 0 })
  .to("#scene-3", { opacity: 0, y: -50 }, "+=0.5");

  // Global Darkening overlay near the end
  gsap.fromTo("#dark-overlay", 
    { opacity: 0 },
    {
      opacity: 1,
      ease: "none",
      scrollTrigger: {
        trigger: ".scroll-container",
        start: "85% top",
        end: "bottom bottom",
        scrub: true
      }
    }
  );

  // --- Projects Grid Animations ---
  const projectCards = document.querySelectorAll('.project-card');
  projectCards.forEach((card, i) => {
    gsap.to(card, {
      scrollTrigger: {
        trigger: card,
        start: "top 90%",
      },
      opacity: 1,
      y: 0,
      duration: 0.8,
      ease: "power3.out",
      delay: i * 0.1
    });
  });

});