/* -------------------------------------Text Animation Keyframes------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */
@keyframes fadeInUpText {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScaleText {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromBottomText {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes fadeInLeftText {
    from {
        opacity: 0;
        translate: -100% 0 0;
    }

    to {
        opacity: 1;
        translate: 0 0 0;
    }
}

@keyframes fadeInRightText {
    from {
        opacity: 0;
        translate: 100% 0 0;
    }

    to {
        opacity: 1;
        translate: 0 0 0;
    }
}

@keyframes scaleUpText {
    from {
        transform-origin: 50% 50%;
        scale: 0;
    }

    to {
        transform-origin: 50% 50%;
        scale: 1;
    }
}

@keyframes revealText {
    from {
        opacity: 0;
        clip-path: inset(45% 20% 45% 20%);
    }

    to {
        opacity: 1;
        clip-path: inset(0% 0% 0% 0%);
    }
}

@keyframes rotateInText {
    from {
        transform: rotate(-360deg);
    }

    to {
        transform: rotate(0);
    }
}

@keyframes clipRevealText {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes blurInText {
    from {
        filter: blur(20px);
    }

    to {
        filter: blur(0);
    }
}

@keyframes flipInText {
    from {
        transform: perspective(400px) rotateY(90deg);
    }

    to {
        transform: perspective(400px) rotateY(0deg);
    }
}

@keyframes zoomOutText {
    from {
        transform: scale(1.5) rotate(20deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes dropDownText {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ------------------------------------------Text Animation Apply------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------- */

.text-fade-in-up {
    animation: fadeInUpText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-fade-in-scale {
    animation: fadeInScaleText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-slide-in-from-bottom {
    animation: slideInFromBottomText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-fade-in-left {
    animation: fadeInLeftText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
}

.text-fade-in-right {
    animation: fadeInRightText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
}

.text-scale-up {
    animation: scaleUpText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-reveal {
    animation: revealText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-rotate-in {
    animation: rotateInText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-clip-reveal {
    animation: clipRevealText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-blur-in {
    animation: blurInText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-flip-in {
    animation: flipInText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-zoom-out {
    animation: zoomOutText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}

.text-drop-down {
    animation: dropDownText linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 30%;
}