script.js

// --- Floating Emojis Global Interaction ---
const emojis = ['🌸', '✨', '💖', '🥺', '💍', '😡'];
const emojiContainer = document.getElementById('emoji-container');

function createEmoji() {
    const el = document.createElement('div');
    el.className = 'floating-emoji';
    el.innerText = emojis[Math.floor(Math.random() * emojis.length)];
    
    // Randomize initial horizontal position
    el.style.left = (Math.random() * 90 + 5) + 'vw';
    
    // Randomize size
    const size = Math.random() * 24 + 16; // 16px to 40px
    el.style.fontSize = size + 'px';
    
    // Randomize duration (5s to 12s)
    const duration = Math.random() * 7 + 5;
    el.style.animationDuration = duration + 's';
    
    // Randomize slight wiggle via animation delay
    el.style.animationDelay = (Math.random() * 0.5) + 's';
    
    emojiContainer.appendChild(el);
    
    // Cleanup
    setTimeout(() => {
        if (emojiContainer.contains(el)) {
            el.remove();
        }
    }, (duration + 1) * 1000);
}

// Generate an emoji periodically
setInterval(createEmoji, 450);
// Generate a few initially
for(let i=0; i<5; i++) setTimeout(createEmoji, i * 200);


// --- Page State Management ---
function nextPage(pageNumber) {
    const container = document.getElementById('glass-container');
    
    // Create a slight pulse effect on the container
    container.style.transform = 'scale(0.98)';
    
    // Hide active pages
    document.querySelectorAll('.page-content').forEach(page => {
        if (page.classList.contains('active')) {
            page.classList.remove('active');
            
            setTimeout(() => {
                page.classList.add('hidden');
                page.style.display = 'none'; // Ensure layout collapses
                
                // Show requested page after previous hides
                const next = document.getElementById(`page-${pageNumber}`);
                next.classList.remove('hidden');
                next.style.display = 'flex';
                
                // Allow browser redraw before adding active class for animation
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        next.classList.add('active');
                        container.style.transform = 'scale(1)';
                    });
                });
                
            }, 600); // Matches CSS transition duration
        }
    });
}


// --- Escape Button Logic ('No' Button) ---
const btnNo = document.getElementById('btn-no');

// Move button away when cursor approaches
btnNo.addEventListener('mouseenter', escapeCursor);
// Also trigger on touch devices to prevent tapping
btnNo.addEventListener('touchstart', (e) => {
    e.preventDefault();
    escapeCursor(e);
}, { passive: false });

function escapeCursor(e) {
    const btn = btnNo;

    // If it hasn't been detached from the normal document flow yet, detach it
    if (btn.style.position !== 'fixed') {
        const rect = btn.getBoundingClientRect();
        btn.style.position = 'fixed';
        btn.style.left = rect.left + 'px';
        btn.style.top = rect.top + 'px';
        btn.style.margin = '0'; // Remove any margins
        document.body.appendChild(btn); // Move to body context to fly anywhere
        
        // Force reflow
        btn.getBoundingClientRect();
    }
    
    const btnRect = btn.getBoundingClientRect();
    const btnCenterX = btnRect.left + btnRect.width / 2;
    const btnCenterY = btnRect.top + btnRect.height / 2;
    
    let cursorX = e.clientX || (e.touches && e.touches[0].clientX) || btnCenterX;
    let cursorY = e.clientY || (e.touches && e.touches[0].clientY) || btnCenterY;
    
    // Calculate direction vector from cursor TO button
    let dirX = btnCenterX - cursorX;
    let dirY = btnCenterY - cursorY;
    
    // If exact same spot (rare), pick random direction
    const magnitude = Math.sqrt(dirX * dirX + dirY * dirY);
    if (magnitude < 1) {
        dirX = (Math.random() - 0.5) * 2;
        dirY = (Math.random() - 0.5) * 2;
    } else {
        dirX /= magnitude;
        dirY /= magnitude;
    }
    
    const moveDist = 200; // Jump distance in pixels
    let newX = btnRect.left + dirX * moveDist;
    let newY = btnRect.top + dirY * moveDist;
    
    // Boundary checks (keep fully inside viewport)
    const maxW = window.innerWidth - btnRect.width - 20;
    const maxH = window.innerHeight - btnRect.height - 20;
    
    // Bounce inward if hitting edge
    if (newX < 20) newX = Math.random() * 100 + 50;
    if (newX > maxW) newX = maxW - (Math.random() * 100 + 50);
    if (newY < 20) newY = Math.random() * 100 + 50;
    if (newY > maxH) newY = maxH - (Math.random() * 100 + 50);
    
    btn.style.left = newX + 'px';
    btn.style.top = newY + 'px';
}


// --- Accept Proposal Logic ---
function acceptProposal() {
    // 1. Massive Confetti Explosion
    const duration = 8 * 1000;
    const animationEnd = Date.now() + duration;
    const defaults = { startVelocity: 45, spread: 360, ticks: 100, zIndex: 1000 };

    function randomInRange(min, max) {
        return Math.random() * (max - min) + min;
    }

    const interval = setInterval(function() {
        const timeLeft = animationEnd - Date.now();

        if (timeLeft <= 0) {
            return clearInterval(interval);
        }

        const particleCount = 80 * (timeLeft / duration);
        // Fire from both bottom edges
        confetti(Object.assign({}, defaults, { 
            particleCount, 
            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } 
        }));
        confetti(Object.assign({}, defaults, { 
            particleCount, 
            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } 
        }));
    }, 250);

    // Initial blast
    confetti({
        particleCount: 200,
        spread: 120,
        origin: { y: 0.6 },
        colors: ['#ffe4e6', '#fda4af', '#f43f5e', '#e11d48']
    });

    // 2. Show Celebration Overlay
    const overlay = document.getElementById('celebration-overlay');
    overlay.classList.remove('hidden');
    overlay.classList.add('flex');
    
    // Trigger fade in
    setTimeout(() => {
        overlay.classList.add('opacity-100');
        overlay.classList.remove('opacity-0');
        
        // Add heartbeat animation to content
        document.getElementById('celebration-content').classList.add('heart-beat');
    }, 50);
}