// Loading screen functionality
document.addEventListener('DOMContentLoaded', function() {
    const loadingScreen = document.getElementById('loading-screen');
    const mainContent = document.getElementById('main-content');

    // Minimum loading time (in milliseconds) to show the loading screen
    const minLoadingTime = 2000;
    const startTime = Date.now();

    // Function to hide loading screen and show main content
    function hideLoadingScreen() {
        const elapsedTime = Date.now() - startTime;
        const remainingTime = Math.max(0, minLoadingTime - elapsedTime);

        setTimeout(() => {
            loadingScreen.classList.add('fade-out');
            mainContent.classList.add('visible');

            // Remove loading screen from DOM after transition
            setTimeout(() => {
                loadingScreen.style.display = 'none';
            }, 500);
        }, remainingTime);
    }

    // Hide loading screen when page is fully loaded
    if (document.readyState === 'complete') {
        hideLoadingScreen();
    } else {
        window.addEventListener('load', hideLoadingScreen);
    }

    // Add floating particles animation to background
    createFloatingParticles();
});

// Create floating particles for background effect
function createFloatingParticles() {
    const mainContent = document.getElementById('main-content');
    const particleCount = 20;

    for (let i = 0; i < particleCount; i++) {
        createParticle(mainContent);
    }
}

function createParticle(container) {
    const particle = document.createElement('div');
    particle.className = 'particle';

    // Random size between 2px and 6px
    const size = Math.random() * 4 + 2;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;

    // Random position
    particle.style.left = `${Math.random() * 100}%`;
    particle.style.top = `${Math.random() * 100}%`;

    // Random animation duration between 10s and 30s
    const duration = Math.random() * 20 + 10;
    particle.style.animationDuration = `${duration}s`;

    // Random delay
    const delay = Math.random() * 5;
    particle.style.animationDelay = `${delay}s`;

    // Random opacity
    const opacity = Math.random() * 0.3 + 0.1;
    particle.style.opacity = opacity;

    // Apply styles
    particle.style.position = 'absolute';
    particle.style.borderRadius = '50%';
    particle.style.background = 'rgba(255, 255, 255, 0.5)';
    particle.style.pointerEvents = 'none';
    particle.style.zIndex = '0';
    particle.style.animation = 'float ' + particle.style.animationDuration + ' ease-in-out infinite';

    container.appendChild(particle);
}

// Add CSS animation for particles
const style = document.createElement('style');
style.textContent = `
    @keyframes float {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg);
        }
        25% {
            transform: translate(10px, -20px) rotate(90deg);
        }
        50% {
            transform: translate(-15px, -10px) rotate(180deg);
        }
        75% {
            transform: translate(-10px, 20px) rotate(270deg);
        }
    }

    .particle {
        filter: blur(1px);
    }
`;
document.head.appendChild(style);

// Add smooth scroll behavior for potential internal 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'
            });
        }
    });
});

// Add interactive hover effect to cards
document.querySelectorAll('.gateway-card').forEach(card => {
    card.addEventListener('mousemove', function(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 rotateX = (y - centerY) / 10;
        const rotateY = (centerX - x) / 10;

        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
    });

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