script.js

/* ============================================
   Interactive Particle Name + Loader
   ============================================ */

(function () {
    'use strict';

    // --- Configuration ---
    const CONFIG = {
        mediaCdn: 'https://pub-695d82c26b22440cbaeea34343fc0bec.r2.dev', // R2 CDN Base URL
        particleColor: { r: 0, g: 242, b: 254 },   // Peacock Neon Cyan
        particleColorDim: { r: 5, g: 117, b: 230 }, // Peacock Deep Blue
        particleSize: 2,
        particleGap: 5,          // Gap between sampled pixels (tighter = more particles)
        mouseRadius: 100,        // How far mouse pushes particles
        returnSpeed: 0.07,       // How quickly particles spring back (slower = more dramatic)
        friction: 0.88,
        name: 'KUSHAL DHOLA',
        fontWeight: '900',
        fontFamily: 'Outfit, sans-serif',
        lineDistance: 120,
        bgParticleCount: 150,
    };

    // --- Global Instances ---
    let lenis;
    let globalUpdateStickyScroll = null;

    // --- Utility ---
    const lerp = (a, b, t) => a + (b - a) * t;
    const dist = (x1, y1, x2, y2) => Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);

    const resolveMediaUrl = (path, folder = '') => {
        if (!path) return '';
        const trimmed = path.trim();
        if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) return trimmed;
        
        let cleanPath = trimmed.replace(/^assets\//, '').replace(/^\//, '');

        if (folder) {
            const cleanFolder = folder.trim().replace(/\/$/, '').replace(/^assets\//, '').replace(/^\//, '');
            if (cleanFolder && !cleanPath.startsWith(cleanFolder + '/')) {
                cleanPath = `${cleanFolder}/${cleanPath}`;
            }
        }

        if (CONFIG.mediaCdn) {
            const base = CONFIG.mediaCdn.endsWith('/') ? CONFIG.mediaCdn.slice(0, -1) : CONFIG.mediaCdn;
            return `${base}/${cleanPath}`;
        }
        return `assets/${cleanPath}`;
    };

    // --- Particle Class ---
    class Particle {
        constructor(x, y, originX, originY, baseSize = CONFIG.particleSize) {
            this.x = x;
            this.y = y;
            this.originX = originX;
            this.originY = originY;
            this.vx = 0;
            this.vy = 0;
            this.opacity = 0;
            this.size = baseSize + Math.random() * (baseSize * 0.2);
            this.colorMix = Math.random(); // blend between accent and dim
        }

        update(mouseX, mouseY, hasMouseInteraction) {
            // Mouse repulsion
            if (hasMouseInteraction) {
                const dx = this.x - mouseX;
                const dy = this.y - mouseY;
                const d = dist(this.x, this.y, mouseX, mouseY);
                if (d < CONFIG.mouseRadius) {
                    const force = (CONFIG.mouseRadius - d) / CONFIG.mouseRadius;
                    const angle = Math.atan2(dy, dx);
                    this.vx += Math.cos(angle) * force * 12;
                    this.vy += Math.sin(angle) * force * 12;
                }
            }

            // Spring back to origin
            this.vx += (this.originX - this.x) * CONFIG.returnSpeed;
            this.vy += (this.originY - this.y) * CONFIG.returnSpeed;

            // Friction
            this.vx *= CONFIG.friction;
            this.vy *= CONFIG.friction;

            // Update position
            this.x += this.vx;
            this.y += this.vy;
        }

        applyWaveForce(wave) {
            const dx = this.x - wave.x;
            const dy = this.y - wave.y;
            const d = dist(this.x, this.y, wave.x, wave.y);

            // Check if particle is near the wave front (the "edge" of the energy circle)
            const thickness = 15;
            if (d > wave.radius - thickness && d < wave.radius + thickness) {
                const force = (1 - Math.abs(d - wave.radius) / thickness) * wave.currentPower;
                const angle = Math.atan2(dy, dx);
                this.vx += Math.cos(angle) * force;
                this.vy += Math.sin(angle) * force;
            }
        }

        draw(ctx) {
            const c = CONFIG.particleColor;
            const cd = CONFIG.particleColorDim;
            const r = Math.round(lerp(cd.r, c.r, this.colorMix));
            const g = Math.round(lerp(cd.g, c.g, this.colorMix));
            const b = Math.round(lerp(cd.b, c.b, this.colorMix));

            ctx.fillStyle = `rgba(${r},${g},${b},${this.opacity})`;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // --- Particle System ---
    class ParticleSystem {
        constructor(canvas, isLoader = false) {
            this.canvas = canvas;
            this.ctx = canvas.getContext('2d');
            this.particles = [];
            this.bgParticles = [];
            this.mouse = { x: -9999, y: -9999, active: false };
            this.waves = [];          // Active energy waves
            this.isLoader = isLoader;
            this.progress = 0;        // 0 = scattered, 1 = formed
            this.running = true;
            this.dpr = Math.min(window.devicePixelRatio || 1, 2);

            this.resize();
            this.initText();
            if (!isLoader) this.initBackground();
        }

        initBackground() {
            this.bgParticles = [];
            for (let i = 0; i < CONFIG.bgParticleCount; i++) {
                this.bgParticles.push({
                    x: Math.random() * this.width,
                    y: Math.random() * this.height,
                    vx: (Math.random() - 0.5) * 0.5,
                    vy: (Math.random() - 0.5) * 0.5,
                    size: Math.random() * 2 + 1
                });
            }
        }

        resize() {
            const rect = this.canvas.parentElement.getBoundingClientRect();
            this.width = rect.width;
            this.height = rect.height;
            this.canvas.width = this.width * this.dpr;
            this.canvas.height = this.height * this.dpr;
            this.canvas.style.width = this.width + 'px';
            this.canvas.style.height = this.height + 'px';
            this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
        }

        initText() {
            this.particles = [];
            const ctx = this.ctx;
            const text = CONFIG.name;

            // Determine font size based on canvas width
            let fontSize = Math.min(this.width * 0.12, 100);
            if (this.width < 768) fontSize = Math.min(this.width * 0.14, 56);
            if (this.width < 480) fontSize = Math.min(this.width * 0.16, 42);

            ctx.save();
            ctx.font = `${CONFIG.fontWeight} ${fontSize}px ${CONFIG.fontFamily}`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = '#fff';

            // Clear and draw text to sample pixels
            ctx.clearRect(0, 0, this.width, this.height);
            ctx.fillText(text, this.width / 2, this.height / 2);

            // Sample pixels
            const imageData = ctx.getImageData(
                0, 0,
                this.canvas.width, this.canvas.height
            );
            const data = imageData.data;
            
            // Responsive gap and size for particles
            let gap = CONFIG.particleGap;
            let pSize = CONFIG.particleSize;
            if (this.width < 768) {
                gap = 3;
                pSize = 1.2;
            }
            if (this.width < 480) {
                gap = 2;
                pSize = 0.9;
            }

            for (let y = 0; y < this.canvas.height; y += gap) {
                for (let x = 0; x < this.canvas.width; x += gap) {
                    const i = (y * this.canvas.width + x) * 4;
                    if (data[i + 3] > 128) {
                        const px = x / this.dpr;
                        const py = y / this.dpr;

                        // Start position: random scatter for loader, at origin for hero
                        let startX, startY;
                        if (this.isLoader) {
                            startX = Math.random() * this.width;
                            startY = Math.random() * this.height;
                        } else {
                            startX = px;
                            startY = py;
                        }

                        this.particles.push(new Particle(startX, startY, px, py, pSize));
                    }
                }
            }

            ctx.restore();
            ctx.clearRect(0, 0, this.width, this.height);
        }

        setMouse(x, y) {
            this.mouse.x = x;
            this.mouse.y = y;
            this.mouse.active = true;
        }

        clearMouse() {
            this.mouse.active = false;
            this.mouse.x = -9999;
            this.mouse.y = -9999;
        }

        update() {
            // Update particle opacity based on progress
            for (let i = 0; i < this.particles.length; i++) {
                const p = this.particles[i];
                const targetOpacity = this.isLoader ? this.progress : 1;
                p.opacity = lerp(p.opacity, targetOpacity, 0.05);
                p.update(this.mouse.x, this.mouse.y, this.mouse.active);
            }

            // Update background particles
            for (let bp of this.bgParticles) {
                bp.x += bp.vx;
                bp.y += bp.vy;

                // Bounce off edges
                if (bp.x < 0 || bp.x > this.width) bp.vx *= -1;
                if (bp.y < 0 || bp.y > this.height) bp.vy *= -1;

                // Mouse interaction for background dots (Stronger Repulsion)
                if (this.mouse.active) {
                    const d = dist(bp.x, bp.y, this.mouse.x, this.mouse.y);
                    if (d < 180) {
                        const force = (180 - d) / 180;
                        const angle = Math.atan2(bp.y - this.mouse.y, bp.x - this.mouse.x);
                        bp.vx += Math.cos(angle) * force * 0.8;
                        bp.vy += Math.sin(angle) * force * 0.8;
                    }
                }

                // Constant slow friction
                bp.vx *= 0.96;
                bp.vy *= 0.96;
            }

            // Update and clean up waves (disabled)
            this.waves = [];
        }

        draw() {
            this.ctx.clearRect(0, 0, this.width, this.height);

            // 1. Draw connections first (localized to mouse)
            if (!this.isLoader && this.mouse.active) {
                this.ctx.beginPath();
                this.ctx.strokeStyle = `rgba(${CONFIG.particleColor.r}, ${CONFIG.particleColor.g}, ${CONFIG.particleColor.b}, 0.2)`;
                this.ctx.lineWidth = 0.8;

                for (let i = 0; i < this.bgParticles.length; i++) {
                    const p1 = this.bgParticles[i];
                    const dMouse1 = dist(p1.x, p1.y, this.mouse.x, this.mouse.y);

                    if (dMouse1 < CONFIG.lineDistance * 1.5) {
                        // Connect to mouse
                        this.ctx.moveTo(p1.x, p1.y);
                        this.ctx.lineTo(this.mouse.x, this.mouse.y);

                        // Connect to other nearby particles only if they are also near mouse
                        for (let j = i + 1; j < this.bgParticles.length; j++) {
                            const p2 = this.bgParticles[j];
                            const dMouse2 = dist(p2.x, p2.y, this.mouse.x, this.mouse.y);

                            if (dMouse2 < CONFIG.lineDistance * 1.5) {
                                const d = dist(p1.x, p1.y, p2.x, p2.y);
                                if (d < CONFIG.lineDistance) {
                                    this.ctx.moveTo(p1.x, p1.y);
                                    this.ctx.lineTo(p2.x, p2.y);
                                }
                            }
                        }
                    }
                }
                this.ctx.stroke();
            }

            // 2. Draw background particles
            for (let bp of this.bgParticles) {
                this.ctx.fillStyle = `rgba(${CONFIG.particleColor.r}, ${CONFIG.particleColor.g}, ${CONFIG.particleColor.b}, 0.4)`;
                this.ctx.beginPath();
                this.ctx.arc(bp.x, bp.y, bp.size, 0, Math.PI * 2);
                this.ctx.fill();
            }

            // 3. Draw text particles
            for (let i = 0; i < this.particles.length; i++) {
                this.particles[i].draw(this.ctx);
            }
        }

        animate() {
            if (!this.running) return;
            this.update();
            this.draw();
            requestAnimationFrame(() => this.animate());
        }

        destroy() {
            this.running = false;
            this.particles = [];
        }
    }

    // --- Initialize ---
    let loaderSystem, heroSystem;
    let loaderDone = false;

    function initLoader() {
        const canvas = document.getElementById('loaderCanvas');
        if (!canvas) return;

        loaderSystem = new ParticleSystem(canvas, true);

        // Animate formation: progress from 0 → 1 over ~2.5 seconds
        let startTime = performance.now();
        const duration = 2500;

        function animateFormation() {
            const elapsed = performance.now() - startTime;
            loaderSystem.progress = Math.min(elapsed / duration, 1);

            // Also gradually move particles toward their origins
            for (let p of loaderSystem.particles) {
                const t = loaderSystem.progress * loaderSystem.progress; // ease-in-quad
                p.x = lerp(p.x, p.originX, 0.02 + t * 0.06);
                p.y = lerp(p.y, p.originY, 0.02 + t * 0.06);
            }

            if (loaderSystem.progress < 1) {
                requestAnimationFrame(animateFormation);
            } else {
                // Hold for a moment then transition
                setTimeout(finishLoader, 600);
            }
        }

        // Add subtle mouse interaction even on loader
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            loaderSystem.setMouse(e.clientX - rect.left, e.clientY - rect.top);
        });
        canvas.addEventListener('mouseleave', () => loaderSystem.clearMouse());
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            loaderSystem.createWave(e.clientX - rect.left, e.clientY - rect.top);
        });

        loaderSystem.animate();
        requestAnimationFrame(animateFormation);
    }

    function finishLoader() {
        loaderDone = true;
        const loader = document.getElementById('loader');
        if (loader) loader.classList.add('done');
        document.documentElement.classList.remove('no-scroll');
        document.body.classList.remove('no-scroll');

        // Destroy loader system after transition
        setTimeout(() => {
            if (loaderSystem) loaderSystem.destroy();
        }, 800);

        // Show nav
        document.querySelector('.nav')?.classList.add('visible');

        // Trigger hero animations
        setTimeout(initHeroAnimations, 200);
    }

    function initHero() {
        const hero = document.getElementById('hero');
        if (hero) {
            hero.style.height = window.innerHeight + 'px';
            hero.style.minHeight = 'auto';
        }

        const canvas = document.getElementById('heroCanvas');
        if (!canvas) return;

        heroSystem = new ParticleSystem(canvas, false);

        // Set initial opacity
        for (let p of heroSystem.particles) {
            p.opacity = 0;
        }

        // Mouse interaction
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            heroSystem.setMouse(e.clientX - rect.left, e.clientY - rect.top);
        });
        canvas.addEventListener('mouseleave', () => heroSystem.clearMouse());
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            heroSystem.createWave(e.clientX - rect.left, e.clientY - rect.top);
        });

        // Touch support (tap to trigger wave)
        canvas.addEventListener('touchstart', (e) => {
            const touch = e.touches[0];
            const rect = canvas.getBoundingClientRect();
            heroSystem.createWave(touch.clientX - rect.left, touch.clientY - rect.top);
        }, { passive: true });
        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            const touch = e.touches[0];
            const rect = canvas.getBoundingClientRect();
            heroSystem.setMouse(touch.clientX - rect.left, touch.clientY - rect.top);
        }, { passive: false });
        canvas.addEventListener('touchend', () => heroSystem.clearMouse());

        heroSystem.animate();
    }

    function initHeroAnimations() {
        // Fade in hero particles
        if (heroSystem) {
            for (let p of heroSystem.particles) {
                p.opacity = 0;
            }
            // Gradually reveal
            let revealStart = performance.now();
            function revealParticles() {
                const elapsed = performance.now() - revealStart;
                const progress = Math.min(elapsed / 1200, 1);
                for (let p of heroSystem.particles) {
                    p.opacity = progress;
                }
                if (progress < 1) requestAnimationFrame(revealParticles);
            }
            requestAnimationFrame(revealParticles);
        }

        // Animate other hero elements
        document.querySelector('.hero-tag')?.classList.add('show');
        setTimeout(() => document.querySelector('.hero-desc')?.classList.add('show'), 300);
        setTimeout(() => document.querySelector('.hero-cta')?.classList.add('show'), 500);
    }

    // --- Handle Resize ---
    let resizeTimer;
    let lastWidth = window.innerWidth;
    window.addEventListener('resize', () => {
        if (window.innerWidth === lastWidth) return;
        lastWidth = window.innerWidth;

        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            if (heroSystem && heroSystem.running) {
                heroSystem.resize();
                heroSystem.initText();
                heroSystem.initBackground();
                for (let p of heroSystem.particles) p.opacity = 1;
            }
            if (loaderSystem && loaderSystem.running) {
                loaderSystem.resize();
                loaderSystem.initText();
            }
        }, 250);
    });

    // --- Scroll Reveal ---
    function initScrollReveal() {
        const reveals = document.querySelectorAll('.section-label, .section-title, .about-text, .about-stats, .project-card, .service-card, .contact-inner, .experience-card, .skill-item, .skills-grid');
        reveals.forEach(el => el.classList.add('reveal'));

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.15 });

        reveals.forEach(el => observer.observe(el));
    }

    // --- Nav Scroll Behavior & Active Section Scrollspy ---
    function initNav() {
        const nav = document.querySelector('.nav');
        let lastScroll = 0;

        const sections = document.querySelectorAll('section[id]');
        const desktopNavLinks = document.querySelectorAll('.nav-links a');
        const mobileNavLinks = document.querySelectorAll('.mobile-menu-links a');

        function updateActiveNav() {
            const isAtBottom = (window.innerHeight + window.scrollY) >= (document.documentElement.scrollHeight - 50);
            
            if (isAtBottom && desktopNavLinks.length > 0) {
                const lastSectionId = sections[sections.length - 1]?.getAttribute('id');
                desktopNavLinks.forEach(link => {
                    link.classList.toggle('active', link.getAttribute('href') === `#${lastSectionId}`);
                });
                mobileNavLinks.forEach(link => {
                    link.classList.toggle('active', link.getAttribute('href') === `#${lastSectionId}`);
                });
                return;
            }

            const scrollY = window.scrollY + 200;
            sections.forEach(section => {
                const sectionHeight = section.offsetHeight;
                const sectionTop = section.offsetTop;
                const sectionId = section.getAttribute('id');

                if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
                    desktopNavLinks.forEach(link => {
                        link.classList.toggle('active', link.getAttribute('href') === `#${sectionId}`);
                    });
                    mobileNavLinks.forEach(link => {
                        link.classList.toggle('active', link.getAttribute('href') === `#${sectionId}`);
                    });
                }
            });
        }

        window.addEventListener('scroll', () => {
            const st = window.scrollY;
            if (st > 100 && !loaderDone) return;
            if (st > 100) {
                nav?.classList.add('visible');
            }
            lastScroll = st;
            updateActiveNav();
        }, { passive: true });

        updateActiveNav();

        // Mobile menu toggle
        const toggle = document.getElementById('navToggle');
        const mobile = document.getElementById('mobileMenu');
        if (toggle && mobile) {
            toggle.addEventListener('click', () => {
                toggle.classList.toggle('active');
                mobile.classList.toggle('open');
                document.body.style.overflow = mobile.classList.contains('open') ? 'hidden' : '';
            });
            mobile.querySelectorAll('a').forEach(a => {
                a.addEventListener('click', () => {
                    toggle.classList.remove('active');
                    mobile.classList.remove('open');
                    document.body.style.overflow = '';
                });
            });
        }
    }

    // --- Smooth scroll for anchor links ---
    function initSmoothScroll() {
        if (typeof Lenis !== 'undefined' && window.innerWidth > 1024) {
            lenis = new Lenis({
                duration: 1.2,
                easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
                direction: 'vertical',
                gestureDirection: 'vertical',
                smooth: true,
                mouseMultiplier: 1,
                smoothTouch: false,
                touchMultiplier: 2,
                infinite: false,
            });

            lenis.on('scroll', () => {
                if (globalUpdateStickyScroll) {
                    globalUpdateStickyScroll();
                }
            });

            function raf(time) {
                lenis.raf(time);
                requestAnimationFrame(raf);
            }

            requestAnimationFrame(raf);
        }

        document.querySelectorAll('a[href^="#"]').forEach(a => {
            a.addEventListener('click', (e) => {
                const targetId = a.getAttribute('href');
                if (targetId === '#') return;
                const target = document.querySelector(targetId);
                if (target) {
                    e.preventDefault();
                    if (lenis) {
                        lenis.scrollTo(target);
                    } else {
                        target.scrollIntoView({ behavior: 'smooth' });
                    }
                    
                    // Close mobile menu if open
                    const mobileMenu = document.getElementById('mobileMenu');
                    const toggle = document.getElementById('navToggle');
                    if (mobileMenu && mobileMenu.classList.contains('open')) {
                        mobileMenu.classList.remove('open');
                        toggle.classList.remove('active');
                    }
                }
            });
        });
    }

    // --- Project Showcase: Horizontal Scroll, Filters, Modal, Lightbox ---
    function initProjectShowcase() {
        const filterBtns = document.querySelectorAll('.filter-btn');
        const cards = document.querySelectorAll('.showcase-card');
        const scrollTrack = document.getElementById('projectsScrollTrack');
        const workSection = document.getElementById('work');
        const modal = document.getElementById('projectModal');
        const modalBackdrop = document.getElementById('modalBackdrop');
        const modalClose = document.getElementById('modalClose');
        const lightbox = document.getElementById('lightbox');
        const lightboxMedia = document.getElementById('lightboxMedia');
        const lightboxClose = document.getElementById('lightboxClose');
        const lightboxPrev = document.getElementById('lightboxPrev');
        const lightboxNext = document.getElementById('lightboxNext');
        const lightboxCounter = document.getElementById('lightboxCounter');

        let currentMedia = [];
        let currentMediaIndex = 0;

        // --- Smooth Horizontal Scroll via CSS Sticky ---
        let wasDesktop = window.innerWidth > 1024;
        function updateStickyScroll() {
            if (!scrollTrack || !workSection) return;
            const scrollInner = document.getElementById('projectsScrollInner');
            if (!scrollInner) return;
            
            const maxScroll = Math.max(0, scrollInner.scrollWidth - scrollTrack.clientWidth);
            const isDesktop = window.innerWidth > 1024;
            
            if (isDesktop) {
                // Set height so the section is sticky for the duration of the horizontal scroll
                workSection.style.height = `calc(100vh - 72px + ${maxScroll}px)`;
                
                const rect = workSection.getBoundingClientRect();
                const offset = 72;
                const scrolled = offset - rect.top;
                const targetX = Math.max(0, Math.min(maxScroll, scrolled));
                
                // Use hardware-accelerated transform on desktop for buttery-smooth horizontal scrolling
                scrollInner.style.transform = `translate3d(${-targetX}px, 0, 0)`;
                
                // Remove lenis prevent on desktop so scrolling over the track scrolls the page
                scrollTrack.removeAttribute('data-lenis-prevent');
                wasDesktop = true;
            } else {
                workSection.style.height = 'auto';
                
                // Add lenis prevent on mobile to allow native swiping without Lenis interference
                scrollTrack.setAttribute('data-lenis-prevent', 'true');
                
                if (wasDesktop) {
                    // Reset transform and scroll position on mobile/tablet fallback
                    scrollInner.style.transform = 'none';
                    scrollTrack.scrollLeft = 0;
                    wasDesktop = false;
                }
            }
        }

        globalUpdateStickyScroll = updateStickyScroll;

        if (!lenis && window.innerWidth > 1024) {
            window.addEventListener('scroll', updateStickyScroll);
        }
        window.addEventListener('resize', updateStickyScroll);
        window.addEventListener('load', updateStickyScroll);
        // Run once on init
        updateStickyScroll();
        setTimeout(updateStickyScroll, 100);



        // --- Filter Logic ---
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                const filter = btn.getAttribute('data-filter');

                // Smoothly scroll vertical viewport back to the top of the work section (offset by header)
                if (workSection) {
                    const offset = 72;
                    const targetScroll = workSection.offsetTop - offset;
                    if (lenis) {
                        lenis.scrollTo(targetScroll, { duration: 0.4 });
                    } else {
                        window.scrollTo({ top: targetScroll, behavior: 'smooth' });
                    }
                }

                cards.forEach(card => {
                    const cat = card.getAttribute('data-category');
                    if (filter === 'all' || cat === filter) {
                        card.classList.remove('filtering-out');
                        setTimeout(() => card.classList.remove('hidden'), 10);
                    } else {
                        card.classList.add('filtering-out');
                        setTimeout(() => card.classList.add('hidden'), 350);
                    }
                });

                // Reset/clamp scroll on filter after animation finishes
                setTimeout(() => {
                    updateStickyScroll();
                }, 400);
            });
        });

        // Helper to get project folder from card attributes
        const getCardFolder = (card) => {
            if (!card) return '';
            return card.getAttribute('data-folder') || 
                   card.querySelector('.project-media')?.getAttribute('data-folder') || 
                   '';
        };

        // --- Auto-resolve Card Thumbnails to CDN ---
        cards.forEach(card => {
            const folder = getCardFolder(card);
            const thumbImg = card.querySelector('.showcase-thumb img');
            if (thumbImg) {
                const rawSrc = thumbImg.getAttribute('src');
                if (rawSrc) {
                    thumbImg.src = resolveMediaUrl(rawSrc, folder);
                }
            }
        });

        // --- Parse media items from child tags or data-media attribute ---
        function parseMedia(card) {
            if (!card) return [];
            const folder = getCardFolder(card);
            const mediaList = [];

            // 1. Easy Method: Check for child <div class="project-media" hidden> container
            const mediaContainer = card.querySelector('.project-media');
            if (mediaContainer) {
                const elements = mediaContainer.querySelectorAll('img, video, source');
                elements.forEach(el => {
                    const tagName = el.tagName.toLowerCase();
                    const rawSrc = el.getAttribute('src');
                    if (!rawSrc) return;
                    const type = (tagName === 'video' || tagName === 'source') ? 'video' : 'image';
                    mediaList.push({ type, src: resolveMediaUrl(rawSrc, folder) });
                });
                if (mediaList.length > 0) return mediaList;
            }

            // 2. Attribute Method: Check data-media attribute on <article>
            const str = card.getAttribute('data-media');
            if (!str) return [];

            // 2a. Legacy pipe format: "image:path1|video:path2"
            if (str.includes('|') || str.includes('image:') || str.includes('video:')) {
                return str.split('|').map(item => {
                    const parts = item.split(':');
                    if (parts.length >= 2) {
                        const type = parts[0].trim();
                        const rawSrc = parts.slice(1).join(':').trim();
                        return { type, src: resolveMediaUrl(rawSrc, folder) };
                    }
                    const rawSrc = item.trim();
                    const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(rawSrc);
                    return { type: isVideo ? 'video' : 'image', src: resolveMediaUrl(rawSrc, folder) };
                });
            }

            // 2b. Simple comma or newline-separated format: "path1.png, path2.png"
            return str.split(/[\n,]+/).map(item => {
                const rawSrc = item.trim();
                if (!rawSrc) return null;
                const isVideo = /\.(mp4|webm|ogg|mov)$/i.test(rawSrc);
                return { type: isVideo ? 'video' : 'image', src: resolveMediaUrl(rawSrc, folder) };
            }).filter(Boolean);
        }

        // --- Modal Logic ---
        function openModal(card) {
            if (!modal) return;
            const title = card.getAttribute('data-title');
            const desc = card.getAttribute('data-desc');
            const tech = card.getAttribute('data-tech');
            const link = card.getAttribute('data-link');
            const cat = card.querySelector('.showcase-cat')?.textContent;

            document.getElementById('modalTitle').textContent = title;
            document.getElementById('modalDesc').textContent = desc;
            document.getElementById('modalCat').textContent = cat || '';
            document.getElementById('modalLink').href = link;

            const techWrap = document.getElementById('modalTech');
            techWrap.innerHTML = '';
            if (tech) {
                tech.split(',').forEach(t => {
                    const span = document.createElement('span');
                    span.textContent = t.trim();
                    techWrap.appendChild(span);
                });
            }

            // Build thumbnail gallery
            currentMedia = parseMedia(card);
            const gallery = document.getElementById('modalGallery');
            gallery.innerHTML = '';

            const frag = document.createDocumentFragment();
            const maxVisibleThumbs = 4;
            const limit = Math.min(currentMedia.length, maxVisibleThumbs);

            for (let index = 0; index < limit; index++) {
                const item = currentMedia[index];
                const thumb = document.createElement('div');
                thumb.className = 'gallery-thumb';
                thumb.setAttribute('data-index', index);

                if (item.type === 'video') {
                    const vid = document.createElement('video');
                    vid.src = item.src;
                    vid.muted = true;
                    vid.preload = 'metadata';
                    thumb.appendChild(vid);
                    // Play icon
                    const play = document.createElement('div');
                    play.className = 'thumb-play';
                    play.innerHTML = '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
                    thumb.appendChild(play);
                } else {
                    const img = document.createElement('img');
                    img.src = item.src;
                    img.alt = title + ' screenshot ' + (index + 1);
                    img.loading = 'lazy';
                    thumb.appendChild(img);
                }

                // If it is the 4th thumbnail and there are more images in total, show "+X" overlay
                if (index === 3 && currentMedia.length > maxVisibleThumbs) {
                    thumb.classList.add('has-more-overlay');
                    const overlay = document.createElement('div');
                    overlay.className = 'more-overlay';
                    overlay.innerHTML = `<span>+${currentMedia.length - 3}</span>`;
                    thumb.appendChild(overlay);
                } else {
                    // Zoom icon (only show if not the "+X" overlay thumb)
                    const zoom = document.createElement('div');
                    zoom.className = 'thumb-zoom';
                    zoom.innerHTML = '<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>';
                    thumb.appendChild(zoom);
                }

                thumb.addEventListener('click', (e) => {
                    e.stopPropagation();
                    openLightbox(index);
                });

                frag.appendChild(thumb);
            }
            gallery.appendChild(frag);

            // Defer open class to next frame so browser can paint the content first
            document.body.classList.add('no-scroll');
            document.documentElement.classList.add('no-scroll');
            requestAnimationFrame(() => {
                modal.classList.add('open');
            });
        }

        function closeModal() {
            if (!modal) return;
            modal.classList.remove('open');
            document.body.classList.remove('no-scroll');
            document.documentElement.classList.remove('no-scroll');
        }

        // --- Lightbox Logic ---
        function openLightbox(index) {
            if (!lightbox || !currentMedia.length) return;
            currentMediaIndex = index;
            renderLightbox();
            lightbox.classList.add('open');
        }

        function closeLightbox() {
            if (!lightbox) return;
            lightbox.classList.remove('open');
            // Delay DOM cleanup until after close transition
            setTimeout(() => { lightboxMedia.innerHTML = ''; }, 300);
        }

        function renderLightbox() {
            const item = currentMedia[currentMediaIndex];
            lightboxMedia.innerHTML = '';

            if (item.type === 'video') {
                const vid = document.createElement('video');
                vid.src = item.src;
                vid.controls = true;
                vid.autoplay = true;
                lightboxMedia.appendChild(vid);
            } else {
                const img = document.createElement('img');
                img.src = item.src;
                img.alt = 'Project screenshot';
                lightboxMedia.appendChild(img);
            }

            lightboxCounter.textContent = (currentMediaIndex + 1) + ' / ' + currentMedia.length;
            lightboxPrev.style.display = currentMedia.length > 1 ? '' : 'none';
            lightboxNext.style.display = currentMedia.length > 1 ? '' : 'none';
        }

        function lightboxNavigate(dir) {
            currentMediaIndex = (currentMediaIndex + dir + currentMedia.length) % currentMedia.length;
            renderLightbox();
        }

        // --- Background Media Preloader (Pre-fetches gallery images after site loads) ---
        const preloadedUrls = new Set();
        function preloadCardMedia(card) {
            if (!card) return;
            const mediaList = parseMedia(card);
            mediaList.forEach(item => {
                if (item.type === 'image' && item.src && !preloadedUrls.has(item.src)) {
                    preloadedUrls.add(item.src);
                    const img = new Image();
                    img.src = item.src;
                }
            });
        }

        function preloadAllProjectMedia() {
            cards.forEach(card => preloadCardMedia(card));
        }

        // Start background fetching after main page load finishes (1.5s delay or browser idle)
        if ('requestIdleCallback' in window) {
            requestIdleCallback(() => setTimeout(preloadAllProjectMedia, 1500));
        } else {
            window.addEventListener('load', () => setTimeout(preloadAllProjectMedia, 1500));
        }

        // --- Event Listeners ---
        cards.forEach(card => {
            // Hover preloading: Pre-fetch images instantly when user hovers card
            card.addEventListener('mouseenter', () => preloadCardMedia(card), { once: true });

            card.addEventListener('click', () => {
                openModal(card);
            });
        });

        if (modalBackdrop) modalBackdrop.addEventListener('click', closeModal);
        if (modalClose) modalClose.addEventListener('click', closeModal);
        if (lightboxClose) lightboxClose.addEventListener('click', closeLightbox);
        if (lightboxPrev) lightboxPrev.addEventListener('click', () => lightboxNavigate(-1));
        if (lightboxNext) lightboxNext.addEventListener('click', () => lightboxNavigate(1));

        document.addEventListener('keydown', (e) => {
            if (lightbox?.classList.contains('open')) {
                if (e.key === 'Escape') closeLightbox();
                if (e.key === 'ArrowLeft') lightboxNavigate(-1);
                if (e.key === 'ArrowRight') lightboxNavigate(1);
            } else if (modal?.classList.contains('open')) {
                if (e.key === 'Escape') closeModal();
            }
        });
    }

    // --- Universal Spotlight & 3D Tilt ---
    function initSpotlightInteractions() {
        const cards = document.querySelectorAll('.spotlight-card');

        cards.forEach(card => {
            let rafId = null;
            let targetX = 50, targetY = 50;
            let currentX = 50, currentY = 50;
            let targetRotateX = 0, targetRotateY = 0;
            let currentRotateX = 0, currentRotateY = 0;

            const update = () => {
                // Smooth interpolation (Lerp)
                currentX += (targetX - currentX) * 0.15;
                currentY += (targetY - currentY) * 0.15;
                currentRotateX += (targetRotateX - currentRotateX) * 0.15;
                currentRotateY += (targetRotateY - currentRotateY) * 0.15;

                card.style.setProperty('--mouse-x', `${currentX}%`);
                card.style.setProperty('--mouse-y', `${currentY}%`);
                card.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;

                if (Math.abs(targetX - currentX) > 0.01 || Math.abs(targetRotateX - currentRotateX) > 0.01) {
                    rafId = requestAnimationFrame(update);
                } else {
                    rafId = null;
                }
            };

            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                targetX = (x / rect.width) * 100;
                targetY = (y / rect.height) * 100;

                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                targetRotateX = (y - centerY) / (rect.height / 10);
                targetRotateY = (centerX - x) / (rect.width / 10);

                if (!rafId) rafId = requestAnimationFrame(update);
            });

            card.addEventListener('mouseleave', () => {
                targetX = 50;
                targetY = 50;
                targetRotateX = 0;
                targetRotateY = 0;
                if (!rafId) rafId = requestAnimationFrame(update);
            });
        });

        // Skill Items staggered float delay
        document.querySelectorAll('.skill-item').forEach((item, index) => {
            item.style.setProperty('--i', index);
        });

        // Stats Counter
        const stats = document.querySelectorAll('.stat-num');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = parseInt(entry.target.getAttribute('data-target'));
                    animateCount(entry.target, target);
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

        stats.forEach(s => observer.observe(s));
    }


    function animateCount(el, target) {
        let current = 0;
        const duration = 2000;
        const start = performance.now();

        function step(now) {
            const elapsed = now - start;
            const progress = Math.min(elapsed / duration, 1);
            const easeProgress = progress * (2 - progress);

            current = Math.floor(easeProgress * target);
            el.textContent = current;

            if (progress < 1) {
                requestAnimationFrame(step);
            } else {
                el.textContent = target;
            }
        }
        requestAnimationFrame(step);
    }

    // --- Boot ---
    function boot() {
        if (document.fonts && document.fonts.ready) {
            document.fonts.ready.then(() => {
                initLoader();
                initHero();
                initNav();
                initSpotlightInteractions();
                initScrollReveal();
                initSmoothScroll();
                initProjectShowcase();
            });
        } else {
            setTimeout(() => {
                initLoader();
                initHero();
                initNav();
                initSpotlightInteractions();
                initScrollReveal();
                initSmoothScroll();
                initProjectShowcase();
            }, 500);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', boot);
    } else {
        boot();
    }
})();