.anim-fade,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale {
    opacity: 0;
    transition:
        opacity var(--anim-duration, .8s) ease var(--anim-delay, 0s),
        transform var(--anim-duration, .8s) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0s);
    will-change: opacity, transform;
}

.anim-fade-up { transform: translateY(3rem); }
.anim-fade-down { transform: translateY(-3rem); }
.anim-fade-left { transform: translateX(3rem); }
.anim-fade-right { transform: translateX(-3rem); }
.anim-scale { transform: scale(.92); }

.anim-fade.is-shown,
.anim-fade-up.is-shown,
.anim-fade-down.is-shown,
.anim-fade-left.is-shown,
.anim-fade-right.is-shown,
.anim-scale.is-shown {
    opacity: 1;
    transform: none;
}

.anim-reveal {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
}
.anim-reveal.is-shown {
    clip-path: inset(0 0% 0 0);
    -webkit-clip-path: inset(0 0% 0 0);
    transition:
        clip-path var(--anim-duration, .9s) cubic-bezier(.76, 0, .24, 1) var(--anim-delay, 0s),
        -webkit-clip-path var(--anim-duration, .9s) cubic-bezier(.76, 0, .24, 1) var(--anim-delay, 0s);
}

.anim-clip::before {
    transform: scaleX(0);
    transform-origin: left center;
}
.anim-clip > .--txt {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
}
.anim-clip.is-shown::before {
    transform: scaleX(1);
    transition: transform .5s cubic-bezier(.76, 0, .24, 1) var(--anim-delay, 0s);
}
.anim-clip.is-shown > .--txt {
    clip-path: inset(0 0% 0 0);
    -webkit-clip-path: inset(0 0% 0 0);
    transition:
        clip-path .5s cubic-bezier(.76, 0, .24, 1) calc(var(--anim-delay, 0s) + .35s),
        -webkit-clip-path .5s cubic-bezier(.76, 0, .24, 1) calc(var(--anim-delay, 0s) + .35s);
}

.fill-char {
    color: transparent;
    transition: color .3s ease;
}
.fill-char.is-on {
    color: var(--anim-fill-color, #fff);
}

.anim-mask-up,
.anim-mask-down {
    transition: transform var(--anim-duration, .9s) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0s);
    will-change: transform;
}
.anim-mask-up { transform: translateY(80%); }
.anim-mask-down { transform: translateY(-80%); }
.anim-mask-up.is-shown,
.anim-mask-down.is-shown {
    transform: translateY(0);
}

.split-char {
    display: inline-block;
    opacity: 0;
    transform: scale(.4);
    transform-origin: center bottom;
    transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
    will-change: opacity, transform;
}
.split-char.is-on {
    opacity: 1;
    transform: none;
}

.split-char-d {
    display: inline-block;
    opacity: 0;
    transform: translateY(-0.7em);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.split-char-d.is-on {
    opacity: 1;
    transform: none;
}

.anim-textimg {
    position: relative;
}
.anim-textimg > img,
.anim-textimg > picture {
    opacity: 0;
}
.anim-textimg__rows {
    position: absolute;
    inset: 0;
}
.anim-textimg__sizer {
    opacity: 0;
}
.anim-textimg__row {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
    will-change: opacity, transform;
}
.anim-textimg__row > img,
.anim-textimg__row > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.anim-textimg__row img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.anim-textimg.is-shown .anim-textimg__row {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .anim-fade,
    .anim-fade-up,
    .anim-fade-down,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .anim-reveal {
        clip-path: none;
        -webkit-clip-path: none;
    }
    .anim-clip::before {
        transform: none;
    }
    .anim-clip > .--txt {
        clip-path: none;
        -webkit-clip-path: none;
    }
    .fill-char {
        color: var(--anim-fill-color, #fff);
    }
    .anim-mask-up,
    .anim-mask-down {
        transform: none;
    }
    .split-char,
    .split-char-d {
        opacity: 1;
        transform: none;
    }
    .anim-textimg > img,
    .anim-textimg > picture {
        opacity: 1;
    }
    .anim-textimg__row {
        opacity: 1;
        transform: none;
    }
}