script.js

document.addEventListener('DOMContentLoaded', () => {
    // 1. Natural Typing Effect
    const heroTitle = document.getElementById('hero-title');
    if (heroTitle) {
        const text = heroTitle.innerText;
        heroTitle.innerText = '';
        
        let i = 0;
        function typeEffect() {
            if (i < text.length) {
                heroTitle.innerText += text.charAt(i);
                i++;
                // Natural variance in typing speed
                const delay = Math.random() * 50 + 50; 
                setTimeout(typeEffect, delay);
            }
        }
        
        // Start effect after terminal simulation finishes
        setTimeout(typeEffect, 3500);
    }

    // 2. Terminal Simulation Sequence
    const delayedElements = document.querySelectorAll('.terminal-body .delayed');
    delayedElements.forEach((el, index) => {
        setTimeout(() => {
            el.style.opacity = '1';
        }, (index + 1) * 500);
    });

    // 3. Card Mouse-Tracking Glow
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            card.style.setProperty('--mouse-x', `${x}px`);
            card.style.setProperty('--mouse-y', `${y}px`);
        });
    });

    // 4. Neural Background Animation
    const neuralBg = document.getElementById('neural-bg');
    if (neuralBg) {
        const createParticle = () => {
            if (document.hidden) return; // Don't create if tab is inactive
            
            const particle = document.createElement('div');
            particle.style.position = 'absolute';
            particle.style.width = '2px';
            particle.style.height = '2px';
            particle.style.background = 'var(--accent-color)';
            particle.style.borderRadius = '50%';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.opacity = Math.random() * 0.3;
            particle.style.transition = 'all 8s cubic-bezier(0.4, 0, 0.2, 1)';
            
            neuralBg.appendChild(particle);
            
            // Trigger animation
            setTimeout(() => {
                particle.style.left = (parseFloat(particle.style.left) + (Math.random() - 0.5) * 20) + '%';
                particle.style.top = (parseFloat(particle.style.top) + (Math.random() - 0.5) * 20) + '%';
                particle.style.opacity = '0';
            }, 50);

            // Clean up
            setTimeout(() => {
                particle.remove();
            }, 8000);
        };

        // Create particles less frequently for performance
        setInterval(createParticle, 400);

        // Subtle parallax on mouse move
        window.addEventListener('mousemove', (e) => {
            const x = (e.clientX / window.innerWidth - 0.5) * 20;
            const y = (e.clientY / window.innerHeight - 0.5) * 20;
            neuralBg.style.transform = `translate(${x}px, ${y}px)`;
        });
    }

    // 5. Mobile Menu Toggle
    const mobileMenu = document.getElementById('mobile-menu');
    const navLinks = document.querySelector('.nav-links');

    if (mobileMenu) {
        mobileMenu.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            const spans = mobileMenu.querySelectorAll('span');
            spans[0].style.transform = navLinks.classList.contains('active') ? 'rotate(45deg) translate(5px, 5px)' : 'none';
            spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1';
            spans[2].style.transform = navLinks.classList.contains('active') ? 'rotate(-45deg) translate(7px, -6px)' : 'none';
        });
    }

    // Close menu on link click
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', () => {
            if (navLinks.classList.contains('active')) {
                navLinks.classList.remove('active');
                const spans = mobileMenu.querySelectorAll('span');
                spans.forEach(span => span.style.transform = 'none');
                spans[1].style.opacity = '1';
            }
        });
    });

    // 6. Header Scroll Effect
    const header = document.querySelector('header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.style.background = 'rgba(2, 6, 23, 0.95)';
            header.style.height = '70px';
            header.style.boxShadow = '0 10px 30px rgba(0,0,0,0.5)';
        } else {
            header.style.background = 'rgba(2, 6, 23, 0.8)';
            header.style.height = '80px';
            header.style.boxShadow = 'none';
        }
    });

    // 7. Intersection Observer for Reveal
    const revealCallback = (entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
            }
        });
    };

    const revealObserver = new IntersectionObserver(revealCallback, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });

    document.querySelectorAll('.reveal').forEach(el => {
        revealObserver.observe(el);
    });

    // 8. Back to Top
    const backToTopButton = document.getElementById('back-to-top');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 500) {
            backToTopButton.style.display = 'flex';
            setTimeout(() => backToTopButton.style.opacity = '1', 10);
        } else {
            backToTopButton.style.opacity = '0';
            setTimeout(() => {
                if (backToTopButton.style.opacity === '0') {
                    backToTopButton.style.display = 'none';
                }
            }, 300);
        }
    });

    backToTopButton.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});