Build an Interactive Birthday Surprise Page with Confetti & Music

<div id="stage1" class="stage active">
    <div class="gift-box" onclick="openGift()">🎁</div>
    <p>Tap the gift to open it!</p>
</div>

<div id="stage2" class="stage">
    <h1>Happy Birthday!</h1>
    <p>Your personalized message here...</p>
    <button onclick="celebrate()">🎉 Celebrate!</button>
</div>

<div id="stage3" class="stage">
    <!-- Confetti + Music celebration -->
</div>

.stage {
    display: none;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stage.active {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

function openGift() {
    // Animate gift box opening
    document.querySelector('.gift-box').classList.add('opening');
    
    setTimeout(() => {
        switchStage('stage1', 'stage2');
    }, 1000);
}

function switchStage(from, to) {
    document.getElementById(from).classList.remove('active');
    setTimeout(() => {
        document.getElementById(to).classList.add('active');
    }, 300);
}

<audio id="bgMusic" loop>
    <source src="birthday-song.mp3" type="audio/mpeg">
</audio>

function celebrate() {
    switchStage('stage2', 'stage3');
    
    // Start music
    const music = document.getElementById('bgMusic');
    music.volume = 0.5;
    music.play().catch(() => {
        // Autoplay blocked — show play button
        showMusicButton();
    });
    
    // Launch confetti
    burstConfetti();
}