/* -------------
    Usage (html):
    1) class="css-animate"
    2) data-anim-class="anim-left-in" // Or any declared animation from animation.css

    If delay is required:
    3) data-anim-delay="2" // Or any number (in seconds)

    --- --- --- ---

    Gitlab issue animations:
    A - no animation
    B - anim-mix-b
    C - anim-left-in or anim-right-in
    D - ?? <--- (not in use yet)
    E - anim-scale-up
 ------------- */

.css-animate,
.css-animate-slider {
    visibility: hidden;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: backwards;
    animation-play-state: running;
}

.css-animate.is-visible,
.css-animate-slider.is-visible {
    visibility: visible;
}

/** ------------------------------------------------> Opacity **/
.anim-opacity-in {
    animation: opacity-in 1.5s;
}

.anim-opacity-in-2s {
    animation: opacity-in 2s;
}

/** ------------------------------------------------> TranslateX **/
.anim-right-in {
    animation: right-in 1.5s;
}

.anim-right-in-1s {
    animation: right-in 1s;
}

.anim-right-in-0s3 {
    animation: right-in 0.3s;
}

.anim-left-in {
    animation: left-in 1.5s;
}

.anim-left-in-1s {
    animation: left-in 1s;
}

/** ------------------------------------------------> TranslateY **/
.anim-bottom-in-0s5 {
    animation: bottom-in 0.5s;
}

.anim-bottom-in {
    animation: bottom-in 1.5s;
}

.anim-top-in-0s35 {
    animation: top-in 0.25s;
}

.anim-top-in-0s5 {
    animation: top-in 0.5s;
}

.anim-top-in {
    animation: top-in 1.5s;
}

/** ------------------------------------------------> Rotate **/
.anim-rotate-left {
    animation: rotate-left 1.5s;
}

.anim-rotate-right {
    animation: rotate-right 1.5s;
}

/** ------------------------------------------------> Scale **/
.anim-scale-up {
    animation: scale-up-size 1.5s;
}

.anim-scale-down {
    animation: scale-down-size 1.5s;
}

/** ------------------------------------------------> Rotate 3D **/
.anim-rotate-3d-x {
    animation: rotate-3d-x 1.5s;
}

/** ----> Keyframes <---- **/
@keyframes opacity-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes opacity-out-07 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.7;
    }
}

@keyframes right-in {
    from {
        transform: translateX(100vw);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes left-in {
    from {
        transform: translateX(-100vw);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes bottom-in {
    from {
        transform: translateY(100vh);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes top-in {
    from {
        transform: translateY(-100vh);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes rotate-left {
    from {
        transform: rotate(359deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes rotate-right {
    from {
        transform: rotate(-359deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes scale-up-size {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes scale-down-size {
    from {
        transform: scale(2);
    }
    to {
        transform: scale(1);
    }
}

@keyframes rotate-3d-x {
    from {
        transform: rotateX(180deg);
    }
    to {
        transform: rotateX(0deg);
    }
}

/** ----> MIX ANIMATIONS <---- **/

/* ------------------------------------------------> Rotate 3D / Opacity in */
.anim-mix-b {
    animation: mix-b 1.5s;
}

@keyframes mix-b { /* Rotate 3D / Opacity in */
    from {
        opacity: 0;
        transform: rotateX(90deg);
    }
    to {
        transform: rotateX(0deg);
        opacity: 1;
    }
}