/**
 * Upcreators
 * Upcreators is the template for Agency, Streamers, Shop, Blog, Portfolio, Events, etc
 * Exclusively on https://1.envato.market/upcreators-html
 *
 * @encoding        UTF-8
 * @version         1.0.0
 * @copyright       (C) 2018 - 2022 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Lilith Lamber (winter.rituel@gmail.com)
 * @support         help@merkulov.design
 **/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes rotating
{
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes glitch {
    1%{
        transform: rotateX(10deg);
    }
    2%{
        transform: rotateX(0deg);
    }
}

@keyframes noise-1 {
    $steps: 30;
    @for $i from 1 through $steps {
        #{percentage($i*(1/$steps))} {
            $top: random(100);
            $bottom: random(101 - $top);
            clip-path: inset(#{$top}px 0 #{$bottom}px 0);
        }
    }
}

@keyframes noise-2 {
    $steps: 30;
    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            $top: random(100);
            $bottom: random(101 - $top);
            clip-path: inset(#{$top}px 0 #{$bottom}px 0);
        }
    }
}

.rotate {
    -webkit-animation: rotating 4s linear infinite;
    -moz-animation: rotating 4s linear infinite;
    -ms-animation: rotating 4s linear infinite;
    -o-animation: rotating 4s linear infinite;
    animation: rotating 4s linear infinite;
    transform-origin: center;
    &.slower {
        animation-duration: 8s;
    }
}

.fadeIn {
    animation: fadeIn 400ms ease-in-out;
}

.fadeOut {
    animation: fadeOut 400ms ease-in-out;
}