/* =============================================
   Elemance Widget — Animated Heading
   ============================================= */

.elemance-anim-heading {
	line-height: 1.25;
}

.elemance-anim-heading__tag {
	margin: 0;
	line-height: inherit;
}

.elemance-anim-heading__before,
.elemance-anim-heading__after {
	display: inline;
}

.elemance-anim-heading__animated {
	display: inline;
	white-space: nowrap;
}

/* Cursor */
.elemance-anim-cursor {
	display: inline-block;
	width: 2px;
	height: 0.9em;
	background-color: #6c63ff;
	margin-left: 2px;
	vertical-align: middle;
	animation: elmc-cursor-blink 0.8s step-end infinite;
}

@keyframes elmc-cursor-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

/* Fade-rotate effect */
.elmc-anim-type--fade-rotate {
	display: inline-block;
	animation: none;
}

.elmc-anim-type--fade-rotate.elmc-leaving {
	animation: elmc-fade-rotate-out 0.4s ease forwards;
}

.elmc-anim-type--fade-rotate.elmc-entering {
	animation: elmc-fade-rotate-in 0.4s ease forwards;
}

@keyframes elmc-fade-rotate-in {
	from { opacity: 0; transform: translateY(12px) rotateX(-40deg); }
	to   { opacity: 1; transform: translateY(0)    rotateX(0deg); }
}

@keyframes elmc-fade-rotate-out {
	from { opacity: 1; transform: translateY(0)     rotateX(0deg); }
	to   { opacity: 0; transform: translateY(-12px) rotateX(40deg); }
}

/* Slide-up effect */
.elmc-anim-type--slide-up {
	display: inline-block;
	overflow: hidden;
}

.elmc-anim-type--slide-up.elmc-leaving {
	animation: elmc-slide-out 0.35s ease forwards;
}

.elmc-anim-type--slide-up.elmc-entering {
	animation: elmc-slide-in 0.35s ease forwards;
}

@keyframes elmc-slide-in {
	from { opacity: 0; transform: translateY(100%); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes elmc-slide-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-100%); }
}

/* Highlight effect */
.elmc-anim-type--highlight {
	display: inline;
	position: relative;
	z-index: 0;
}

.elmc-anim-type--highlight.elmc-highlight::after {
	content: '';
	position: absolute;
	left: -2px; right: -2px;
	bottom: 0;
	height: 35%;
	background-color: #6c63ff;
	z-index: -1;
	border-radius: 3px;
	transform: scaleX(0);
	transform-origin: left;
	animation: elmc-highlight-sweep 0.5s ease forwards;
}

@keyframes elmc-highlight-sweep {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* nowrap keeps the rotating phrase from jumping lines while it types, but on a
   phone a long phrase ("Digital Marketing Agency") would run off the screen
   instead. A line jump is the lesser evil there. 767px is Elementor's mobile
   breakpoint. */
@media (max-width: 767px) {
	.elemance-anim-heading__animated {
		white-space: normal;
	}
}