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

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


@keyframes draw {
    0% {stroke-dashoffset: 500;}
    100% {stroke-dashoffset: 0;}
}

@keyframes blink {
    0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 0;}
    60% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: 1;}
}




@keyframes scale_in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scale_in_small {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scale_out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}



@keyframes show_in_left {
    0% {
        opacity: 0;
        transform: translateX(-25%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes show_in_right {
    0% {
        opacity: 0;
        transform: translateX(25%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes show_in_right_big {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes show_in_top {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes show_in_bottom {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes show_in_bottom_big {
    0% {
        opacity: 0;
        transform: translateY(1500px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}






@keyframes show_out_top {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes show_out_bottom {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}













@keyframes slide_in_left {
    0% {
        opacity: 1;
        transform: translateX(-150%);}
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slide_in_top_left {
    0% {
        opacity: 1;
        transform: translate(-150%, -150%);}
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes slide_in_right {
    0% {
        opacity: 1;
        transform: translateX(150%);}
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slide_in_top {
    0% {
        opacity: 1;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide_in_top_big {
    0% {
        opacity: 1;
        transform: translateY(-1000px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide_in_bottom {
    0% {
        opacity: 1;
        transform: translateY(100%);}
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide_in_bottom_big {
    0% {
        opacity: 1;
        transform: translateY(1000px);}
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}





@keyframes tada {
    0% {transform: scale(1) rotate(0deg);}
    16% {transform: scale(1.25) rotate(0deg);}
    33% {transform: scale(1.25) rotate(-15deg);}
    50% {transform: scale(1.25) rotate(15deg);}
    67% {transform: scale(1.25) rotate(-15deg);}
    84% {transform: scale(1.25) rotate(0deg);}
    100% {transform: scale(1) rotate(0deg);}
}




@keyframes shine {
    0% {left: -50%; opacity: 0;}
    40% {left: 150%; opacity: 1;}
    99% {left: 150%; opacity: 0;}
    100% {left: -100%; opacity: 0;}
}

@keyframes shineH {
    0% {left: -50%; opacity: 0;}
    90% {left: 150%; opacity: 0.5;}
    99% {left: 150%; opacity: 0;}
    100% {left: -100%; opacity: 0;}
}


@keyframes deli_car {
    0% {background-position: 0px -268px; filter: saturate(0%) invert(100%) brightness(200%);}
    40% {background-position: 80px -268px; filter: saturate(0%) invert(100%) brightness(200%);}
    41% {background-position: 80px -268px; opacity: 0; filter: saturate(0%) invert(100%) brightness(200%);}
    42% {background-position: -80px -268px; opacity: 0; filter: brightness(100%);}
    43% {background-position: -80px -268px; opacity: 1;}
    100% {background-position: 0px -268px; filter: brightness(100%);}
}





/* Основная анимация поворота всего логотипа - 4 поворота по 90° с паузами */
@keyframes logoRotate {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(90deg); }
    25% { transform: rotate(90deg); }
    30% { transform: rotate(180deg); }
    50% { transform: rotate(180deg); }
    55% { transform: rotate(270deg); }
    75% { transform: rotate(270deg); }
    80% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

/* Анимация для perv */
@keyframes pervRotate {
    0% { transform: rotate(0deg); }
    7.5% { transform: rotate(0deg); }
    /* После 1-го поворота perv вверху справа - 1-й поворот на -90° */
    10% { transform: rotate(-90deg); }
    15% { transform: rotate(-90deg); }
    /* perv вверху справа - 2-й поворот на -90° */
    20% { transform: rotate(-180deg); }
    32.5% { transform: rotate(-180deg); }
    /* После 2-го поворота perv внизу справа - 1-й поворот на +90° */
    37.5% { transform: rotate(-90deg); }
    42.5% { transform: rotate(-90deg); }
    /* perv внизу справа - 2-й поворот на +90° - возврат к 0° */
    47.5% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Анимация для cait */
@keyframes caitRotate {
    0% { transform: rotate(0deg); }
    12.5% { transform: rotate(0deg); }
    /* После 1-го поворота cait внизу справа - 1-й поворот на +90° */
    15% { transform: rotate(90deg); }
    17.5% { transform: rotate(90deg); }
    /* cait внизу справа - 2-й поворот на +90° */
    22.5% { transform: rotate(180deg); }
    82.5% { transform: rotate(180deg); }
    /* После 4-го поворота cait вверху справа - 1-й поворот на -90° */
    85% { transform: rotate(90deg); }
    90% { transform: rotate(90deg); }
    /* cait вверху справа - 2-й поворот на -90° - возврат к 0° */
    95% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Анимация для comp */
@keyframes compRotate {
    0% { transform: rotate(0deg); }
    32.5% { transform: rotate(0deg); }
    /* После 2-го поворота comp вверху справа - 1-й поворот на -90° */
    35% { transform: rotate(-90deg); }
    40% { transform: rotate(-90deg); }
    /* comp вверху справа - 2-й поворот на -90° */
    45% { transform: rotate(-180deg); }
    57.5% { transform: rotate(-180deg); }
    /* После 3-го поворота comp внизу справа - 1-й поворот на +90° */
    62.5% { transform: rotate(-90deg); }
    67.5% { transform: rotate(-90deg); }
    /* comp внизу справа - 2-й поворот на +90° - возврат к 0° */
    72.5% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Анимация для mosc */
@keyframes moscRotate {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(0deg); }
    /* После 2-го поворота mosc не двигается, ожидает 3-го поворота */
    57.5% { transform: rotate(0deg); }
    /* После 3-го поворота mosc вверху справа - 1-й поворот на -90° */
    60% { transform: rotate(-90deg); }
    65% { transform: rotate(-90deg); }
    /* mosc вверху справа - 2-й поворот на -90° */
    70% { transform: rotate(-180deg); }
    82.5% { transform: rotate(-180deg); }
    /* После 4-го поворота mosc внизу справа - 1-й поворот на +90° */
    87.5% { transform: rotate(-90deg); }
    92.5% { transform: rotate(-90deg); }
    /* mosc внизу справа - 2-й поворот на +90° - возврат к 0° */
    97.5% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}