script.js

// Elements
const envelope = document.getElementById("envelope-container");
const letter = document.getElementById("letter-container");
const heartBtn = document.querySelector(".no-btn");
const nextBtn = document.querySelector(".btn[alt='Yes']");
const title = document.getElementById("letter-title");
const catImg = document.getElementById("letter-cat");
const buttons = document.getElementById("letter-buttons");
const finalText = document.getElementById("final-text");


// Open envelope
envelope.addEventListener("click", () => {
    envelope.style.display = "none";
    letter.style.display = "flex";
    setTimeout(() => {
        document.querySelector(".letter-window").classList.add("open");
    }, 50);
});


// heart button runs away
heartBtn.addEventListener("mouseover", () => {
    const distance = 200;
    const angle = Math.random() * Math.PI * 2;
    const moveX = Math.cos(angle) * distance;
    const moveY = Math.sin(angle) * distance;
    heartBtn.style.transition = "transform 0.3s ease";
    heartBtn.style.transform = `translate(${moveX}px, ${moveY}px)`;
});


// next clicked → party mode
nextBtn.addEventListener("click", () => {
    title.textContent = "LET’S PARTY!! 🎉";
    catImg.src = "cat_dance.gif";
    document.querySelector(".letter-window").classList.add("final");
    buttons.style.display = "none";
    finalText.style.display = "block";
});


// Star confetti
const colors = ["#75dbd3", "#b678ab", "#f58cbd", "#ffe066", "#93cf91"];
document.addEventListener("click", function (e) {
  for (let i = 0; i < 12; i++) {

    const star = document.createElement("div");
    star.innerHTML = "✦";
    star.className = "star";

    star.style.color = colors[Math.floor(Math.random() * colors.length)];
    star.style.left = e.clientX + (Math.random() * 40 - 20) + "px";
    star.style.top = e.clientY + (Math.random() * 40 - 20) + "px";

    document.body.appendChild(star);

    setTimeout(() => star.remove(), 900);
  }
});