script.js

// Create falling hearts
function createHearts() {
    const heartsCount = 15; // Reduced number of hearts
    const body = document.body;
    
    for (let i = 0; i < heartsCount; i++) {
        setTimeout(() => {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.innerHTML = '❤';
            
            // Random properties
            const size = Math.random() * 10 + 10; // Slightly larger hearts
            const left = Math.random() * window.innerWidth;
            const duration = Math.random() * 15 + 10; // Slower fall
            const delay = Math.random() * 5;
            const opacity = Math.random() * 0.7 + 0.3;
            const color = `hsl(${Math.random() * 30 + 330}, 100%, 65%)`; // Pink/red hues
            
            heart.style.left = `${left}px`;
            heart.style.fontSize = `${size}px`;
            heart.style.animationDuration = `${duration}s`;
            heart.style.animationDelay = `${delay}s`;
            heart.style.opacity = opacity;
            heart.style.color = color;
            
            body.appendChild(heart);
            
            // Remove heart after animation completes
            setTimeout(() => {
                heart.remove();
            }, duration * 1000);
        }, i * 500); // Slower creation
    }
    
    // Keep creating hearts
    setInterval(createHearts, 20000);
}
// Add floating animation to elements
function addFloatingEffects() {
    const floatingElements = document.querySelectorAll('h1, h2, h3, .countdown-box');
    floatingElements.forEach(el => {
        el.style.animation = 'float 3s ease-in-out infinite';
    });

    const pulseElements = document.querySelectorAll('button, a[href="#rsvp"], a[href="#details"]');
    pulseElements.forEach(el => {
        el.style.animation = 'pulse 2s ease-in-out infinite';
    });
}
// Enhanced 3D Effects for Images
function init3DEffects() {
    const images = document.querySelectorAll('img');
    
    images.forEach(img => {
        img.addEventListener('mousemove', (e) => {
            const rect = img.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 = ((centerY - y) / centerY) * 10;
            const rotateY = ((x - centerX) / centerX) * 10;
            
            img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;
        });

        img.addEventListener('mouseleave', () => {
            img.style.transform = 'rotateX(0) rotateY(0) translateZ(0)';
        });
    });
}
// Intersection Observer for section animations
document.addEventListener('DOMContentLoaded', () => {
    createHearts();
    addFloatingEffects();
    init3DEffects();
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('show');
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1
    });

    sections.forEach(section => {
        observer.observe(section);
    });

    // Countdown timer
    const weddingDate = new Date('June 15, 2024 16:00:00').getTime();
    
    const updateCountdown = () => {
        const now = new Date().getTime();
        const distance = weddingDate - now;
        
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        document.getElementById('days').textContent = days;
        document.getElementById('hours').textContent = hours;
        document.getElementById('minutes').textContent = minutes;
        document.getElementById('seconds').textContent = seconds;
    };
    
    // Create countdown element if it doesn't exist
    if (!document.querySelector('.countdown-container')) {
        const heroSection = document.querySelector('section.relative');
        const countdownDiv = document.createElement('div');
        countdownDiv.className = 'countdown-container';
        countdownDiv.innerHTML = `
            <div class="countdown-box">
                <div id="days" class="countdown-number">0</div>
                <div class="countdown-label">Days</div>
            </div>
            <div class="countdown-box">
                <div id="hours" class="countdown-number">0</div>
                <div class="countdown-label">Hours</div>
            </div>
            <div class="countdown-box">
                <div id="minutes" class="countdown-number">0</div>
                <div class="countdown-label">Minutes</div>
            </div>
            <div class="countdown-box">
                <div id="seconds" class="countdown-number">0</div>
                <div class="countdown-label">Seconds</div>
            </div>
        `;
        heroSection.appendChild(countdownDiv);
    }
    
    updateCountdown();
    setInterval(updateCountdown, 1000);

    // Form submission
    const rsvpForm = document.querySelector('form');
    if (rsvpForm) {
        rsvpForm.addEventListener('submit', (e) => {
            e.preventDefault();
            alert('Thank you for your RSVP! We look forward to celebrating with you.');
            rsvpForm.reset();
        });
    }
});