/*
 *	Kinetic Typography definitions
 */

.kineticTypographyContainer {
    overflow: hidden;
    margin: 0;
    position: relative;
}

.kineticTypographyText {
	position: absolute;
	text-align: center;
	max-width: 40%;
	white-space: normal; /* allow wrapping */
	transform-origin: top left;
	opacity: 0;
	animation: zoomMove linear forwards;
	font-size: var(--standard-font-size);
	/* font-size: var(--headline-font-size); */
}

/* Keyframes for the zoom and move animation */
@keyframes zoomMove {
	0% {
		transform: translate(0, 0) scale(0.1);
		opacity: 0;
	}
	30% {
		transform: translate(var(--dx), var(--dy)) scale(1);
		opacity: 1;
	}
	60% {
		transform: translate(var(--dx), var(--dy)) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(var(--dx), var(--dy)) scale(1);
		opacity: 0;
	}
}