.animation-wrap {overflow-x: clip;}

.animated-element {transition: 0.4s all;}
.animated-element[class*="animation-fade"] {opacity: 0; transition-property: opacity, transform; will-change: opacity, transform;}
.animation-fade-down {transform: translate3d(0, -100px, 0);}
.animation-fade-up {transform: translate3d(0, 100px, 0);}
.animation-fade-left {transform: translate3d(100px, 0, 0);}
.animation-fade-right {transform: translate3d(-100px, 0, 0);}
.animated-element[class*="animation-fade"].animated {opacity: 1; transform: translate3d(0, 0, 0);}

.text-insert-with-image-cable-horizontal::before, .text-insert-with-image-cable-horizontal::after {transform: scaleX(0); transition-duration: calc(var(--cable-x)/100 * 0.05s); transition-property: transform; transition-timing-function: linear}
.text-insert-with-image-cable-horizontal::before {transform-origin: center left;}
.text-insert-with-image-cable-horizontal::after {transition-delay: calc((var(--cable-x) + var(--cable-y))/100 * 0.05s + 0.2s); transform-origin: center right;}
.text-insert-with-image-inverted .text-insert-with-image-cable-horizontal::before {transform-origin: center right;}
.text-insert-with-image-inverted .text-insert-with-image-cable-horizontal::after {transform-origin: center left;}
.animated .text-insert-with-image-cable-horizontal::before, .animated .text-insert-with-image-cable-horizontal::after {transform: scaleX(1);}
.text-insert-with-image-cable-vertical {transform: scaleY(0); transform-origin: top center; transition-delay: calc((var(--cable-x))/100 * 0.05s + 0.1s); transition-duration: calc(var(--cable-y)/100 * 0.05s);  transition-property: transform; transition-timing-function: linear}
.animated .text-insert-with-image-cable-vertical {transform: scaleY(1);}
.text-insert-with-image-cable-corners::before, .text-insert-with-image-cable-corners::after {transition-duration: 0.1s; transition-property: clip-path; transition-timing-function: linear; clip-path: inset(0 0 100% 0);}
.text-insert-with-image-inverted .text-insert-with-image-cable-corners::before {clip-path: inset(100% 0 0 0);}
.text-insert-with-image-inverted .text-insert-with-image-cable-corners::after {clip-path: inset(0 100% 0 0);}
.text-insert-with-image-cable-corners::before {transition-delay: calc(var(--cable-x)/100 * 0.05s);}
.text-insert-with-image-cable-corners::after {transition-delay: calc((var(--cable-x) + var(--cable-y))/100 * 0.05s + 0.1s);}
.animated .text-insert-with-image-cable-corners::before, .animated .text-insert-with-image-cable-corners::after {clip-path: inset(0 0 0 0);}
.text-insert-with-image-cable-plug {clip-path: inset(100% 0 0 0); transition-duration: 0.1s; transition-property: clip-path; transition-delay: calc((2*var(--cable-x) + var(--cable-y))/100 * 0.05s + 0.2s); transition-timing-function: linear}
.animated .text-insert-with-image-cable-plug {clip-path: inset(0 0 0 0);}