const welcomeText = document.getElementById("welcomeText");

const welcomeMessage = [
    "Welcome",
    "to",
    "the",
    "Birthday",
    "Portal",
    "of",
    "Rudra"
];


// ============================
// WORD BY WORD ANIMATION
// ============================

welcomeMessage.forEach((word, index) => {

    const span = document.createElement("span");

    span.textContent = word;

    span.classList.add("word");

    span.style.animationDelay = `${index * 0.55}s`;

    welcomeText.appendChild(span);

});


// ============================
// SCREEN TRANSITION
// ============================

const totalWelcomeTime =
    welcomeMessage.length * 550 + 2500;


setTimeout(() => {

    const welcomeScreen =
        document.getElementById("welcomeScreen");

    const birthdayScreen =
        document.getElementById("birthdayScreen");

    welcomeScreen.style.opacity = "0";

    setTimeout(() => {

        welcomeScreen.style.display = "none";

        birthdayScreen.classList.add("active");

    }, 1000);

}, totalWelcomeTime);


// ============================
// CELEBRATION BUTTON
// ============================

const celebrateBtn =
    document.getElementById("celebrateBtn");

const celebration =
    document.getElementById("celebration");


celebrateBtn.addEventListener("click", () => {

    celebration.classList.add("show");

    createConfetti();

});


// ============================
// CONFETTI
// ============================

function createConfetti() {

    for (let i = 0; i < 120; i++) {

        const confetti =
            document.createElement("div");

        confetti.style.position = "fixed";

        confetti.style.width = "10px";

        confetti.style.height = "10px";

        confetti.style.left =
            Math.random() * 100 + "vw";

        confetti.style.top = "-20px";

        confetti.style.background =
            `hsl(${Math.random() * 360}, 100%, 60%)`;

        confetti.style.borderRadius =
            Math.random() > 0.5 ? "50%" : "0";

        confetti.style.zIndex = "1000";

        document.body.appendChild(confetti);


        const duration =
            2 + Math.random() * 4;

        confetti.animate(

            [
                {
                    transform: "translateY(0) rotate(0deg)",
                    opacity: 1
                },

                {
                    transform:
                        `translateY(110vh) rotate(${Math.random() * 1000}deg)`,
                    opacity: 0
                }
            ],

            {
                duration: duration * 1000,
                easing: "cubic-bezier(.2,.8,.3,1)"
            }

        );


        setTimeout(() => {
            confetti.remove();
        }, duration * 1000);

    }

}