.scene.active {
    animation:
        scene-enter
        .8s
        cubic-bezier(.2,.8,.2,1)
        both;
}

@keyframes scene-enter {

    from {
        opacity: 0;
        transform: scale(1.015);
    }

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

}


.welcome-content {
    animation:
        welcome-enter
        1.4s
        cubic-bezier(.2,.8,.2,1)
        both;
}

@keyframes welcome-enter {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

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

}


.heart {
    animation:
        heartbeat
        1.6s
        ease-in-out
        infinite;
}

@keyframes heartbeat {

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

    15% {
        transform: scale(1.1);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.08);
    }

    60% {
        transform: scale(1);
    }

}


.glow-pink {
    animation:
        glow-pink
        9s
        ease-in-out
        infinite;
}

.glow-purple {
    animation:
        glow-purple
        11s
        ease-in-out
        infinite;
}

@keyframes glow-pink {

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

    50% {
        transform: translate(80px,40px);
    }

}

@keyframes glow-purple {

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

    50% {
        transform: translate(-70px,-50px);
    }

}


.birthday-balloon {
    animation:
        balloon-float
        3.2s
        ease-in-out
        infinite;
}

.birthday-balloon:nth-child(2) {
    animation-delay: .3s;
}

.birthday-balloon:nth-child(3) {
    animation-delay: .6s;
}

.birthday-balloon:nth-child(4) {
    animation-delay: .9s;
}

.birthday-balloon:nth-child(5) {
    animation-delay: 1.2s;
}

.birthday-balloon:nth-child(6) {
    animation-delay: 1.5s;
}

@keyframes balloon-float {

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

    50% {
        transform:
            translateY(-14px)
            rotate(2deg);
    }

}


.birthday-balloon.popping {
    animation:
        balloon-pop
        .45s
        ease
        forwards !important;
}

@keyframes balloon-pop {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    35% {
        transform: scale(1.25);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }

}


.flame {
    animation:
        flame
        1s
        ease-in-out
        infinite;
}

@keyframes flame {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1)
            rotate(-2deg);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.12)
            rotate(3deg);
    }

}


.complete.visible {
    animation:
        reveal
        .8s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.letter-text.visible {
    animation:
        reveal
        .8s
        cubic-bezier(.2,.8,.2,1)
        both;
}

@keyframes reveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}


.finale-content {
    animation:
        finale
        1.5s
        cubic-bezier(.2,.8,.2,1)
        both;
}

@keyframes finale {

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

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

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}