<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Romeo ❤️ Dabo</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: black; 
    color: white;
    font-family: 'Brush Script MT', cursive;
    overflow: hidden;
  }

  .page {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0; left: 0;
    transition: transform 1s ease;
    transform: translateX(100%);
    padding: 20px;
    text-align: center;
  }
  .active { transform: translateX(0); }
  .page.prev { transform: translateX(-100%); }

  button {
    background: none;
    border: 2px solid #ff4d4d;
    padding: 12px 25px;
    margin-top: 30px;
    color: #ff4d4d;
    font-size: 18px;
    border-radius: 20px;
    cursor: pointer;
    text-shadow: 0 0 10px #ff4d4d;
    transition: 0.3s;
  }
  button:hover { background: #ff4d4d; color: white; box-shadow: 0 0 20px #ff4d4d; }

  .neon { font-size: 2.5em; font-weight: bold; color: #ff4d4d; text-shadow: 0 0 10px #ff1a1a, 0 0 20px #ff3333, 0 0 40px #ff4d4d; }

  .heart { position: absolute; color: red; font-size: 24px; animation: floatUp 6s infinite ease-in; }
  @keyframes floatUp { 0% { transform: translateY(100vh) scale(0.6); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-10vh) scale(1.2); opacity: 0; } }

  .letter { font-size: 1.4em; max-width: 80%; color: #ffcccc; text-shadow: 0 0 10px #ff6666; white-space: pre-wrap; border: 2px dashed #ff4d4d; padding: 20px; border-radius: 20px; background: rgba(255, 0, 0, 0.1); }

  .typewriter-text { display: inline-block; border-right: .15em solid #ff4d4d; overflow: hidden; white-space: pre-wrap; animation: blink-caret .75s step-end infinite; }
  @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #ff4d4d; } }

  .balloon { position: absolute; bottom: -150px; width: 50px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, white, red); animation: rise 10s infinite ease-in; }
  @keyframes rise { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-110vh) scale(1.2); opacity: 0; } }

  .fairy { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: yellow; box-shadow: 0 0 15px yellow; animation: twinkle 2s infinite alternate; }
  @keyframes twinkle { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: scale(1.2); } }

  .hugging { position: relative; width: 200px; height: 200px; margin: 50px auto; }
  .h-heart { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: red; transform: rotate(-45deg); animation: hug 4s infinite ease-in-out; box-shadow: 0 0 20px #ff4d4d; }
  .h-heart:before, .h-heart:after { content: ""; position: absolute; width: 80px; height: 80px; background: red; border-radius: 50%; }
  .h-heart:before { top: -40px; left: 0; }
  .h-heart:after { left: 40px; top: 0; }
  @keyframes hug { 0%,100% { transform: translateX(-60px) rotate(-45deg) scale(1); } 50% { transform: translateX(0) rotate(-45deg) scale(1.2); } }
  .h-heart.right { animation: hugRight 4s infinite ease-in-out; }
  @keyframes hugRight { 0%,100% { transform: translateX(60px) rotate(-45deg) scale(1); } 50% { transform: translateX(0) rotate(-45deg) scale(1.2); } }
</style>
</head>
<body>

<audio id="bgMusic" loop>
  <source src="https://www.bensound.com/bensound-music/bensound-love.mp3" type="audio/mp3">
</audio>

<div class="page active" id="page1">
  <div class="neon">Romeo ❤️ Dabo 💌</div>
  <button onclick="startMusic()">Open Surprise</button>
</div>

<div class="page" id="page2">
  <div class="letter">
    <div id="typewriter" class="typewriter-text"></div>
  </div>
  <button onclick="nextPage(3)">Next</button>
</div>

<div class="page" id="page3">
  <div class="neon">Romeo ❤️ Dabo</div>
  <div class="hugging">
    <div class="h-heart"></div>
    <div class="h-heart right"></div>
  </div>
  <div class="neon" style="font-size:1.5em;">Best wishes for our upcoming future ✨</div>
</div>

<script>
let currentPage = 1;

function startMusic() {
  document.getElementById('bgMusic').play();
  nextPage(2);
}

function nextPage(n) {
  const prevPage = document.getElementById("page"+currentPage);
  const nextP = document.getElementById("page"+n);
  prevPage.classList.remove('active');
  prevPage.classList.add('prev');
  nextP.classList.add('active');
  currentPage = n;
  if(n===2) typeWriter();
  setTimeout(() => prevPage.classList.remove('prev'), 1000);
}

function hearts() {
  const heart = document.createElement('div');
  heart.className = 'heart';
  heart.innerHTML = '❤️';
  heart.style.left = Math.random() * 100 + "vw";
  heart.style.animationDuration = (4 + Math.random()*4) + "s";
  document.body.appendChild(heart);
  setTimeout(() => heart.remove(), 6000);
}
setInterval(hearts, 500);

function balloons() {
  if (!document.getElementById("page3").classList.contains("active")) return;
  const balloon = document.createElement('div');
  balloon.className = 'balloon';
  balloon.style.left = Math.random()*90 + "vw";
  balloon.style.background = `radial-gradient(circle at 30% 30%, white, hsl(${Math.random()*360},100%,50%))`;
  balloon.style.animationDuration = (6+Math.random()*6)+"s";
  document.getElementById("page3").appendChild(balloon);
  setTimeout(() => balloon.remove(), 10000);
}
setInterval(balloons, 1000);

for(let i=0; i<20; i++){
  let light=document.createElement("div");
  light.className="fairy";
  light.style.left=(i*5)+"vw";
  light.style.animationDuration=(1+Math.random()*2)+"s";
  document.body.appendChild(light);
}

// Letter text with emotional refined line
const letterText = `"My Dear Romeo, Happy 1-Month Anniversary to us 🥰.  
It feels like just yesterday we started this journey,  
and in only one month, you’ve already become the most special part of my life 💖.  
I miss you so much when you’re not around 😔.  
I keep missing you the whole day 💌  
I love you, Romeo 💕.  
I’m excited for all the months and years ahead with you 🌸.  
This small effort can never fully describe my love for you; it’s so much more than this 💖  
I love you with all my heart, care, and respect 💖  
Always yours, Your Dabo 💕🎂 ❤️"`;

let i = 0;
function typeWriter() {
  const display = document.getElementById("typewriter");
  if(i < letterText.length) {
    display.innerHTML += letterText.charAt(i);
    i++;
    setTimeout(typeWriter, 40);
  }
}
</script>
</body>
</html>