// Mobile Menu Functionality
document.addEventListener('DOMContentLoaded', function () {
    const mobileFab = document.getElementById('mobile-fab');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileFab && mobileMenu) {
        // Toggle menu on FAB click
        mobileFab.addEventListener('click', function () {
            this.classList.toggle('active');
            mobileMenu.classList.toggle('active');
        });

        // Add staggered animation to menu items
        const menuItems = document.querySelectorAll('.mobile-menu-item');
        menuItems.forEach((item, index) => {
            item.style.transitionDelay = `${index * 0.05}s`;
        });

        // Close menu when clicking outside
        document.addEventListener('click', function (e) {
            if (mobileMenu.classList.contains('active') &&
                !mobileFab.contains(e.target) &&
                !mobileMenu.contains(e.target)) {
                mobileFab.classList.remove('active');
                mobileMenu.classList.remove('active');
            }
        });

        // Add hover effect to menu items
        menuItems.forEach(item => {
            item.addEventListener('mouseenter', function () {
                this.style.transform = 'translateX(-5px)';
            });

            item.addEventListener('mouseleave', function () {
                this.style.transform = '';
            });
        });
    }
});