script.js

/* 
   FINTECH LANDING PAGE SCRIPTS
   Handles: Scroll Reveal Animations & Mobile Menu Toggle
*/

document.addEventListener('DOMContentLoaded', () => {
    
    // --- 1. Scroll Reveal Animation Logic ---
    const revealElements = document.querySelectorAll('.reveal-on-scroll');
    
    const revealOnScroll = () => {
        const windowHeight = window.innerHeight;
        const elementVisible = 100; // Pixels before bottom of screen to trigger

        revealElements.forEach((element) => {
            const elementTop = element.getBoundingClientRect().top;
            
            if (elementTop < windowHeight - elementVisible) {
                element.classList.add('visible');
            }
        });
    };

    // Trigger once on load in case elements are already in view
    revealOnScroll();
    
    // Listen for scroll events
    window.addEventListener('scroll', revealOnScroll);


    // --- 2. Mobile Navigation Toggle ---
    const menuBtn = document.getElementById('mobileMenuBtn');
    const navLinks = document.getElementById('navLinks');

    menuBtn.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        
        // Optional: Change icon from hamburger to X
        if (navLinks.classList.contains('active')) {
            menuBtn.textContent = '✕';
        } else {
            menuBtn.textContent = '☰';
        }
    });

    // Close mobile menu when a link is clicked
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', () => {
            navLinks.classList.remove('active');
            menuBtn.textContent = '☰';
        });
    });


    // --- 3. Navbar Background on Scroll ---
    // Add a subtle background when scrolling down
    const navbar = document.querySelector('.navbar');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
        } else {
            navbar.style.boxShadow = 'none';
        }
    });
});