/* ANIMATIONS: Animations used by components.css */

/* Btn play-pause */
@keyframes boxGlow {
    0% {
        box-shadow: 4px 0px 10px 2px var(--color-myst-glow-1);
    }

    16% {
        box-shadow: 3px 2px 12px 3px var(--color-myst-glow-2);
    }

    33% {
        box-shadow: 0px 4px 12px 3px var(--color-myst-glow-1);
    }

    50% {
        box-shadow: -4px 0px 10px 2px var(--color-myst-glow-2);
    }

    66% {
        box-shadow: -3px -2px 12px 3px var(--color-myst-glow-1);
    }

    83% {
        box-shadow: 0px -4px 12px 3px var(--color-myst-glow-2);
    }

    100% {
        box-shadow: 4px 0px 10px 2px var(--color-myst-glow-1);
    }
}

/* Forward/Reverse Btn */
@keyframes textGlow {
    0% {
        text-shadow: 4px 0px 10px var(--color-myst-glow-1);
    }

    16% {
        text-shadow: 3px 2px 12px var(--color-myst-glow-2);
    }

    33% {
        text-shadow: 0px 4px 12px var(--color-myst-glow-1);
    }

    50% {
        text-shadow: -4px 0px 10px var(--color-myst-glow-2);
    }

    66% {
        text-shadow: -3px -2px 12px var(--color-myst-glow-1);
    }

    83% {
        text-shadow: 0px -4px 12px var(--color-myst-glow-2);
    }

    100% {
        text-shadow: 4px 0px 10px var(--color-myst-glow-1);
    }
}

.forwardGlow {
    animation: textGlow 1s ease 1;
}

.reverseGlow {
    animation: textGlow 1s ease 1 reverse;
}

/* Gradual Color Shift */
@keyframes colorShift {
    0% {
        background: #8d8d8d;
    }
    
    10% {
        background: #542623;
    }
    
    20% {
        background: #545123;
    }
    
    30% {
        background: #355423;
    }
    
    40% {
        background: #23542b;
    }
    
    50% {
        background: #235254;
    }
    
    60% {
        background: #232654;
    }
    
    70% {
        background: #432354;
    }
    
    80% {
        background: #54233c;
    }
    
    90% {
        background: #542323;
    }
    
    100% {
        background: #2a1212;
    }
}

/* Gradual Box Shadow Glow Shift */
@keyframes glowShift {
    0% {
        box-shadow: 0px 0px 10px 1px#8d8d8d;
    }

    10% {
        box-shadow: 0px 0px 10px 1px#542623;
    }

    20% {
        box-shadow: 0px 0px 10px 1px#545123;
    }

    30% {
        box-shadow: 0px 0px 10px 1px#355423;
    }

    40% {
        box-shadow: 0px 0px 10px 1px#23542b;
    }

    50% {
        box-shadow: 0px 0px 10px 1px#235254;
    }

    60% {
        box-shadow: 0px 0px 10px 1px#232654;
    }

    70% {
        box-shadow: 0px 0px 10px 1px#432354;
    }

    80% {
        box-shadow: 0px 0px 10px 1px#54233c;
    }

    90% {
        box-shadow: 0px 0px 10px 1px#542323;
    }

    100% {
        box-shadow: 0px 0px 10px 1px#2a1212;
    }
}

/* Loading page background shifter */
@keyframes bgShift {
    0% {
        background-position: 200% 0%;
    }

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

/* Display Counter: Like/Dislike */
@keyframes showCounter {
    0% {
        transform: scale(1.08);
        text-shadow: 0px 0px 2px var(--color-show-counter-1);
    }

    20% {
        transform: scale(1.16);
        text-shadow: 0px 0px 4px var(--color-show-counter-2);
    }

    40% {
        transform: scale(1.24);
        transform: rotateY(90deg);
        text-shadow: 0px 0px 2px var(--color-show-counter-1);
    }

    60% {
        transform: scale(1.16);
        text-shadow: 0px 0px 4px var(--color-show-counter-2);
    }

    80% {
        transform: scale(1.08);
        text-shadow: 0px 0px 2px var(--color-show-counter-1);
    }

    100% {
        transform: scale(1);
        text-shadow: 0px 0px 4px var(--color-show-counter-2);
    }
}

.showLikes {
    --color-show-counter-1: yellowgreen;
    --color-show-counter-2: green;
}

.showDislikes {
    --color-show-counter-1: orangered;
    --color-show-counter-2: red;
}

.showLikes,
.showDislikes {
    animation: showCounter 1s linear 1;
}

/* Like/Dislike */
@keyframes opinion {
    0% {
        opacity: 0.2;
        transform: translateY(-10px);
    }

    10% {
        opacity: 0.4;
        transform: translateY(-20px);
    }

    30% {
        opacity: 0.6;
        transform: translateY(-30px);
    }

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

    50% {
        opacity: 1;
        transform: translateY(-50px);
    }

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

    70% {
        opacity: 0.6;
        transform: translateY(-70px);
    }

    80% {
        opacity: 0.4;
        transform: translateY(-80px);
    }

    90% {
        opacity: 0.2;
        transform: translateY(-90px);
    }

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

.opinion {
    animation: opinion 1s linear 1;
}