@keyframes pop {
    50% {
        transform: scale(1);
    }

    60% {
        transform: scale(.9);
    }

    85% {
        transform: scale(1.4) rotate(5deg);
    }

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

@keyframes bg-animation {
    0% {
        background-position: 0% 25%;
    }

    50% {
        background-position: 100% 75%;
    }

    100% {
        background-position: 0% 25%;
    }
}

.rotate {
    display: inline-block;
    transform-origin: bottom center;
    animation: rotate 1s ease-in-out infinite alternate;
    line-height: 1;
}

.rotate.reverse {
    animation-direction: alternate-reverse;
}

@keyframes rotate {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

.drop {
    display: inline-block;
    animation: drop 2s 1s ease;
    line-height: 1;
}

@keyframes drop {
    0% {
        transform: translateY(0);
        transform-origin: top left;
        animation-timing-function: ease-in;
    }

    25% {
        transform: translateY(0);
        transform-origin: top left;
        animation-timing-function: ease-in;
    }

    35%,
    100% {
        transform: translateY(230%);
        transform-origin: top left;
        animation-timing-function: ease-in;
    }
}

.hinge {
    display: inline-block;
    animation: hinge 2s 1s ease;
    line-height: 1;
}

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    20%,
    60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translateY(700px);
        opacity: 0;
    }
}

.fade-back-in {
    animation: fade-back-in 2s 3s ease-in;
}

@keyframes fade-back-in {

    0%,
    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.dance {
    display: inline-block;
    transform-origin: bottom center;
    line-height: 1;
    --duration: 1.3s;
    position: absolute;
    left: 0;
    transform: translateY(-50%);
}

.dance.dance2 {
    right: 0;
    left: unset;
    transform: translateY(-50%);
}

.dance .down {
    position: relative;
    animation: dance-down 1s ease-in infinite both;
    animation-duration: var(--duration);
}

.dance .up {
    animation: dance-up 1s ease-in-out infinite both;
    animation-duration: var(--duration);
}

.dance .squeeze {
    transform-origin: 50% 100%;
    animation: dance-squeeze 1s cubic-bezier(.72, .03, .28, .97) infinite both;
    animation-duration: var(--duration);
}

.dance .rotate-in {
    animation: dance-rotate-in 1s ease-out infinite both;
    animation-duration: var(--duration);
}

.dance .rotate-out {
    animation: dance-rotate-out 1s ease-in infinite both;
    animation-duration: var(--duration);
}

.dance .square {
    font-size: 4rem;
}

.dance .shadow {
    position: absolute;
    z-index: -1;
    bottom: -2px;
    left: -4px;
    right: -4px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.2);
    animation: dance-shadow 1s ease-in-out infinite both;
    animation-duration: var(--duration);
}

@keyframes dance-down {
    0% {
        transform: translateY(-100px);
    }

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

@keyframes dance-up {

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

    100% {
        transform: translateY(-100px);
    }
}

@keyframes dance-squeeze {

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

    20% {
        transform: scale(1.8, 0.4);
    }

    45%,
    85% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.4, 0.6);
    }
}

@keyframes dance-rotate-in {
    0% {
        transform: rotate(-135deg);
    }

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

@keyframes dance-rotate-out {

    0%,
    80% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(225deg);
    }
}