.rotate-anime {
    animation: rotateAnime infinite linear;
    animation-duration: 23s;
}

@keyframes rotateAnime {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.bgtextend::before {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
}

.bgtextend {
    &.blue {
        &::before {
            background-color: var(--blue-color);
        }
    }
    &.orange {
        &::before {
            background-color: var(--orange-color);
        }
    }
    &.green {
        &::before {
            background-color: var(--green-color);
        }
    }
}

@keyframes bgextendAnimeBase {
    0% {
        width: 100%;
        opacity: 1;
    }
    100% {
        opacity: 1;
        width: 0;
    }
}

.bgtexture-anime {
    animation-name: bgtextureAnime;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    animation-timing-function: ease;
    transform: translate(-50%, 100%);
}

@keyframes bgtextureAnime {
    0% {
        opacity: 0;
        transform: translate(-50%, 100%);
    }
    1% {
        opacity: 1;
        transform: translate(-50%, 100%);
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.bgimg-anime {
    &::before {
        animation-name: bgimgAnime;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-delay: 0.6s;
        animation-timing-function: ease;
        transform: translate(32px, 32px);
        opacity: 0;
    }
}

@keyframes bgimgAnime {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    1% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(32px, 32px);
        opacity: 1;
    }
}

@media screen and (max-width: 900px) {
    @keyframes bgimgAnime {
        0% {
            transform: translate(0, 0);
            opacity: 0;
        }
        100% {
            transform: translate(16px, 16px);
            opacity: 1;
        }
    }
}

.delay1 {
    animation-delay: 0.2s;
}

.delay2 {
    animation-delay: 0.3s;
}

.delay3 {
    animation-delay: 0.4s;
}

.delay4 {
    animation-delay: 0.5s;
}

.delay5 {
    animation-delay: 0.6s;
}

.delay6 {
    animation-delay: 0.7s;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadel-r {
    animation-name: fadel-rAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadel-rAnime {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fader-l {
    animation-name: fader-lAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fader-lAnime {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fadeUp,
    .fadeIn,
    .fadeDown,
    .fadel-r,
    .fader-l {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}