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

.splitting .char {
	position: relative
}

.splitting .char::after,
.splitting .char::before {
	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));
	line-height: 30px
}

.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)))
}