.text-anim__wrapper {
    position: relative;
    display: inline-block
}

.js .text-anim__word {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-block;
    white-space: nowrap
}

.js .text-anim__word--in {
    position: relative;
    z-index: 2
}

.js .text-anim--rotate {
    --text-anim-duration: 0.85s;
    --text-anim-pause: 2.5s
}

.js .text-anim--rotate .text-anim__wrapper {
    -webkit-perspective: 300px;
    perspective: 300px
}

.js .text-anim--rotate .text-anim__word {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    transition: opacity calc(var(--text-anim-duration)/3) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
    transition: opacity calc(var(--text-anim-duration)/3) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back);
    transition: opacity calc(var(--text-anim-duration)/3) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back)
}

.js .text-anim--rotate .text-anim__word--in {
    opacity: 1;
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
}

.js .text-anim--rotate .text-anim__word--out {
    opacity: 0;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    transition: opacity calc(var(--text-anim-duration)/6) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
    transition: opacity calc(var(--text-anim-duration)/6) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back);
    transition: opacity calc(var(--text-anim-duration)/6) var(--ease-out), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back)
}

.js .text-anim--loader {
    --text-anim-duration: 2.5s;
    --text-anim-pause: 0s
}

.js .text-anim--loader .text-anim__word {
    color: transparent;
    transition: color .2s
}

.js .text-anim--loader .text-anim__word::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: translateY(100%) scaleX(0);
    transform: translateY(100%) scaleX(0);
    transition: -webkit-transform var(--text-anim-duration) var(--ease-out);
    transition: transform var(--text-anim-duration) var(--ease-out);
    transition: transform var(--text-anim-duration) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out)
}

.js .text-anim--loader .text-anim__word--in {
    color: currentColor
}

.js .text-anim--loader .text-anim__word--in::after {
    -webkit-transform: translateY(100%) scaleX(1);
    transform: translateY(100%) scaleX(1)
}

.js .text-anim--loader .text-anim__word--out {
    color: transparent
}

.js .text-anim--loader .text-anim__word--out::after {
    transition: none;
    -webkit-transform: translateY(100%) scaleX(0);
    transform: translateY(100%) scaleX(0)
}

.js .text-anim--slide {
    --text-anim-duration: 0.5s;
    --text-anim-pause: 3s
}

.js .text-anim--slide .text-anim__wrapper {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    padding: .1em 0
}

.js .text-anim--slide .text-anim__word {
    height: 100%;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.js .text-anim--slide .text-anim__word--in,
.js .text-anim--slide .text-anim__word--out {
    -webkit-animation-duration: var(--text-anim-duration);
    animation-duration: var(--text-anim-duration);
    -webkit-animation-timing-function: var(--ease-out-back);
    animation-timing-function: var(--ease-out-back)
}

.js .text-anim--slide .text-anim__word--in {
    -webkit-animation-name: text-anim-slide-in;
    animation-name: text-anim-slide-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.js .text-anim--slide .text-anim__word--out {
    -webkit-animation-name: text-anim-slide-out;
    animation-name: text-anim-slide-out
}

@-webkit-keyframes text-anim-slide-in {
    from {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes text-anim-slide-in {
    from {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes text-anim-slide-out {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

@keyframes text-anim-slide-out {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

.js .text-anim--zoom {
    --text-anim-duration: 0.85s;
    --text-anim-pause: 2.5s
}

.js .text-anim--zoom .text-anim__wrapper {
    -webkit-perspective: 300px;
    perspective: 300px
}

.js .text-anim--zoom .text-anim__word {
    opacity: 0;
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
    transition: opacity var(--text-anim-duration), -webkit-transform var(--text-anim-duration) var(--ease-out);
    transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out);
    transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out), -webkit-transform var(--text-anim-duration) var(--ease-out)
}

.js .text-anim--zoom .text-anim__word--in {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.js .text-anim--zoom .text-anim__word--out {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px)
}

.js .text-anim--push {
    --text-anim-duration: 0.65s;
    --text-anim-pause: 2.5s
}

.js .text-anim--push .text-anim__word {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    transition: none
}

.js .text-anim--push .text-anim__word--in,
.js .text-anim--push .text-anim__word--out {
    transition: opacity var(--text-anim-duration), -webkit-transform var(--text-anim-duration) var(--ease-out-back);
    transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out-back);
    transition: opacity var(--text-anim-duration), transform var(--text-anim-duration) var(--ease-out-back), -webkit-transform var(--text-anim-duration) var(--ease-out-back)
}

.js .text-anim--push .text-anim__word--in {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.js .text-anim--push .text-anim__word--out {
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px)
}

.js .text-anim--clip {
    --text-anim-duration: 0.7s;
    --text-anim-pause: 2s;
    --text-anim-border-width: 2px
}

.js .text-anim--clip .text-anim__wrapper {
    overflow: hidden;
    vertical-align: top
}

.js .text-anim--clip .text-anim__wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - .7em);
    height: 1.4em;
    width: var(--text-anim-border-width);
    background-color: var(--color-accent)
}

.js .text-anim--clip .text-anim__wrapper--pulse::after {
    -webkit-animation: text-anim-pulse .8s infinite;
    animation: text-anim-pulse .8s infinite
}

.js .text-anim--clip .text-anim__word {
    opacity: 0;
    padding-right: var(--text-anim-border-width)
}

.js .text-anim--clip .text-anim__word--in {
    opacity: 1
}

@-webkit-keyframes text-anim-pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes text-anim-pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}