/* =========================================================
   HEARTBEAT
========================================================= */

@keyframes heartbeat {

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

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


/* =========================================================
   FIREFLY FLOAT
========================================================= */

@keyframes fireflyFloat {

    0% {
        transform: translate(0, 0);
        opacity: 0.15;
    }

    50% {
        transform: translate(18px, -30px);
        opacity: 1;
    }

    100% {
        transform: translate(-12px, -65px);
        opacity: 0;
    }
}


/* =========================================================
   FLOATING HEART
========================================================= */

@keyframes floatHeart {

    0% {
        transform:
            translateY(0)
            scale(0.7)
            rotate(0deg);

        opacity: 0;
    }

    15% {
        opacity: 0.9;
    }

    100% {
        transform:
            translateY(-110dvh)
            scale(1.2)
            rotate(25deg);

        opacity: 0;
    }
}


/* =========================================================
   CELEBRATION
========================================================= */

@keyframes celebration {

    0% {
        transform:
            scale(0.5)
            rotate(-10deg);

        opacity: 0;
    }

    60% {
        transform:
            scale(1.15)
            rotate(5deg);

        opacity: 1;
    }

    100% {
        transform:
            scale(1)
            rotate(0);

        opacity: 1;
    }
}


/* =========================================================
   CELEBRATION CLASS
========================================================= */

.celebrate {
    animation:
        celebration
        0.7s
        ease-out;
}


/* =========================================================
   HEARTBEAT CLASS
========================================================= */

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


/* =========================================================
   FIREFLY CLASS
========================================================= */

.firefly {
    animation:
        fireflyFloat
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   FLOATING HEART CLASS
========================================================= */

.floating-heart {
    animation:
        floatHeart
        6s
        linear
        forwards;
}