/* Homepage Hero Loop Text Animation
------------------------------------------- */

.loop-text {
    overflow-y: visible;
    --loop-text-easing-out: cubic-bezier(0.5, 0, 0.75, 0.15);
    --loop-text-easing-in: cubic-bezier(0.25, 0.75, 0.25, 1.15);
    /* https://easings.net */
}

.loop-text ul li .stk-block-icon-list-item__text {
    opacity: 0;
}

.loop-text ul li .stk-block-icon-list-item__text * {
    overflow-y: visible;
}

.loop-text ul li .stk-block-icon-list-item__text .letter {
    display: inline-block;
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
    overflow-y: visible;
}

.loop-text ul li .stk-block-icon-list-item__text .letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s var(--loop-text-easing-out);
}

.loop-text ul li .stk-block-icon-list-item__text .letter.behind {
    transform: rotateX(-90deg);
}

.loop-text ul li .stk-block-icon-list-item__text .letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s var(--loop-text-easing-in);
}