/* tc bot default animation */
@keyframes kf-drawing-vibrate {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }

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

/* tc editor mode entering animation */
@keyframes kf-drawing-shake {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    33% {
        opacity: 0.4;
        transform: rotate(10deg) scale(1.2);
    }

    66% {
        opacity: 0.4;
        transform: rotate(-10deg)scale(1.2);
    }

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

/* bling image swap effect */
.animation-drawing-swap {
    opacity: 0;
}

/* ppl tc default */
.gl-b2-shine {
    display: flex;
    position: absolute;
    overflow: hidden;
}

.gl-b2-shine:before {
    content: "";
    z-index: 10;
    position: absolute;
    height: 200%;
    width: 200%;
    top: -120%;
    left: -120%;
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%);
    transition: all 2s;
    transform: rotate(-45deg);
    animation: kf-b2-shine 6s infinite forwards;
}

@keyframes kf-b2-shine {
    0% {
        top: -120%;
        left: -120%;
    }

    20% {
        left: 100%;
        top: 100%;
    }

    40% {
        left: 100%;
        top: 100%;
    }

    100% {
        left: 100%;
        top: 100%;
    }
}

@keyframes kf-drawing-bounce {

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

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

    60% {
        transform: translateY(-20px);
    }
}

@keyframes kf-drawing-rotate {
    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

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

@keyframes kf-drawing-vertical-flip {
    to {
        /* ios 360deg or 1 turn is not working well */
        transform: rotateY(-360deg);
    }
}

@keyframes kf-drawing-blinking {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.3);
    }

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

@keyframes kf-drawing-inflate {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(2.2);
    }

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

@keyframes kf-drawing-glowing-outline {
    from {}

    50% {
        filter: drop-shadow(22px 22px 20px rgba(255, 255, 255, 0.95)) drop-shadow(-22px -22px 20px rgba(255, 255, 255, 0.95));
    }

    100% {}
}

@keyframes kf-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes kf-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes kf-scroll-in-left {
    0% {
        transform: translate(100%, 0);
    }

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

@keyframes kf-scroll-in-right {
    0% {
        transform: translate(-100%, 0);
    }

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

@keyframes kf-scroll-in-up {
    0% {
        transform: translate(0, 100%);
    }

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

@keyframes kf-scroll-in-down {
    0% {
        transform: translate(0, -100%);
    }

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