/* Recommended styles for Splitting */
.splitting .word,
.splitting .char {
	display: inline-block;
}

/* Psuedo-element chars */
.splitting .char {
	position: relative;
}

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
	content: attr(data-char);
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	transition: inherit;
	user-select: none;
}

/* Expanded CSS Variables */

.splitting {
	/* The center word index */
	--word-center: calc((var(--word-total) - 1) / 2);

	/* The center character index */
	--char-center: calc((var(--char-total) - 1) / 2);

	/* The center character index */
	--line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
	/* Pecent (0-1) of the word's position */
	--word-percent: calc(var(--word-index) / var(--word-total));

	/* Pecent (0-1) of the line's position */
	--line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
	/* Percent (0-1) of the char's position */
	--char-percent: calc(var(--char-index) / var(--char-total));

	/* Offset from center, positive & negative */
	--char-offset: calc(var(--char-index) - var(--char-center));

	/* Absolute distance from center, only positive */
	--distance: calc(
	(var(--char-offset) * var(--char-offset)) / var(--char-center)
	);

	/* Distance from center where -1 is the far left, 0 is center, 1 is far right */
	--distance-sine: calc(var(--char-offset) / var(--char-center));

	/* Distance from center where 1 is far left/far right, 0 is center */
	--distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting.cells img { width: 100%; display: block; }

@supports ( display: grid ) {
	.splitting.cells {
	position: relative;
	overflow: hidden;
	background-size: cover;
	visibility: hidden;
	}

	.splitting .cell-grid {
	background: inherit;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr );
	}

	.splitting .cell {
	background: inherit;
	position: relative;
	overflow: hidden;
	}

	.splitting .cell-inner {
	background: inherit;
	position: absolute;
	visibility: visible;
	/* Size to fit the whole container size */
	width: calc(100% * var(--col-total));
	height: calc(100% * var(--row-total));
	/* Position properly */
	left: calc(-100% * var(--col-index));
	top: calc(-100% * var(--row-index));
	}

	/* Helper variables for advanced effects */
	.splitting .cell {
	--center-x: calc((var(--col-total) - 1) / 2);
	--center-y: calc((var(--row-total) - 1) / 2);

	/* Offset from center, positive & negative */
	--offset-x: calc(var(--col-index) - var(--center-x));
	--offset-y: calc(var(--row-index) - var(--center-y));

	/* Absolute distance from center, only positive */
	--distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );

	/* Absolute distance from center, only positive */
	--distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
	}
}

.splitting.cells img { width: 100%; display: block; }

@supports ( display: grid ) {
	.splitting.cells {
	position: relative;
	overflow: hidden;
	background-size: cover;
	visibility: hidden;
	}

	.splitting .cell-grid {
	background: inherit;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr );
	}

	.splitting .cell {
	background: inherit;
	position: relative;
	overflow: hidden;
	}

	.splitting .cell-inner {
	background: inherit;
	position: absolute;
	visibility: visible;
	/* Size to fit the whole container size */
	width: calc(100% * var(--col-total));
	height: calc(100% * var(--row-total));
	/* Position properly */
	left: calc(-100% * var(--col-index));
	top: calc(-100% * var(--row-index));
	}

	/* Helper variables for advanced effects */
	.splitting .cell {
	--center-x: calc((var(--col-total) - 1) / 2);
	--center-y: calc((var(--row-total) - 1) / 2);

	/* Offset from center, positive & negative */
	--offset-x: calc(var(--col-index) - var(--center-x));
	--offset-y: calc(var(--row-index) - var(--center-y));

	/* Absolute distance from center, only positive */
	--distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );

	/* Absolute distance from center, only positive */
	--distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
	}
}