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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    overflow-x: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 154, 205, 0.35),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 90%,
            rgba(155, 126, 255, 0.35),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #21122f,
            #3a1857,
            #241334
        );
}


/* =========================
   BACKGROUND
========================= */

.background {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.balloon,
.sparkle {
    position: absolute;

    user-select: none;

    animation:
        floating 5s ease-in-out infinite;
}


.balloon {
    font-size: 55px;

    filter:
        drop-shadow(
            0 10px 12px
            rgba(0, 0, 0, 0.25)
        );
}


.balloon1 {
    left: 7%;
    top: 15%;
}


.balloon2 {
    right: 8%;
    top: 20%;

    animation-delay: 1.2s;
}


.balloon3 {
    left: 15%;
    bottom: 10%;

    animation-delay: 2.2s;
}


.sparkle {
    font-size: 30px;
}


.sparkle1 {
    top: 12%;
    right: 25%;
}


.sparkle2 {
    right: 15%;
    bottom: 20%;

    animation-delay: 1s;
}


.sparkle3 {
    left: 30%;
    bottom: 12%;

    animation-delay: 2s;
}


@keyframes floating {

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

    50% {
        transform:
            translateY(-18px)
            rotate(5deg);
    }
}


/* =========================
   SCREEN
========================= */

.screen {

    display: none;

    min-height: 100vh;

    padding: 30px 20px;

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

    position: relative;

    z-index: 2;
}


.screen.active {
    display: flex;

    animation:
        screenIn 0.7s
        cubic-bezier(0.2, 0.8, 0.2, 1);
}


@keyframes screenIn {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================
   CARD
========================= */

.card {

    width:
        min(650px, 100%);

    padding:
        45px 35px;

    text-align: center;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.11);

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.35);
}


.emoji-big {

    font-size: 75px;

    margin-bottom: 20px;

    animation:
        emojiBounce
        2.5s
        ease-in-out
        infinite;
}


@keyframes emojiBounce {

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

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


.small-title {

    letter-spacing: 3px;

    font-size: 12px;

    opacity: 0.7;

    margin-bottom: 15px;
}


h1 {

    font-size:
        clamp(40px, 8vw, 70px);

    line-height: 1.05;

    margin-bottom: 25px;
}


h1 span {

    background:
        linear-gradient(
            90deg,
            #ffd1ea,
            #ffffff,
            #d9c8ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color:
        transparent;
}


h2 {

    font-size:
        clamp(28px, 5vw, 42px);

    margin-bottom: 15px;
}


.description,
.card > p {

    font-size: 17px;

    line-height: 1.7;

    opacity: 0.9;
}


button {

    margin-top: 28px;

    border: none;

    border-radius: 50px;

    padding:
        15px 28px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    color: #2b123d;

    background:
        linear-gradient(
            135deg,
            #ffd1e8,
            #ffffff,
            #ddd0ff
        );

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


button:hover {

    transform:
        translateY(-3px)
        scale(1.025);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.3);
}


button:active {

    transform:
        translateY(0)
        scale(0.98);
}


button:disabled {

    cursor: default;

    opacity: 0.8;
}


/* =========================
   TIMER
========================= */

.timer {

    font-size: 58px;

    font-weight: 800;

    margin: 15px;

    min-height: 70px;

    display: flex;

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

    animation:
        timerPulse
        1s
        ease-in-out
        infinite;
}


@keyframes timerPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.08);
    }
}


.hidden {
    display: none !important;
}


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

.cake-area {

    height: 310px;

    display: flex;

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

    perspective: 900px;
}


.cake {

    position: relative;

    width: 280px;

    height: 210px;

    margin-top: 45px;

    transform-style: preserve-3d;

    animation:
        cakeFloat
        3.5s
        ease-in-out
        infinite;

    filter:
        drop-shadow(
            0 25px 22px
            rgba(0, 0, 0, 0.3)
        );
}


/* Plate */

.cake::before {

    content: "";

    position: absolute;

    width: 310px;

    height: 28px;

    left: 50%;

    bottom: -8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #ddd4ed
        );

    box-shadow:
        0 8px 15px
        rgba(0, 0, 0, 0.25);

    z-index: 0;
}


/* Bottom Layer */

.cake-bottom {

    position: absolute;

    width: 260px;

    height: 75px;

    left: 50%;

    bottom: 12px;

    transform:
        translateX(-50%);

    border-radius:
        12px 12px
        22px 22px;

    background:
        linear-gradient(
            90deg,
            #b94f72 0%,
            #e77f9d 25%,
            #f39ab2 50%,
            #d96889 75%,
            #b94f72 100%
        );

    box-shadow:

        inset 0 -12px 0
        rgba(120, 35, 70, 0.15),

        inset 0 7px 8px
        rgba(255, 255, 255, 0.2);

    z-index: 2;
}


/* Middle Cream */

.cake-middle {

    position: absolute;

    width: 250px;

    height: 62px;

    left: 50%;

    bottom: 70px;

    transform:
        translateX(-50%);

    border-radius:
        14px 14px
        18px 18px;

    background:
        linear-gradient(
            90deg,
            #ffd0df,
            #fff1f6,
            #ffd2e1
        );

    box-shadow:
        inset 0 -8px 0
        rgba(225, 125, 158, 0.2);

    z-index: 3;
}


/* Top Frosting */

.cake-top {

    position: absolute;

    width: 215px;

    height: 55px;

    left: 50%;

    bottom: 119px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 50% 30%,
            #ffffff 0%,
            #fff3f8 45%,
            #ffc7da 100%
        );

    box-shadow:
        0 5px 8px
        rgba(0, 0, 0, 0.12);

    z-index: 5;
}


/* Frosting Drips */

.cake-middle::before {

    content: "";

    position: absolute;

    width: 24px;

    height: 32px;

    left: 35px;

    top: -2px;

    border-radius:
        0 0 15px 15px;

    background:
        #fff0f6;

    box-shadow:
        48px 7px 0 #fff0f6,
        98px -2px 0 #fff0f6,
        145px 6px 0 #fff0f6;
}


/* Decorations */

.cake-middle::after {

    content:
        "•  •  •  •  •";

    position: absolute;

    left: 50%;

    bottom: 12px;

    transform:
        translateX(-50%);

    color: #b95179;

    font-size: 18px;

    letter-spacing: 7px;

    white-space: nowrap;
}


/* Candles */

.candle1,
.candle2,
.candle3 {

    position: absolute;

    width: 16px;

    height: 62px;

    bottom: 155px;

    border-radius: 7px;

    background:
        repeating-linear-gradient(
            135deg,
            #ffffff 0px,
            #ffffff 8px,
            #b98cff 8px,
            #b98cff 16px
        );

    box-shadow:

        inset 2px 0 3px
        rgba(255,255,255,0.6),

        2px 4px 6px
        rgba(0,0,0,0.2);

    z-index: 8;
}


.candle1 {
    left: 62px;
}


.candle2 {
    left: 132px;
}


.candle3 {
    right: 62px;
}


/* Flames */

.flame {

    position: absolute;

    width: 22px;

    height: 34px;

    bottom: 210px;

    border-radius:
        50% 50% 50% 0;

    background:
        radial-gradient(
            circle at 60% 65%,
            #fff8b0 0 18%,
            #ffd24a 20% 50%,
            #ff8b38 55% 100%
        );

    transform:
        rotate(-45deg);

    transform-origin:
        bottom center;

    z-index: 10;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255, 190, 50, 0.8)
        );

    animation:
        flameDance
        0.55s
        ease-in-out
        infinite alternate;
}


.flame1 {
    left: 59px;
}


.flame2 {

    left: 129px;

    animation-delay:
        0.15s;
}


.flame3 {

    right: 59px;

    animation-delay:
        0.28s;
}


@keyframes flameDance {

    0% {

        transform:
            rotate(-47deg)
            scale(0.95);
    }

    100% {

        transform:
            rotate(-40deg)
            scale(1.08);
    }
}


/* Cake Floating */

@keyframes cakeFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotateX(0deg);
    }

    50% {

        transform:
            translateY(-8px)
            rotateX(1deg);
    }
}


/* Candle Blow */

.flame.blown {

    animation:
        blowOut
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        )
        forwards;
}


@keyframes blowOut {

    0% {

        opacity: 1;

        transform:
            rotate(-45deg)
            scale(1);
    }

    35% {

        opacity: 0.9;

        transform:
            translateX(12px)
            translateY(-8px)
            rotate(-35deg)
            scale(0.9);
    }

    100% {

        opacity: 0;

        transform:
            translateX(40px)
            translateY(-50px)
            rotate(-20deg)
            scale(0.1);
    }
}


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

.cut-cake {

    position: relative;

    width: 300px;

    height: 190px;

    margin: 35px auto;

    cursor: pointer;

    transform-style:
        preserve-3d;

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


.cut-cake:hover {

    transform:
        translateY(-6px)
        scale(1.02);
}


.cake-slice-bottom {

    position: absolute;

    width: 285px;

    height: 70px;

    left: 50%;

    bottom: 0;

    transform:
        translateX(-50%);

    border-radius:
        12px 12px
        22px 22px;

    background:
        linear-gradient(
            90deg,
            #b94f72,
            #e77f9d,
            #f39ab2,
            #c65b7d
        );

    box-shadow:

        inset 0 -10px 0
        rgba(120, 35, 70, 0.15),

        0 18px 25px
        rgba(0,0,0,0.2);
}


.cake-slice-middle {

    position: absolute;

    width: 260px;

    height: 58px;

    left: 50%;

    bottom: 62px;

    transform:
        translateX(-50%);

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            #ffd0df,
            #fff,
            #ffd0df
        );
}


.cake-slice-top {

    position: absolute;

    width: 225px;

    height: 55px;

    left: 50%;

    bottom: 112px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            #ffffff,
            #ffd4e3
        );

    box-shadow:
        0 5px 10px
        rgba(0,0,0,0.15);
}


.knife {

    position: absolute;

    right: -25px;

    top: 5px;

    font-size: 72px;

    transform:
        rotate(-25deg);

    transition:
        transform
        0.8s
        cubic-bezier(
            0.2,
            0.9,
            0.2,
            1
        );

    z-index: 10;

    filter:
        drop-shadow(
            0 8px 8px
            rgba(0,0,0,0.3)
        );
}


.cut-cake:hover .knife {

    transform:
        rotate(-15deg)
        translateY(-5px);
}


.cut .knife {

    transform:
        rotate(12deg)
        translateX(-85px)
        translateY(20px);
}


.cut-cake::after {

    content: "🍓";

    position: absolute;

    top: 8px;

    left: 50%;

    font-size: 28px;

    transform:
        translateX(-50%);

    animation:
        strawberryFloat
        2s
        ease-in-out
        infinite;
}


@keyframes strawberryFloat {

    0%,
    100% {

        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {

        transform:
            translateX(-50%)
            translateY(-4px);
    }
}


#cutHint {

    opacity: 0.7;
}


/* =========================
   MOUTH SCREEN
========================= */

.mouth-card {

    animation:
        mouthAppear
        0.8s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


@keyframes mouthAppear {

    from {

        opacity: 0;

        transform:
            scale(0.8)
            rotate(-2deg);
    }

    to {

        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}


.mouth-card h1 {

    font-size:
        clamp(
            42px,
            9vw,
            72px
        );
}


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

.wish {

    margin:
        25px auto;

    max-width: 530px;

    padding: 25px;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.08);

    border:
        1px solid
        rgba(255,255,255,0.08);
}


.wish p {

    margin-bottom: 18px;

    line-height: 1.7;
}


.wish .final-line {

    font-size: 20px;

    font-weight: 700;
}


.hearts {

    font-size: 28px;

    margin: 20px;
}


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

.confetti {

    position: fixed;

    top: -50px;

    font-size: 25px;

    z-index: 100;

    pointer-events: none;

    animation:
        confettiFall
        linear
        forwards;
}


@keyframes confettiFall {

    from {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: 1;
    }

    to {

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

        opacity: 0;
    }
}


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

@media (max-width: 600px) {

    .screen {

        padding:
            15px;
    }


    .card {

        padding:
            35px 20px;

        border-radius:
            25px;
    }


    .balloon {

        font-size:
            40px;
    }


    .cake {

        transform:
            scale(0.8);
    }


    .cake-area {

        height:
            260px;
    }


    .cut-cake {

        transform:
            scale(0.82);
    }


    button {

        width:
            100%;
    }


    .description,
    .card > p {

        font-size:
            15px;
    }
}