/* MagicKit - Animated Text */
.mk-animated-text {
	--mk-word-color: var(--mk-primary, #7b2ff7);
	margin: 0;
}

.mk-animated-text__words {
	position: relative;
	display: inline-block;
	color: var(--mk-word-color);
	vertical-align: bottom;
}

.mk-animated-gradient-yes .mk-animated-text__word {
	background-image: linear-gradient(90deg, var(--mk-primary, #7b2ff7), var(--mk-secondary, #f107a3));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mk-animated-text__word {
	display: inline-block;
	white-space: pre;
}

.mk-animated-text__words--typing::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 0.9em;
	margin-left: 3px;
	background-color: var(--mk-word-color);
	vertical-align: -0.05em;
	animation: mk-blink 0.8s step-end infinite;
}

@keyframes mk-blink {
	50% {
		opacity: 0;
	}
}

.mk-animated-text__words--fade,
.mk-animated-text__words--slide,
.mk-animated-text__words--clip,
.mk-animated-text__words--flip {
	overflow: hidden;
	vertical-align: bottom;
	transition: width 0.4s ease;
}

.mk-animated-text__words--flip {
	overflow: visible;
	perspective: 400px;
}

.mk-animated-text__word.is-out {
	transition: opacity 0.35s ease, transform 0.35s ease, clip-path 0.35s ease;
}

.mk-animated-text__words--fade .mk-animated-text__word.is-out {
	opacity: 0;
}

.mk-animated-text__words--slide .mk-animated-text__word.is-out {
	opacity: 0;
	transform: translateY(-100%);
}

.mk-animated-text__words--clip .mk-animated-text__word.is-out {
	clip-path: inset(0 100% 0 0);
}

.mk-animated-text__words--flip .mk-animated-text__word.is-out {
	opacity: 0;
	transform: rotateX(90deg);
}

.mk-animated-text__word.is-in {
	animation: 0.45s ease both;
}

.mk-animated-text__words--fade .mk-animated-text__word.is-in {
	animation-name: mk-at-fade;
}

.mk-animated-text__words--slide .mk-animated-text__word.is-in {
	animation-name: mk-at-slide;
}

.mk-animated-text__words--clip .mk-animated-text__word.is-in {
	animation-name: mk-at-clip;
}

.mk-animated-text__words--flip .mk-animated-text__word.is-in {
	animation-name: mk-at-flip;
}

@keyframes mk-at-fade {
	from {
		opacity: 0;
	}
}

@keyframes mk-at-slide {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
}

@keyframes mk-at-clip {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes mk-at-flip {
	from {
		opacity: 0;
		transform: rotateX(-90deg);
	}
}