/* Animation Keyframes */

/* 하-상 */
@-webkit-keyframes bottom-to-top {
    0% {
        filter: blur(2rem);
        opacity: 0;
        bottom: -10rem;
    }

    20% {
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
        bottom: 0;
    }
}

@-webkit-keyframes bottom-to-top2 {
    0% {
        filter: blur(2rem);
        opacity: 0;
        transform: translate(-50%, 10rem);
    }

    20% {
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
        transform: translateX(-50%);
    }
}

@-webkit-keyframes bottom-to-top3 {
    0% {
        filter: blur(2rem);
        opacity: 0;
        bottom: -10rem;
    }

    20% {
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
        bottom: -1rem;
    }
}

@keyframes float-up-down1 {
    0% {
        transform: translate(-190%, -30%);
    }
    50% {
        transform: translate(-190%, -40%);
    }
    100% {
        transform: translate(-190%, -30%);
    }
}

@keyframes float-up-down2 {
    0% {
        transform: translate(125%, -50%);
    }
    50% {
        transform: translate(125%, -60%);
    }
    100% {
        transform: translate(125%, -50%);
    }
}

@keyframes scale-in-left {
    0% {
        transform: scale(0);
        transform-origin: 0 50%;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        transform-origin: 0 50%;
        opacity: 1;
    }
}

@keyframes scale-in-right {
    0% {
        transform: scale(0);
        transform-origin: 100% 50%;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        transform-origin: 100% 50%;
        opacity: 1;
    }
}

@keyframes scale-up-left {
    0% {
        transform: scale(0.5);
        transform-origin: 0 50%;
    }
    100% {
        transform: scale(1);
        transform-origin: 0 50%;
    }
}

@keyframes puff-in-center {
    0% {
        transform: scale(2);
        filter: blur(0.4rem);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-bck-center {
    0% {
        transform: translateZ(60rem);
        opacity: 0;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes bg-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
    }
}

@keyframes swing-in-top-fwd {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.15, 0.85, 1);
    }
    40% {
        transform: scale3d(0.85, 1.15, 1);
    }
    50% {
        transform: scale3d(1.05, 0.95, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes default-blink {
    50% {
        opacity: 0;
    }
}

@keyframes question-blink {
    0%, 50% {
        opacity: 0;
    }
    50.01%, 100% {
        opacity: 1;
    }
}

@keyframes image-toggle1 {
    0%, 50% {
        opacity: 0;
    }
    50.01% {
        transform: translate(20%, 20%) scale(.2);
    }
    100% {
        opacity: 1;
        transform: translate(-34%, -26%) scale(.8);
    }
}

@keyframes image-toggle2 {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}

@keyframes neon-blink {
    0%, 50% {
        box-shadow: 
            0 0 1.5rem rgba(71, 102, 229, 0.8),
            0 0 2.5rem rgba(71, 102, 229, 0.6),
            0 0 3.5rem rgba(71, 102, 229, 0.4);
    }
    50.01%, 100% {
        box-shadow: none;
    }
}

@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes scroll-up-full {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-16rem);
    }
}

@keyframes scroll-up-stop {
    0% {
        transform: translateY(-14rem);
    }
    50% {
        transform: translateY(-16.3rem);
    }
    100% {
        transform: translateY(-16rem);
    }
}

@keyframes mini-jump {
    0% {
        transform: translateY(-16rem);
    }
    10% {
        transform: translateY(-16.5rem);
    }
    20%, 100% {
        transform: translateY(-16rem);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

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

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

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

@keyframes pop-scale-in-left {
    0% {
        transform: scale(0);
        transform-origin: 0 50%;
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform-origin: 0 50%;
        opacity: 1;
    }
}