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);
});

    particlesJS("particles-js", {
        "particles": {
            "number": {
                "value": 30,
                "density": {
                    "enable": true,
                    "value_area": 800
                }
            },
            "color": {
                "value": ["#14b8a6", "#3b82f6"] // Mimics gradient by alternating colors
            },
            "shape": {
                "type": "circle", // Matches border-radius: 50%
                "stroke": {
                    "width": 0,
                    "color": "#000000"
                }
            },
            "opacity": {
                "value": 0.9, // Matches box-shadow opacity
                "random": true,
                "anim": {
                    "enable": true, // Mimics fadeInOut animation
                    "speed": 1, // Slower for smooth fade
                    "opacity_min": 0, // Fades to fully transparent
                    "sync": false
                }
            },
            "size": {
                "value": 8, // Default size (matches 8px)
                "random": true, // Allows some particles to be larger (up to 12px)
                "anim": {
                    "enable": true,
                    "speed": 4,
                    "size_min": 4, // Smaller sizes for variation
                    "sync": false
                }
            },
            "line_linked": {
                "enable": false // No lines needed per CSS
            },
            "move": {
                "enable": true,
                "speed": 2, // Mimics float animation
                "direction": "none",
                "random": true,
                "straight": false,
                "out_mode": "out",
                "bounce": false,
                "attract": {
                    "enable": false
                }
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "repulse"
                },
                "onclick": {
                    "enable": true,
                    "mode": "push"
                },
                "resize": true
            },
            "modes": {
                "repulse": {
                    "distance": 100,
                    "duration": 0.4
                },
                "push": {
                    "particles_nb": 4
                }
            }
        },
        "retina_detect": true
    });

    // Custom logic for glow effect
    document.addEventListener('DOMContentLoaded', () => {
        const pJS = window.pJSDom[0].pJS;
        const targetElements = document.querySelectorAll('.feature-card, .nav-btn, .btn-minecraft');

        // Function to check if a particle is behind or near an element
        function checkParticleProximity() {
            targetElements.forEach(element => {
                const rect = element.getBoundingClientRect();
                let hasGlow = false;

                pJS.particles.array.forEach(particle => {
                    const particleX = particle.x + pJS.canvas.el.offsetLeft;
                    const particleY = particle.y + pJS.canvas.el.offsetTop;
                    const buffer = 20; // Buffer zone around element for glow trigger

                    // Check if particle is within or near the element's bounding box
                    if (
                        particleX >= rect.left - buffer &&
                        particleX <= rect.right + buffer &&
                        particleY >= rect.top - buffer &&
                        particleY <= rect.bottom + buffer
                    ) {
                        hasGlow = true;
                    }
                });

                // Apply or remove glow effect
                if (hasGlow) {
                    element.classList.add('glow-effect');
                    element.classList.remove('no-glow');
                } else {
                    element.classList.remove('glow-effect');
                    element.classList.add('no-glow');
                }
            });
        }

        // Run proximity check in a separate animation loop
        function animateGlowEffect() {
            checkParticleProximity();
            requestAnimationFrame(animateGlowEffect);
        }

        // Start the animation loop
        animateGlowEffect();
    });



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');
    }
});