.splitting .word,
.splitting .char {
    display: inline-block
}

.splitting .char {
    position: relative
}

.splitting .char::before,
.splitting .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    transition: inherit;
    user-select: none
}

.splitting {
    --word-center: calc((var(--word-total) - 1) / 2);
    --char-center: calc((var(--char-total) - 1) / 2);
    --line-center: calc((var(--line-total) - 1) / 2)
}

.splitting .word {
    --word-percent: calc(var(--word-index) / var(--word-total));
    --line-percent: calc(var(--line-index) / var(--line-total))
}

.splitting .char {
    --char-percent: calc(var(--char-index) / var(--char-total));
    --char-offset: calc(var(--char-index) - var(--char-center));
    --distance: calc( (var(--char-offset) * var(--char-offset)) / var(--char-center));
    --distance-sine: calc(var(--char-offset) / var(--char-center));
    --distance-percent: calc((var(--distance) / var(--char-center)))
}