/*text animetions*/

.hideenSpan {
    overflow: hidden;
    display: flex;
    align-items: baseline;
    .future {
        width: 35.7%;
        height: auto;
        object-fit: contain;
        overflow: hidden;
    }
    &>.starting {
        width: 75.18%;
        height: auto;
        .starting {
            width: 100%;
            height: auto;
            object-fit: contain;
            overflow: hidden;
        }
    }
}

.mv-text-anime {
    transform: translateY(-100%);
    animation: showT .4s forwards;
    transition-timing-function: cubic-bezier(.21, .7, .81, .58);
    display: inline-block;
}

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

.main-copy {
    display: flex;
}

.anime-up-slow,
.anime-up-fast {
    opacity: 0;
}

.anime-up-slow.displayed,
.anime-up-fast.displayed {
    opacity: 1;
}

.anime-up-slow.displayed span,
.anime-up-fast.displayed span {
    display: inline-block;
}

.anime-up-slow.displayed>span,
.anime-up-fast.displayed>span {
    overflow: hidden;
}

.anime-up-slow.displayed>span>span,
.anime-up-fast.displayed>span>span {
    animation: showTextFromBottom 1s backwards;
    transition-timing-function: cubic-bezier(.21, .7, .81, .58);
}

@keyframes showTextFromBottom {
    0% {
        opacity: 1;
        transform: translateY(100%);
        font-size: 0.95em;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        font-size: 1em;
    }
}

.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);
    }
}

.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: .8s;
}

.delay-a {
    animation-delay: 1.2s;
    animation-direction: 10s;
    opacity: 0;
}

.delay-b {
    animation-delay: 2s;
}

.bgextend {
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-delay: 1.2s;
    opacity: 1 !important;
    &.blue {
        animation-name: fvCopy-w;
    }
    &.light-blue {
        animation-name: fvCopy;
    }
    &.cream-blue {
        animation-name: fvCopy-w;
    }
}

@keyframes fvCopy {
    from {
        color: rgba(39, 66, 82, 0);
    }
    to {
        color: rgba(39, 66, 82, 1);
    }
}

@keyframes fvCopy-w {
    from {
        color: rgba(255, 255, 255, 0);
    }
    to {
        color: rgba(255, 255, 255, 1);
    }
}

.bgextend::before {
    z-index: -1;
    animation-name: bgextendAnimeBase;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    animation-timing-function: ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    opacity: 0;
    background-color: #274252;
}

.bgextend.blue::before {
    background-color: #274252;
}

.bgextend.light-blue::before {
    background-color: #4b6f8110;
}

.bgextend.cream-blue::before {
    background-color: #6297ad;
}

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