static/js/app.js

document.addEventListener("DOMContentLoaded", () => {
    
    // Smooth Scrolling Target Management Interceptor
    const scrollLinks = document.querySelectorAll('a[href^="#"]');
    scrollLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if(targetId !== '#') {
                e.preventDefault();
                const destination = document.querySelector(targetId);
                if(destination) {
                    destination.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            }
        });
    });

    // High Performance Count Up Animation Metric Module
    const counters = document.querySelectorAll('.counter');
    const speed = 120; // Lower numbers equal faster execution intervals

    const startCounting = (counter) => {
        const updateCount = () => {
            const target = +counter.getAttribute('data-target');
            const count = +counter.innerText;
            const inc = Math.ceil(target / speed);

            if (count < target) {
                counter.innerText = count + inc;
                setTimeout(updateCount, 20);
            } else {
                counter.innerText = target.toLocaleString(); // Add formatting commas nicely
            }
        };
        updateCount();
    };

    // Intersection Observer to trigger metrics only when visually confirmed on user screen
    const observerOptions = {
        threshold: 0.3,
        rootMargin: "0px"
    };

    const metricObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                startCounting(entry.target);
                observer.unobserve(entry.target); // Kill lifecycle trigger loops
            }
        });
    }, observerOptions);

    counters.forEach(counter => metricObserver.observe(counter));
});