script.js

document.addEventListener('DOMContentLoaded', function() {
    const yesBtn = document.getElementById('yesBtn');
    const noBtn = document.getElementById('noBtn');
    const container = document.querySelector('.container');
    const scrollIndicator = document.querySelector('.scroll-indicator');
    const lovePreview = document.getElementById('lovePreview');
    
    // Scroll indicator functionality
    let scrollTimeout;
    
    // Handle scroll indicator click
    scrollIndicator.addEventListener('click', function() {
        showLovePreview();
    });
    
    // Show love preview on scroll
    window.addEventListener('scroll', function() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(function() {
            if (window.scrollY > 50) {
                showLovePreview();
            }
        }, 100);
    });
    
    function showLovePreview() {
        lovePreview.classList.add('visible');
        scrollIndicator.style.opacity = '0';
        
        // Hide scroll indicator after preview shows
        setTimeout(() => {
            scrollIndicator.style.display = 'none';
        }, 500);
    }
    
    // Make NO button run away on hover
    noBtn.addEventListener('mouseenter', function() {
        moveNoButton();
    });
    
    // Also make NO button run away on touch for mobile
    noBtn.addEventListener('touchstart', function(e) {
        e.preventDefault();
        moveNoButton();
    });
    
    function moveNoButton() {
        const containerRect = container.getBoundingClientRect();
        const buttonRect = noBtn.getBoundingClientRect();
        
        // Calculate safe boundaries
        const maxX = containerRect.width - buttonRect.width - 40;
        const maxY = containerRect.height - buttonRect.height - 40;
        
        // Generate random position within bounds
        const randomX = Math.random() * maxX;
        const randomY = Math.random() * maxY;
        
        // Apply random position
        noBtn.style.position = 'absolute';
        noBtn.style.left = randomX + 'px';
        noBtn.style.top = randomY + 'px';
        noBtn.style.transition = 'all 0.3s ease';
        
        // Add a little fun animation
        noBtn.style.transform = `rotate(${Math.random() * 20 - 10}deg) scale(${0.9 + Math.random() * 0.2})`;
        
        // Reset transform after animation
        setTimeout(() => {
            noBtn.style.transform = 'rotate(0deg) scale(1)';
        }, 300);
    }
    
    // Handle YES button click - transition to celebration
    yesBtn.addEventListener('click', function() {
        // Create celebration effect
        createCelebrationEffect();
        
        // Transition to love page after a short delay
        setTimeout(() => {
            window.location.href = 'love.html';
        }, 1500);
    });
    
    function createCelebrationEffect() {
        // Create multiple hearts that burst from the button
        for (let i = 0; i < 20; i++) {
            setTimeout(() => {
                createBurstHeart();
            }, i * 50);
        }
        
        // Add celebration class to button
        yesBtn.classList.add('celebrating');
        yesBtn.textContent = 'YESSS! ';
    }
    
    function createBurstHeart() {
        const heart = document.createElement('div');
        heart.innerHTML = '';
        heart.style.position = 'fixed';
        heart.style.fontSize = Math.random() * 20 + 15 + 'px';
        heart.style.left = '50%';
        heart.style.top = '50%';
        heart.style.transform = 'translate(-50%, -50%)';
        heart.style.pointerEvents = 'none';
        heart.style.zIndex = '9999';
        heart.style.animation = `burstHeart ${Math.random() * 2 + 1}s ease-out forwards`;
        
        document.body.appendChild(heart);
        
        // Remove heart after animation
        setTimeout(() => {
            heart.remove();
        }, 3000);
    }
    
    // Add burst heart animation dynamically
    const style = document.createElement('style');
    style.textContent = `
        @keyframes burstHeart {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: translate(calc(-50% + ${Math.random() * 400 - 200}px), calc(-50% + ${Math.random() * 400 - 200}px)) scale(1.5) rotate(${Math.random() * 360}deg);
                opacity: 1;
            }
            100% {
                transform: translate(calc(-50% + ${Math.random() * 600 - 300}px), calc(-50% + ${Math.random() * 600 - 300}px)) scale(0.5) rotate(${Math.random() * 720}deg);
                opacity: 0;
            }
        }
        
        .celebrating {
            animation: celebrateButton 0.5s ease-in-out infinite alternate !important;
        }
        
        @keyframes celebrateButton {
            from {
                transform: scale(1) rotate(-5deg);
                background: linear-gradient(135deg, #ff6b9d, #e91e63);
            }
            to {
                transform: scale(1.1) rotate(5deg);
                background: linear-gradient(135deg, #e91e63, #ff6b9d);
            }
        }
    `;
    document.head.appendChild(style);
    
    // Add some ambient floating hearts to the landing page
    createAmbientHearts();
});

function createAmbientHearts() {
    // Create a few ambient floating hearts
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            createAmbientHeart();
        }, i * 2000);
    }
    
    // Continue creating ambient hearts
    setInterval(() => {
        createAmbientHeart();
    }, 3000);
}

function createAmbientHeart() {
    const heart = document.createElement('div');
    heart.innerHTML = [' ', ' ', ' ', ' ', ' '][Math.floor(Math.random() * 5)];
    heart.style.position = 'fixed';
    heart.style.fontSize = Math.random() * 15 + 10 + 'px';
    heart.style.left = Math.random() * window.innerWidth + 'px';
    heart.style.bottom = '-50px';
    heart.style.pointerEvents = 'none';
    heart.style.zIndex = '1';
    heart.style.animation = `ambientFloat ${Math.random() * 5 + 8}s linear forwards`;
    heart.style.opacity = Math.random() * 0.3 + 0.2;
    
    document.body.appendChild(heart);
    
    // Remove heart after animation
    setTimeout(() => {
        heart.remove();
    }, 13000);
}

// Add ambient float animation
const ambientStyle = document.createElement('style');
ambientStyle.textContent = `
    @keyframes ambientFloat {
        0% {
            bottom: -50px;
            transform: translateX(0) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 0.5;
        }
        90% {
            opacity: 0.5;
        }
        100% {
            bottom: 110vh;
            transform: translateX(${Math.random() * 200 - 100}px) rotate(360deg);
            opacity: 0;
        }
    }
`;
document.head.appendChild(ambientStyle);