java.js

        // Mobile menu toggle
        const menuToggle = document.getElementById('menuToggle');
        const navLinks = document.getElementById('navLinks');

        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            menuToggle.textContent = navLinks.classList.contains('active') ? '✕' : '☰';
        });

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

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Form submission handler
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Thank you for your message! The Balen Shah campaign team will get back to you soon.');
            this.reset();
        });

        // Advanced navbar behavior - hide on scroll down, show on scroll up
        let lastScroll = 0;
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            const currentScroll = window.pageYOffset;
            
            // Change background and shadow
            if (currentScroll > 100) {
                nav.style.background = 'rgba(26, 26, 26, 0.98)';
                nav.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.5)';
            } else {
                nav.style.background = 'rgba(26, 26, 26, 0.95)';
                nav.style.boxShadow = 'none';
            }
            
            // Hide/show navbar on scroll
            if (currentScroll > lastScroll && currentScroll > 80) {
                // Scrolling down - hide navbar
                nav.style.transform = 'translateY(-100%)';
                nav.style.transition = 'transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease';
            } else {
                // Scrolling up - show navbar
                nav.style.transform = 'translateY(0)';
                nav.style.transition = 'transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease';
            }
            
            lastScroll = currentScroll;
        });

        // Advanced Intersection Observer with staggered animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0) scale(1) rotate(0deg)';
                    entry.target.classList.add('animated');
                }
            });
        }, observerOptions);

        // Music cards with staggered scale and slide animation
        document.querySelectorAll('.music-card').forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(50px) scale(0.9)';
            el.style.transition = `opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.1}s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.1}s`;
            observer.observe(el);
        });

        // About cards with rotation and slide from left
        document.querySelectorAll('.about-card').forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'translateX(-80px) rotate(-3deg) scale(0.95)';
            el.style.transition = `opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.15}s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.15}s`;
            observer.observe(el);
        });

        // Achievement cards with bounce effect
        document.querySelectorAll('.achievement-card').forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(60px) scale(0.8)';
            el.style.transition = `opacity 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) ${index * 0.08}s, transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) ${index * 0.08}s`;
            observer.observe(el);
        });

        // Timeline items alternate from left and right
        document.querySelectorAll('.timeline-item').forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = index % 2 === 0 ? 'translateX(-120px) scale(0.9)' : 'translateX(120px) scale(0.9)';
            el.style.transition = `opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.2}s, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.2}s`;
            observer.observe(el);
        });

        // Stat cards with 3D flip effect
        document.querySelectorAll('.stat-card, .stat-item').forEach((el, index) => {
            el.style.opacity = '0';
            el.style.transform = 'perspective(1000px) rotateY(90deg) scale(0.8)';
            el.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
            observer.observe(el);
        });

        // Parallax scrolling effects
        let ticking = false;
        window.addEventListener('scroll', () => {
            if (!ticking) {
                window.requestAnimationFrame(() => {
                    const scrolled = window.pageYOffset;
                    
                    // Parallax background - slower movement
                    const bgAnimated = document.querySelector('.bg-animated');
                    if (bgAnimated) {
                        bgAnimated.style.transform = `translateY(${scrolled * 0.5}px)`;
                    }

                    // Hero image parallax
                    const heroImage = document.querySelector('.hero-image');
                    if (heroImage && scrolled < window.innerHeight) {
                        heroImage.style.transform = `translateY(${scrolled * 0.3}px) scale(${1 + scrolled * 0.0001})`;
                    }

                    // Section titles floating animation
                    document.querySelectorAll('.section-title').forEach(title => {
                        const rect = title.getBoundingClientRect();
                        if (rect.top < window.innerHeight && rect.bottom > 0) {
                            const distance = (window.innerHeight - rect.top) / window.innerHeight;
                            title.style.transform = `translateY(${Math.sin(distance * Math.PI) * 15}px) scale(${0.98 + distance * 0.02})`;
                        }
                    });

                    // Music cards 3D tilt effect on scroll
                    document.querySelectorAll('.music-card.animated').forEach(card => {
                        const rect = card.getBoundingClientRect();
                        if (rect.top < window.innerHeight && rect.bottom > 0) {
                            const centerY = rect.top + rect.height / 2;
                            const windowCenterY = window.innerHeight / 2;
                            const distance = (centerY - windowCenterY) / windowCenterY;
                            card.style.transform = `perspective(1000px) rotateX(${distance * 3}deg) scale(${1 - Math.abs(distance) * 0.05})`;
                        }
                    });

                    ticking = false;
                });
                ticking = true;
            }
        });

        // Animated counter for statistics
        const animateCounter = (element, target) => {
            const original = element.textContent;
            let current = 0;
            const increment = target / 50;
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    element.textContent = original;
                    clearInterval(timer);
                } else {
                    const formatted = Math.floor(current).toLocaleString();
                    element.textContent = formatted + (original.includes('+') ? '+' : '');
                }
            }, 30);
        };

        const statsObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
                    entry.target.classList.add('counted');
                    const text = entry.target.textContent;
                    const number = parseInt(text.replace(/[^0-9]/g, ''));
                    if (!isNaN(number) && number > 0) {
                        setTimeout(() => animateCounter(entry.target, number), 300);
                    }
                }
            });
        }, { threshold: 0.5 });

        document.querySelectorAll('.stat-number, .stat-item h3, .views').forEach(stat => {
            statsObserver.observe(stat);
        });

        // Magnetic button effect - buttons follow cursor
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('mousemove', (e) => {
                const rect = button.getBoundingClientRect();
                const x = e.clientX - rect.left - rect.width / 2;
                const y = e.clientY - rect.top - rect.height / 2;
                button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px) scale(1.05)`;
                button.style.transition = 'transform 0.1s ease';
            });

            button.addEventListener('mouseleave', () => {
                button.style.transform = 'translate(0, 0) scale(1)';
                button.style.transition = 'transform 0.3s ease';
            });
        });

        // Ripple effect on click
        document.querySelectorAll('.btn, .music-card, .about-card, .achievement-card, .contact-item').forEach(element => {
            element.addEventListener('click', function(e) {
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;

                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                ripple.style.position = 'absolute';
                ripple.style.borderRadius = '50%';
                ripple.style.background = 'rgba(255, 215, 0, 0.4)';
                ripple.style.transform = 'scale(0)';
                ripple.style.animation = 'ripple 0.6s ease-out';
                ripple.style.pointerEvents = 'none';
                ripple.style.zIndex = '1';

                this.style.position = 'relative';
                this.style.overflow = 'hidden';
                this.appendChild(ripple);

                setTimeout(() => ripple.remove(), 600);
            });
        });

        // Cursor trail effect (desktop only)
        if (window.innerWidth > 968) {
            const createTrail = (e) => {
                const trail = document.createElement('div');
                trail.style.position = 'fixed';
                trail.style.left = e.clientX + 'px';
                trail.style.top = e.clientY + 'px';
                trail.style.width = '8px';
                trail.style.height = '8px';
                trail.style.background = 'radial-gradient(circle, rgba(255, 215, 0, 0.8), rgba(196, 30, 58, 0.4))';
                trail.style.borderRadius = '50%';
                trail.style.pointerEvents = 'none';
                trail.style.zIndex = '9999';
                trail.style.transition = 'all 0.8s ease';
                document.body.appendChild(trail);
                
                setTimeout(() => {
                    trail.style.opacity = '0';
                    trail.style.transform = 'scale(3)';
                }, 10);
                
                setTimeout(() => trail.remove(), 800);
            };

            let trailThrottle = false;
            document.addEventListener('mousemove', (e) => {
                if (!trailThrottle) {
                    createTrail(e);
                    trailThrottle = true;
                    setTimeout(() => trailThrottle = false, 80);
                }
            });
        }

        // Mouse tracking for card glow effects
        document.querySelectorAll('.music-card, .about-card, .achievement-card').forEach(card => {
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                const x = ((e.clientX - rect.left) / rect.width) * 100;
                const y = ((e.clientY - rect.top) / rect.height) * 100;
                card.style.setProperty('--mouse-x', x + '%');
                card.style.setProperty('--mouse-y', y + '%');
            });
        });

        // Add ripple animation CSS
        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
            
            .music-card, .about-card, .achievement-card {
                transform-style: preserve-3d;
            }
            
            @media (prefers-reduced-motion: reduce) {
                *, *::before, *::after {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }
            }
        `;
        document.head.appendChild(style);