script.js

const canvas = document.getElementById('scrolly-canvas');
const context = canvas.getContext('2d');
const loader = document.getElementById('loader');
const loaderBar = document.getElementById('loader-bar');
const loaderPercentage = document.getElementById('loader-percentage');

const frameCount = 120;
const images = [];
const imageSequence = {
    frame: 0
};

// --- IMAGE PRELOADING ---
const preloadImages = () => {
    let loadedCount = 0;
    for (let i = 0; i < frameCount; i++) {
        const img = new Image();
        const paddedIndex = i.toString().padStart(3, '0');
        img.src = `sequence/frame_${paddedIndex}_delay-0.066s.png`;
        img.onload = () => {
            loadedCount++;
            const progress = Math.round((loadedCount / frameCount) * 100);
            loaderBar.style.width = `${progress}%`;
            loaderPercentage.innerText = `${progress}%`;

            if (loadedCount === frameCount) {
                setTimeout(() => {
                    loader.classList.add('hidden');
                    render(); // Initial render
                }, 500);
            }
        };
        images.push(img);
    }
};

// --- CANVAS RENDERING ---
const render = () => {
    const frameIndex = Math.min(frameCount - 1, Math.max(0, imageSequence.frame));
    const img = images[frameIndex];
    if (!img) return;

    // Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Object-fit: cover logic
    const imgRatio = img.width / img.height;
    const canvasRatio = canvas.width / canvas.height;
    let drawWidth, drawHeight, offsetX, offsetY;

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

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

// --- SCROLL LOGIC ---
window.addEventListener('scroll', () => {
    const scrollySection = document.getElementById('scrolly-section');
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // Calculate progress based strictly on the scrolly-section height (e.g. 500vh)
    const sectionHeight = scrollySection.offsetHeight - window.innerHeight;
    let scrollFraction = scrollTop / sectionHeight;

    // Clamp fraction between 0 and 1
    scrollFraction = Math.max(0, Math.min(1, scrollFraction));

    // Map to frames
    const frameIndex = Math.floor(scrollFraction * (frameCount - 1));
    imageSequence.frame = frameIndex;

    requestAnimationFrame(render);

    // Update Overlays
    updateOverlays(scrollFraction);

    // Reveal Information Content at the end of the scroll sequence
    const infoContent = document.getElementById('info-content');
    const canvasWrapper = document.getElementById('canvas-wrapper');

    if (scrollFraction >= 0.98) {
        infoContent.classList.add('visible');
        canvasWrapper.style.opacity = '0.3';
        canvasWrapper.style.filter = 'blur(15px)';
    } else {
        infoContent.classList.remove('visible');
        canvasWrapper.style.opacity = '1';
        canvasWrapper.style.filter = 'blur(0px)';
    }
});

const updateOverlays = (progress) => {
    const s1 = document.getElementById('section-1');
    const s2 = document.getElementById('section-2');
    const s3 = document.getElementById('section-3');

    // Section 1: 0% to 20%
    if (progress < 0.2) {
        s1.style.opacity = 1 - (progress / 0.2);
        s1.style.transform = `translateY(-${progress * 100}px)`;
    } else {
        s1.style.opacity = 0;
    }

    // Section 2: 25% to 45%
    if (progress > 0.25 && progress < 0.45) {
        const localProg = (progress - 0.25) / 0.2;
        s2.style.opacity = localProg < 0.5 ? localProg * 2 : 2 - (localProg * 2);
        s2.style.transform = `translateX(${(1 - localProg) * -50}px)`;
    } else {
        s2.style.opacity = 0;
    }

    // Section 3: 55% to 75%
    if (progress > 0.55 && progress < 0.75) {
        const localProg = (progress - 0.55) / 0.2;
        s3.style.opacity = localProg < 0.5 ? localProg * 2 : 2 - (localProg * 2);
        s3.style.transform = `translateX(${(1 - localProg) * 50}px)`;
    } else {
        s3.style.opacity = 0;
    }
};

// --- CUSTOM CURSOR ---
const cursor = document.getElementById('cursor');
const follower = document.getElementById('cursor-follower');

window.addEventListener('mousemove', (e) => {
    // Cursor is 24px, so subtract 12px to center
    cursor.style.transform = `translate3d(${e.clientX - 12}px, ${e.clientY - 12}px, 0)`;
});

// Cursor Hover Effects
document.querySelectorAll('button, a').forEach(el => {
    el.addEventListener('mouseenter', () => {
        cursor.style.transform += ' scale(2.5)';
        follower.style.opacity = '0';
    });
    el.addEventListener('mouseleave', () => {
        // Simple reset
        follower.style.opacity = '1';
    });
});

// Resize handling
window.addEventListener('resize', render);

// Initialize
preloadImages();