script.js

// Efectos interactivos para la invitación

document.addEventListener('DOMContentLoaded', function() {
    // Formatear y mostrar la fecha de hoy a las 6 PM
    const eventDateElement = document.getElementById('event-date');
    if (eventDateElement) {
        const today = new Date();
        const options = { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        };
        const dateString = today.toLocaleDateString('es-ES', options);
        eventDateElement.innerHTML = dateString + '<br>6:00 PM';
    }
    
    const card = document.querySelector('.invitation-card');
    const detailItems = document.querySelectorAll('.detail-item');
    
    // Efecto parallax suave al mover el mouse
    document.addEventListener('mousemove', function(e) {
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;
        
        const moveX = (x - 0.5) * 5;
        const moveY = (y - 0.5) * 5;
        
        card.style.transform = `translateY(-3px) rotateX(${moveY * 0.2}deg) rotateY(${moveX * 0.2}deg)`;
    });
    
    // Efecto de entrada para los elementos de detalle
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateX(0)';
                }, index * 100);
            }
        });
    }, observerOptions);
    
    detailItems.forEach(item => {
        observer.observe(item);
    });
    
    // Efecto de click en la tarjeta
    card.addEventListener('click', function() {
        card.style.transform = 'scale(0.98)';
        setTimeout(() => {
            card.style.transform = '';
        }, 200);
    });
    
    // Animación de partículas al hacer click
    card.addEventListener('click', function(e) {
        createParticle(e.clientX, e.clientY);
    });
    
    function createParticle(x, y) {
        const particle = document.createElement('div');
        particle.style.position = 'fixed';
        particle.style.left = x + 'px';
        particle.style.top = y + 'px';
        particle.style.width = '4px';
        particle.style.height = '4px';
        particle.style.background = '#60a5fa';
        particle.style.borderRadius = '50%';
        particle.style.pointerEvents = 'none';
        particle.style.zIndex = '9999';
        particle.style.opacity = '0.6';
        
        document.body.appendChild(particle);
        
        const angle = Math.random() * Math.PI * 2;
        const velocity = 50 + Math.random() * 50;
        const vx = Math.cos(angle) * velocity;
        const vy = Math.sin(angle) * velocity;
        
        let posX = x;
        let posY = y;
        let opacity = 0.8;
        
        function animate() {
            posX += vx * 0.1;
            posY += vy * 0.1;
            opacity -= 0.02;
            
            particle.style.left = posX + 'px';
            particle.style.top = posY + 'px';
            particle.style.opacity = opacity;
            
            if (opacity > 0) {
                requestAnimationFrame(animate);
            } else {
                particle.remove();
            }
        }
        
        animate();
    }
    
    // Efecto de brillo sutil en el título
    const mainTitle = document.querySelector('.main-title');
    setInterval(() => {
        mainTitle.style.textShadow = `
            1px 1px 2px rgba(0, 0, 0, 0.05),
            0 0 15px rgba(59, 130, 246, 0.3)
        `;
        setTimeout(() => {
            mainTitle.style.textShadow = '1px 1px 2px rgba(0, 0, 0, 0.05)';
        }, 800);
    }, 4000);
});