.aum-animated-title {
    width: 100%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 1.2;
}

.aum-animated-inner {
    position: relative;
    display: inline-block;
}


.aum-animated-title .animated-base {
    display: block;
    position: relative;
    z-index: 1;
}

.aum-animated-title .animated-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.aum-animated-inner[data-direction="left-to-right"] .animated-overlay {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--animation-speed) var(--animation-easing);
}

.aum-animated-inner[data-direction="right-to-left"] .animated-overlay {
    clip-path: inset(0 0 0 100%);
    transition: clip-path var(--animation-speed) var(--animation-easing);
}

.aum-animated-inner[data-direction="top-to-bottom"] .animated-overlay {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--animation-speed) var(--animation-easing);
}

.aum-animated-inner[data-direction="bottom-to-top"] .animated-overlay {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--animation-speed) var(--animation-easing);
}

.aum-animated-inner[data-direction="center-out"] .animated-overlay {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path var(--animation-speed) var(--animation-easing);
}

.aum-animated-inner[data-direction="out-center"] .animated-overlay {
    clip-path: circle(100% at 50% 50%);
    transition: clip-path var(--animation-speed) var(--animation-easing);
}

.aum-animated-inner.animated-active[data-direction="left-to-right"] .animated-overlay {
    clip-path: inset(0 0 0 0);
}

.aum-animated-inner.animated-active[data-direction="right-to-left"] .animated-overlay {
    clip-path: inset(0 0 0 0);
}

.aum-animated-inner.animated-active[data-direction="top-to-bottom"] .animated-overlay {
    clip-path: inset(0 0 0 0);
}

.aum-animated-inner.animated-active[data-direction="bottom-to-top"] .animated-overlay {
    clip-path: inset(0 0 0 0);
}

.aum-animated-inner.animated-active[data-direction="center-out"] .animated-overlay {
    clip-path: circle(150% at 50% 50%);
}

.aum-animated-inner.animated-active[data-direction="out-center"] .animated-overlay {
    clip-path: circle(0% at 50% 50%);
}