/*   Project: Stampsynk - Free Codes
  Author: @Saulomg2
  Description: Responsive background for the stampsynk website, particle explosions using javascript and gsap.
  Website: https://stampsynk.com
  License: Open source
  Creation date: February 2025 */

body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
            overflow: hidden;
            font-family: Arial, sans-serif;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

h1 {
  text-align: center;
  
}
        .confetti-container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }
        .confetti {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            opacity: 0;
            transform: scale(0);
        }
        .confetti:nth-child(odd) {
            background: #ff2bff; /* Rosa */
        }
        .confetti:nth-child(even) {
            background: #712fff; /* Roxo */
        }
        .confetti:nth-child(3n) {
            background: #ffd700; /* Dourado */
        }
        .confetti:nth-child(4n) {
            background: #2bffff; /* Ciano */
        }

 /*   Project: Stampsynk - Free Codes
  Author: @Saulomg2
  Description: Responsive background for the stampsynk website, particle explosions using javascript and gsap.
  Website: https://stampsynk.com
  License: Open source
  Creation date: February 2025 */   

// Função para criar explosões de papéis coloridos
        function createConfettiExplosion() {
            const container = document.getElementById('confettiContainer');

            // Criar múltiplos pedaços de papel
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                container.appendChild(confetti);

                // Posição inicial aleatória
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight;

                // Direção e velocidade aleatórias
                const angle = Math.random() * 360;
                const distance = Math.random() * 300 + 100; // Distância máxima da explosão
                const duration = Math.random() * 2 + 1; // Duração da animação

                // Animação com GSAP
                gsap.to(confetti, {
                    duration: duration,
                    x: x + Math.cos(angle) * distance,
                    y: y + Math.sin(angle) * distance,
                    rotation: Math.random() * 720 - 360, // Rotação aleatória
                    scale: Math.random() * 1.5 + 0.5, // Escala aleatória
                    opacity: 1,
                    ease: 'power2.out',
                    onComplete: () => {
                        // Remover o elemento após a animação
                        container.removeChild(confetti);
                    }
                });
            }
        }

        // Disparar a explosão ao carregar a página
        window.onload = () => {
            createConfettiExplosion();
        };

        // Opcional: Disparar a explosão ao clicar na tela
        window.addEventListener('click', createConfettiExplosion);