website/js/main.js

if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
    const iframe = document.getElementById('ytplayer');
    if (iframe) {
        iframe.onerror = () => {
            iframe.style.display = 'none';
            const img = document.querySelector('.hero-bg img');
            if (img) {
                img.style.display = 'block';
            }
        };
    }
}

window.addEventListener('load', () => {
    window.scrollTo(0, 0);
});

const sections = document.querySelectorAll('.section-bg');
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
            entry.target.style.transform = 'translateY(0)';
            entry.target.style.opacity = '1';
            entry.target.style.transitionDelay = `${index * 0.1}s`;
        }
    });
}, { threshold: 0.1 });

sections.forEach(section => {
    section.style.transform = 'translateY(30px)';
    section.style.opacity = '0';
    section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
    observer.observe(section);
});

function createParticle() {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    if (Math.random() > 0.6) particle.classList.add('large');
    particle.style.left = `${Math.random() * 100}%`;
    particle.style.top = `${Math.random() * 100}%`;
    particle.style.animationDelay = `${Math.random() * 8}s`;
    particle.style.animationDuration = `${8 + Math.random() * 6}s`;
    document.body.appendChild(particle);
    // Remove particle with fade-out effect
    setTimeout(() => {
        particle.classList.add('fade-out');
        // Wait for fade-out animation to complete before removing
        setTimeout(() => particle.remove(), 500);
    }, 14000);
}

// Delay particle creation to ensure background renders
setTimeout(() => {
    // Create particles frequently
    setInterval(createParticle, 75);
}, 500); // 500ms delay

function throttle(fn, wait) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= wait) {
            fn.apply(this, args);
            lastTime = now;
        }
    };
}

if (window.location.href === 'https://my-mc.link' || window.location.href === 'https://my-mc.link/') {
    const hero = document.querySelector('.hero-bg');
    if (hero) {
        const heroImg = hero.querySelector('img');
        if (heroImg) {
            window.addEventListener(
                'scroll',
                throttle(() => {
                    const scrollPosition = window.pageYOffset;
                    if (heroImg.style.display === 'block') {
                        heroImg.style.transform = `translate(-50%, calc(-50% + ${scrollPosition * 0.3}px)) scale(1.2)`;
                    }
                }, 16)
            );
        }
    }
}

const tiltCards = document.querySelectorAll('.tilt-card');
tiltCards.forEach(card => {
    card.addEventListener('mousemove', (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const tiltX = (y - centerY) / 12;
        const tiltY = (centerX - x) / 12;
        card.style.transform = `perspective(1200px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
    });
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)';
    });
});

const buttons = document.querySelectorAll('.btn-minecraft');
buttons.forEach(button => {
    button.addEventListener('mousemove', (e) => {
        const rect = button.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        button.style.setProperty('--x', `${x}px`);
        button.style.setProperty('--y', `${y}px`);
    });
});

// Hamburger Menu Toggle
const hamburger = document.querySelector('.hamburger');
const mobileNav = document.querySelector('[data-mobile-nav]');
const navLinks = mobileNav.querySelectorAll('a');

// Debounce function to prevent rapid clicks
function debounce(fn, wait) {
    let timeout;
    return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn.apply(this, args), wait);
    };
}

hamburger.addEventListener('click', debounce(() => {
    console.log('Hamburger clicked, toggling menu');
    mobileNav.classList.toggle('active');
    hamburger.classList.toggle('active');
}, 100));

navLinks.forEach(link => {
    link.addEventListener('click', () => {
        console.log('Nav link clicked, closing menu');
        mobileNav.classList.remove('active');
        hamburger.classList.remove('active');
    });
});

document.addEventListener('click', (e) => {
    if (!mobileNav.contains(e.target) && !hamburger.contains(e.target) && mobileNav.classList.contains('active')) {
        console.log('Clicked outside, closing menu');
        mobileNav.classList.remove('active');
        hamburger.classList.remove('active');
    }
});