<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy 24 ❤️</title>
<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Segoe UI', sans-serif;
}

body, html{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
    background-size: 300% 300%;
    animation: gradientBG 15s ease infinite;
    position: relative;
}

/* Gradient animation */
@keyframes gradientBG {
    0% {background-position:0% 50%;}
    50% {background-position:100% 50%;}
    100% {background-position:0% 50%;}
}

/* Floating hearts */
@keyframes floatHearts{
    0% { transform: translateY(100vh) scale(0.5) rotate(0deg); opacity:0; }
    50% { opacity:1; }
    100% { transform: translateY(-10vh) scale(1.2) rotate(360deg); opacity:0; }
}

.heart{
    position:absolute;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.6);
    transform: rotate(45deg);
    animation: floatHearts linear infinite;
    border-radius: 5px;
    z-index:10; /* Hearts behind cards */
}

.heart:before,
.heart:after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background: rgba(255,255,255,0.6);
    border-radius:50%;
}

.heart:before{ top:-10px; left:0; }
.heart:after{ left:-10px; top:0; }

/* Cards */
.card-container{
    width:350px;
    max-width:90%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:10;
}

.card{
    width:100%;
    max-width:350px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(5px);
    padding:30px 20px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    text-align:center;

    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    opacity:1;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.card.hidden{
    opacity:0;
    transform:translateX(100%);
}

.card img{
    width:110px;
    height:110px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #ff6f91;
    margin-bottom:15px;
}

.card h2{
    color:#ff4d6d;
    margin-bottom:15px;
}

.card p{
    font-size:15px;
    color:#555;
    margin-bottom:25px;
    line-height:1.6;
}

button{
    padding:10px 25px;
    border:none;
    border-radius:25px;
    background:#ff4d6d;
    color:white;
    font-size:14px;
    cursor:pointer;
    transition:0.3s;
}

button:hover{
    background:#e63956;
}
</style>
</head>
<body>

<div class="card-container">

    <!-- CARD 1 -->
    <div class="card" id="card1">
        <img src="img/HIS2.jpg" alt="His Photo">
        <h2>Happy Birthday Baby ❤️</h2>
        <p>May this new age bring you favor, growth, and unstoppable success. May your path shine brighter.</p>
        <button onclick="nextCard(1)">Amen</button>
    </div>

    <!-- CARD 2 -->
    <div class="card hidden" id="card2">
        <img src="img/HIS3.jpg" alt="His Photo">
        <h2>More Wins ✨</h2>
        <p>May your dreams align with opportunities. May money, peace, and clarity locate you this year.</p>
        <button onclick="nextCard(2)">Amen</button>
    </div>

    <!-- CARD 3 -->
    <div class="card hidden" id="card3">
        <img src="img/HIS1.jpg" alt="His Photo">
        <h2>I Believe In You 💕</h2>
        <p>I see your potential. I see your strength. This year will announce you to bigger rooms.</p>
        <button onclick="nextCard(3)">Amen</button>
    </div>

    <!-- FINAL CARD -->
    <div class="card hidden" id="card4">
        <img src="img/HIS4.jpg" alt="His Photo">
        <h2>From My Heart 🤍</h2>
        <p>I built this website for you as a symbol of my support. Not just for today, but for your growth ahead. I’m rooting for you always.I love U IKECHUKWU</p>
        <button onclick="openLanding()">Open</button>
    </div>

</div>

<!-- Floating hearts -->
<script>
for(let i=0;i<40;i++){
    let heart = document.createElement('div');
    heart.classList.add('heart');
    heart.style.left = Math.random()*100 + 'vw';
    heart.style.width = heart.style.height = (10+Math.random()*20) + 'px';
    heart.style.animationDuration = (5+Math.random()*10) + 's';
    heart.style.animationDelay = Math.random()*5 + 's';
    document.body.appendChild(heart);
}

// Card navigation
function nextCard(current){
    document.getElementById("card"+current).classList.add("hidden");
    document.getElementById("card"+(current+1)).classList.remove("hidden");
}

function openLanding(){
    window.location.href = "indexx.php";
}
</script>

</body>
</html>