Happy Anniversary Card with Confetti & Candle Blowout — HTML/CSS/JS

.flame {
    width: 18px;
    height: 35px;
    background: radial-gradient(
        ellipse at bottom, 
        #ffd93d 0%, 
        #ff6b35 50%, 
        transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 0.3s ease-in-out infinite alternate;
    filter: blur(1px);
}

@keyframes flicker {
    0%   { transform: scale(1) rotate(-2deg); }
    100% { transform: scale(1.05, 0.95) rotate(2deg); }
}

.flame.blown-out {
    animation: blowOut 0.5s forwards;
}

@keyframes blowOut {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.5, 0.3) skewX(30deg); opacity: 0.5; }
    100% { transform: scale(0); opacity: 0; }
}

let candleBlown = false;

function blowCandle() {
    if (candleBlown) return;
    candleBlown = true;
    
    // Blow out the flame
    document.getElementById('flame').classList.add('blown-out');
    document.getElementById('flameGlow').classList.add('blown-out');
    
    // Update hint text
    document.getElementById('candleHint').textContent = '✨ You made a wish!';
    
    // Reveal surprise after delay
    setTimeout(() => {
        document.getElementById('surprise').classList.add('visible');
        burstConfetti(); // Another celebration!
    }, 1200);
}

setTimeout(() => {
    for (let i = 0; i < 150; i++) {
        particles.push(new Particle(
            canvas.width * (0.2 + Math.random() * 0.6),
            canvas.height * 0.3
        ));
    }
    animateConfetti();
}, 800); // Small delay for dramatic effect