@charset "UTF-8";

:root {
    --animate-duration: 800ms;
    --animate-delay: 2s;
}

.ef-hov:hover {
    animation: pulse 1s ease-in-out 0s infinite both normal running;
}

.ef-bounce {
    animation: bounce 2.5s infinite;
}

.ef-wave {
    animation-name: ky-wave;
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 0s; 
}

@keyframes ky-wave {
    from {
        opacity: 0;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 1;
        transform: scale(1.1) translateY(-30px);
    }
}

.ef-flag {
    animation-name: ky-flag;
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: .9s;
}

@keyframes ky-flag {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.ef-dung {
    animation-name: ky-dung;
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: .9s;
}

@keyframes ky-dung {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(2px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Lesson 1 */
@keyframes sp-dice-blink {
    to { 
        background-position: -426px 2px;
    }
}

@keyframes sp-dice-ani {
    to { 
        background-position: -4872px 0;
    }
}

@keyframes ky-finger-move {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    100% {
        transform: translate(-590px, 70px);
        opacity: 0;
    }
}

@keyframes ky-finger-move2 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    100% {
        transform: translate(200px, 0);
        opacity: 0;
    }
}

@keyframes ky-finger-blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes ky-wing {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-5deg);
    }
}

@keyframes ky-place-blink {
    to { 
        background-color: #fff;
    }
    from {
        background-color: #ffd146;
    }
}

@keyframes ky-stamp {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.highlighter {
	animation-name: highlight;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	cursor: pointer;
}
.highlighter:hover,
.highligh-trigger:hover ~ .highlighter {
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.highlighter:active,
.highligh-trigger:active ~ .highlighter {
	margin-top: 1px;
}

@keyframes highlight {
    0% {
      filter: drop-shadow(2px -2px 1px rgba(0, 0, 0, 0.05)) drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.05))
        drop-shadow(-2px -2px 1px rgba(0, 0, 0, 0.05)) drop-shadow(-2px 2px 1px rgba(0, 0, 0, 0.05))
        drop-shadow(4px -4px 0 rgba(255, 246, 0, 0.05)) drop-shadow(4px 4px 0 rgba(255, 246, 0, 0.05))
        drop-shadow(-4px -4px 0 rgba(255, 246, 0, 0.05)) drop-shadow(-4px 4px 0 rgba(255, 246, 0, 0.05));
    }
    100% {
      filter: drop-shadow(2px -2px 1px rgba(0, 0, 0, 0.2)) drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2))
        drop-shadow(-2px -2px 1px rgba(0, 0, 0, 0.2)) drop-shadow(-2px 2px 1px rgba(0, 0, 0, 0.2))
        drop-shadow(4px -4px 0 rgba(255, 246, 0, 0.4)) drop-shadow(4px 4px 0 rgba(255, 246, 0, 0.4))
        drop-shadow(-4px -4px 0 rgba(255, 246, 0, 0.4)) drop-shadow(-4px 4px 0 rgba(255, 246, 0, 0.4));
    }
}