@keyframes anim-fade {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

@keyframes anim-dflt {
    0% {
        opacity: 0;
        transform: translate3d(0, 5rem, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-title {
    0% {
        opacity: 0;
        transform: translate3d(0, 5rem, 0) skew(0, 8deg);
        transform-origin: left;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) skew(0, 0);
    }
}

@keyframes slideUpBounce {
    0% {
        translate: 0 100%;
        opacity: 0;
    }
    60% {
        translate: 0 -20%;
        opacity: 1;
    }
    80% {
        translate: 0 10%;
    }
    100% {
        translate: 0 0;
        opacity: 1;
    }
}

.anim {
    --delay: 0s;
    --duration: 1.5s;

    opacity: 0;

    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}

.anim.animated {
    animation-name: anim-dflt;
}

.anim-title.animated {
    animation-name: anim-title;
}

.anim-fade.animated {
    animation-name: anim-fade;
}

.slide-up-bounce.animated {
    animation-name: slideUpBounce;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
}

@media screen and (max-width: 767px) {
    .anim {
        --delay: 0s !important;
    }
}


/* animated title START */
@keyframes fade_up {
    0% {
        opacity: 0;
        translate: 0 50%;
    }
    100% {
        opacity: 1;
        translate: 0 0;
    }
}

.title:not(.animated),
.title-l:not(.animated),
.wysiwyg h2:not(.animated) {
    opacity: 0;
}

.word {
    white-space: nowrap;
}

.title .char, 
.title-l .char, 
.wysiwyg h2 .char {
    display: inline-block;
    opacity: 0;
    animation-name: fade_up;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: paused;
}

.title.animated .char, 
.title-l.animated .char,
.wysiwyg h2.animated .char {
    animation-play-state: running;
}
/* animated title END */