@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Pacifico&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Comfortaa", sans-serif;
    min-height: 100vh;
    overflow-x: hidden;

    background:
        radial-gradient(circle at top left, #ffd6e7, transparent 35%),
        radial-gradient(circle at bottom right, #e8d8ff, transparent 35%),
        linear-gradient(135deg, #fff5f8, #fff0f5, #f8f0ff);

    color: #59384a;
}


/* ================= SCREENS ================= */

.screen {
    min-height: 100vh;
    width: 100%;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px 20px;
}


.screen.active {
    display: flex;
    animation: screenIn 1s ease;
}


@keyframes screenIn {

    from {
        opacity: 0;
        transform: scale(.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}


/* ================= WELCOME ================= */

.welcome-card,
.name-card {

    width: min(600px, 95%);

    text-align: center;

    padding: 55px 40px;

    background: rgba(255, 255, 255, .68);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .9);

    border-radius: 35px;

    box-shadow:
        0 25px 70px rgba(150, 70, 110, .15),
        inset 0 0 30px rgba(255, 255, 255, .6);

    position: relative;

    z-index: 5;
}


.flower-top {
    font-size: 35px;
    margin-bottom: 25px;

    animation: flowerFloat 3s ease-in-out infinite;
}


@keyframes flowerFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


.small-text {
    color: #b47791;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 18px;
}


.welcome-card h1 {

    font-family: "Pacifico", cursive;

    font-size: clamp(38px, 7vw, 65px);

    line-height: 1.25;

    color: #794c62;

}


.welcome-card h1 span,
.name-card h2 span {

    color: #e67fa4;

}


.description {

    max-width: 450px;

    margin: 25px auto 35px;

    line-height: 1.9;

    color: #806273;

}


/* ================= BUTTON ================= */

.cute-btn {

    border: none;

    padding: 17px 30px;

    border-radius: 50px;

    font-family: inherit;

    font-weight: 700;

    font-size: 15px;

    color: white;

    cursor: pointer;

    background: linear-gradient(
        135deg,
        #ee91b2,
        #c99bea
    );

    box-shadow:
        0 10px 25px rgba(210, 120, 170, .3);

    transition: .3s ease;

}


.cute-btn:hover {

    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 15px 35px rgba(210, 120, 170, .4);

}


.cute-btn:active {
    transform: scale(.96);
}


.tiny-hearts {

    margin-top: 30px;

    color: #e995b4;

    letter-spacing: 12px;

    animation: heartPulse 2s infinite;
}


@keyframes heartPulse {

    50% {
        transform: scale(1.1);
    }

}


/* ================= NAME ================= */

.big-flower {

    font-size: 60px;

    animation: spinFlower 5s linear infinite;
}


@keyframes spinFlower {

    from {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(8deg);
    }

    to {
        transform: rotate(-8deg);
    }

}


.name-card h2 {

    font-family: "Pacifico", cursive;

    font-size: clamp(35px, 7vw, 55px);

    line-height: 1.4;

    color: #794c62;

}


.name-card > p:not(.small-text):not(.error) {

    margin: 20px auto 25px;

    max-width: 420px;

    line-height: 1.7;

    color: #806273;
}


input {

    width: min(400px, 100%);

    padding: 17px 22px;

    border-radius: 50px;

    border: 2px solid #f1bfd1;

    background: rgba(255, 255, 255, .8);

    outline: none;

    text-align: center;

    font-family: inherit;

    font-size: 16px;

    color: #633f51;

    transition: .3s;

    margin-bottom: 15px;
}


input:focus {

    border-color: #e98cad;

    box-shadow:
        0 0 0 5px rgba(233, 140, 173, .12);

}


.error {

    height: 22px;

    color: #dc6d91;

    font-size: 13px;

    margin-bottom: 5px;
}


/* ================= BIRTHDAY ================= */

#birthdayScreen {

    align-items: flex-start;

    position: relative;

    overflow: hidden;
}


.birthday-content {

    width: min(1000px, 100%);

    text-align: center;

    padding: 60px 15px;

    position: relative;

    z-index: 2;
}


.flowers {

    font-size: 40px;

    letter-spacing: 8px;

    animation: flowerFloat 3s ease-in-out infinite;

}


.hello-text {

    margin-top: 20px;

    color: #a76a82;

    font-size: 17px;
}


.hello-text span {
    color: #dc7298;
    font-weight: 700;
}


.birthday-title {

    margin-top: 10px;

    font-family: "Pacifico", cursive;

    font-size: clamp(45px, 9vw, 85px);

    line-height: 1.25;

    color: #75475d;

    text-shadow:
        0 5px 25px rgba(190, 100, 140, .15);
}


.birthday-title span {

    background: linear-gradient(
        135deg,
        #e77fa5,
        #b98ee4
    );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.birthday-subtitle {

    margin-top: 15px;

    color: #927182;

    font-size: 18px;
}


/* ================= CAKE ================= */

.cake {

    width: 220px;

    margin: 50px auto 45px;

    position: relative;

    animation: cakeFloat 3s ease-in-out infinite;
}


@keyframes cakeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}


.cake-body {

    height: 110px;

    border-radius: 20px 20px 30px 30px;

    background:
        linear-gradient(
            180deg,
            #ffc6d9,
            #f39fbd
        );

    border: 5px solid #fff;

    box-shadow:
        0 15px 30px rgba(190, 100, 140, .2);

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    font-size: 25px;

    letter-spacing: 8px;

}


.cake-top {

    position: absolute;

    top: -10px;

    left: 0;

    width: 100%;

    height: 35px;

    border-radius: 50%;

    background: #fff1f6;

    border: 5px solid #fff;

    z-index: 2;
}


.plate {

    position: absolute;

    bottom: -15px;

    left: -15px;

    width: 250px;

    height: 25px;

    border-radius: 50%;

    background: #e5c9ee;

    z-index: -1;
}


.candle {

    position: absolute;

    z-index: 5;

    left: 50%;

    top: -55px;

    transform: translateX(-50%);

    width: 17px;

    height: 55px;

    border-radius: 5px;

    background: repeating-linear-gradient(
        45deg,
        #fff,
        #fff 6px,
        #ef9fbd 6px,
        #ef9fbd 12px
    );
}


.flame {

    position: absolute;

    top: -35px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 25px;

    animation: flame 1s infinite alternate;
}


@keyframes flame {

    from {
        transform: translateX(-50%) scale(1);
    }

    to {
        transform: translateX(-50%) scale(1.2);
    }

}


/* ================= LETTER ================= */

.letter {

    max-width: 750px;

    margin: 20px auto 70px;

    padding: 45px;

    background: rgba(255,255,255,.75);

    border-radius: 30px;

    border: 1px solid white;

    box-shadow:
        0 20px 60px rgba(150, 80, 120, .12);

    position: relative;
}


.letter-flower {

    font-size: 35px;

    margin-bottom: 15px;
}


.letter h2 {

    font-family: "Pacifico", cursive;

    font-size: clamp(25px, 5vw, 38px);

    color: #75475d;

    margin-bottom: 25px;
}


.letter h2 span {
    color: #e77fa5;
}


#typingMessage {

    min-height: 120px;

    line-height: 2;

    color: #725566;

    font-size: 16px;
}


/* ================= WISHES ================= */

.wishes-title {

    font-family: "Pacifico", cursive;

    font-size: clamp(30px, 6vw, 48px);

    color: #75475d;

    margin-bottom: 35px;
}


.wishes-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    max-width: 950px;

    margin: auto;
}


.wish-card {

    padding: 30px 22px;

    background: rgba(255,255,255,.7);

    border: 1px solid white;

    border-radius: 25px;

    box-shadow:
        0 15px 35px rgba(150, 80, 120, .1);

    transition: .35s ease;

}


.wish-card:hover {

    transform: translateY(-8px) rotate(1deg);

    box-shadow:
        0 20px 40px rgba(150, 80, 120, .18);
}


.wish-card span {

    font-size: 38px;

}


.wish-card h3 {

    margin: 15px 0 10px;

    color: #b65f83;

}


.wish-card p {

    color: #806273;

    line-height: 1.7;

    font-size: 14px;
}


/* ================= FINAL ================= */

.surprise-btn {

    margin-top: 55px;

    font-size: 16px;
}


.final-message {

    max-width: 700px;

    margin: 40px auto;

    padding: 50px 35px;

    border-radius: 35px;

    background:
        linear-gradient(
            135deg,
            rgba(255,235,244,.9),
            rgba(240,229,255,.9)
        );

    display: none;

    animation: finalReveal 1s ease;

}


.final-message.show {
    display: block;
}


@keyframes finalReveal {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


.final-heart {

    font-size: 60px;

    animation: heartBeat 1.2s infinite;
}


@keyframes heartBeat {

    50% {
        transform: scale(1.2);
    }

}


.final-message h2 {

    font-family: "Pacifico", cursive;

    color: #75475d;

    font-size: 35px;

    margin: 15px 0 25px;
}


.final-message p {

    line-height: 2;

    color: #725566;
}


.final-message strong {
    color: #dc7298;
    font-size: 18px;
}


.final-flowers {

    font-size: 30px;

    margin-top: 30px;

    letter-spacing: 8px;
}


footer {

    margin-top: 60px;

    padding-bottom: 30px;

    color: #a77c8e;

    font-size: 13px;
}


/* ================= FLOATING DECORATIONS ================= */

.decorations span {

    position: fixed;

    z-index: 1;

    font-size: 25px;

    opacity: .6;

    animation: floatAround 7s ease-in-out infinite;

    pointer-events: none;
}


.decorations span:nth-child(1) {
    left: 5%;
    top: 15%;
}

.decorations span:nth-child(2) {
    left: 85%;
    top: 20%;
    animation-delay: 1s;
}

.decorations span:nth-child(3) {
    left: 12%;
    top: 75%;
    animation-delay: 2s;
}

.decorations span:nth-child(4) {
    left: 90%;
    top: 70%;
    animation-delay: 3s;
}

.decorations span:nth-child(5) {
    left: 50%;
    top: 8%;
    animation-delay: 1.5s;
}

.decorations span:nth-child(6) {
    left: 75%;
    top: 85%;
    animation-delay: 2.5s;
}

.decorations span:nth-child(7) {
    left: 25%;
    top: 90%;
    animation-delay: 3.5s;
}

.decorations span:nth-child(8) {
    left: 95%;
    top: 45%;
    animation-delay: 4s;
}


@keyframes floatAround {

    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(15deg);
    }

}


/* ================= HEARTS ================= */

.floating-heart {

    position: fixed;

    bottom: -30px;

    font-size: 25px;

    pointer-events: none;

    z-index: 10;

    animation: heartUp 5s linear forwards;
}


@keyframes heartUp {

    from {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    to {
        opacity: 0;
        transform: translateY(-100vh) rotate(360deg);
    }

}


/* ================= CONFETTI ================= */

.confetti {

    position: fixed;

    width: 10px;

    height: 18px;

    top: -30px;

    z-index: 20;

    pointer-events: none;

    animation: confettiFall 4s linear forwards;
}


@keyframes confettiFall {

    to {
        transform:
            translateY(110vh)
            rotate(720deg);

        opacity: 0;
    }

}


/* ================= MOBILE ================= */

@media (max-width: 750px) {

    .welcome-card,
    .name-card {
        padding: 40px 22px;
    }


    .birthday-content {
        padding-top: 35px;
    }


    .wishes-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }


    .letter {
        padding: 30px 20px;
    }


    .cake {
        transform: scale(.85);
    }


    .birthday-title {
        font-size: 48px;
    }


    .flowers {
        font-size: 28px;
        letter-spacing: 3px;
    }

}