script.js

// Count up animation
function animateValue(el, start, end, duration) {
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        el.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString();
        if (progress < 1) {
            window.requestAnimationFrame(step);
        }
    };
    window.requestAnimationFrame(step);
}

// Enhanced DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
// Check for saved theme preference or use preferred color scheme
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.classList.add(savedTheme);
    
    // Set up theme toggle button
    const themeToggle = document.querySelector('.theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            const html = document.documentElement;
            const isDark = html.classList.contains('dark');
            
            if (isDark) {
                html.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            } else {
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
            
            feather.replace();
        });
    }
    // Animate balance count-up
    const balanceEl = document.querySelector('.count-up');
    if (balanceEl) {
        const target = parseInt(balanceEl.dataset.target);
        animateValue(balanceEl, 0, target, 2000);
    }

    // Stagger transaction animations
    document.querySelectorAll('.transaction-item').forEach((item, i) => {
        setTimeout(() => {
            item.style.opacity = '1';
        }, i * 150);
    });

    // Add hover effects to cards
    const cards = document.querySelectorAll('.transaction-item, .quick-action');
    cards.forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.classList.add('shadow-lg');
        });
        card.addEventListener('mouseleave', () => {
            card.classList.remove('shadow-lg');
        });
    });
});