@import "settings/mixins";

.civi-fancy-heading {
	margin: 0 !important;
	line-height: 1.25;

	.civi-fancy-heading-before,
	.civi-fancy-heading-animated b {
		line-height: inherit;
	}
}

.civi-fancy-heading-animated {
	position: relative;

	b {
		display: inline-block;
		position: absolute;
		white-space: nowrap;
		left: 0;
		top: 0;
	}

	.civi-fancy-heading-show {
		position: relative;
	}
}

.civi-fancy-heading-loading {
	.civi-fancy-heading-animated {
		overflow: hidden;
		vertical-align: top;

		&:after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			height: 3px;
			width: 0;
			background: currentColor;
			z-index: 2;
			-webkit-transition: width 0.3s -0.1s;
			-moz-transition: width 0.3s -0.1s;
			transition: width 0.3s -0.1s;
		}
	}

	.is-loading::after {
		width: 100%;
		-webkit-transition: width 3s;
		-moz-transition: width 3s;
		transition: width 3s;
	}

	b {
		top: 0.2em;
		opacity: 0;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		top: 0;
	}
}

.civi-fancy-heading-typing {
	.civi-fancy-heading-animated {
		font-weight: bolder;
	}

	.typed-cursor {
		vertical-align: text-bottom;
	}
}

.civi-fancy-heading-zoom-in {
	.civi-fancy-heading-animated {
		perspective: 300px;
	}

	b {
		opacity: 0;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		-webkit-animation: zoom-in 0.8s;
		-moz-animation: zoom-in 0.8s;
		animation: zoom-in 0.8s;
	}
}

@-webkit-keyframes zoom-in {
	0% {
		opacity: 0.4;
		@include transform(scale(1.3));
	}
	100% {
		opacity: 1;
		@include transform(scale(1));
	}
}

.civi-fancy-heading-zoom-out {
	b {
		opacity: 0;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		-webkit-animation: star-zoom-out 0.8s;
		-moz-animation: star-zoom-out 0.8s;
		animation: star-zoom-out 0.8s;
	}
}

@keyframes star-zoom-out {
	0% {
		opacity: 0.4;
		@include transform(scale(0.5));
	}
	100% {
		opacity: 1;
		@include transform(scale(1));
	}
}

.civi-fancy-heading-slider-right {
	b {
		opacity: 0;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		-webkit-animation: slider-right-in 0.6s;
		-moz-animation: slider-right-in 0.6s;
		animation: slider-right-in 0.6s;
	}

	.civi-fancy-heading-hidden {
		-webkit-animation: slider-right-out 0.6s;
		-moz-animation: slider-right-out 0.6s;
		animation: slider-right-out 0.6s;
	}
}

@-webkit-keyframes slider-right-in {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100%);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(10%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes slider-right-in {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100%);
	}
	60% {
		opacity: 1;
		-moz-transform: translateX(10%);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@keyframes slider-right-in {
	0% {
		opacity: 0;
		@include transform(translateX(-100%));
	}
	60% {
		opacity: 1;
		@include transform(translateX(10%));
	}
	100% {
		opacity: 1;
		@include transform(translateX(0));
	}
}

@-webkit-keyframes slider-right-out {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	60% {
		opacity: 0;
		-webkit-transform: translateX(110%);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateX(100%);
	}
}

@-moz-keyframes slider-right-out {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
	60% {
		opacity: 0;
		-moz-transform: translateX(110%);
	}
	100% {
		opacity: 0;
		-moz-transform: translateX(100%);
	}
}

@keyframes slider-right-out {
	0% {
		opacity: 1;
		@include transform(translateX(0));
	}
	60% {
		opacity: 0;
		@include transform(translateX(110%));
	}
	100% {
		opacity: 0;
		@include transform(translateX(100%));
	}
}

.civi-fancy-heading-slider-left {
	b {
		opacity: 0;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		-webkit-animation: slider-left-in 0.6s;
		-moz-animation: slider-left-in 0.6s;
		animation: slider-left-in 0.6s;
	}

	.civi-fancy-heading-hidden {
		-webkit-animation: slider-left-out 0.6s;
		-moz-animation: slider-left-out 0.6s;
		animation: slider-left-out 0.6s;
	}
}

@keyframes slider-left-in {
	0% {
		opacity: 0;
		@include transform(translateX(100%));
	}
	60% {
		opacity: 1;
		@include transform(translateX(-10%));
	}
	100% {
		opacity: 1;
		@include transform(translateX(0));
	}
}

@keyframes slider-left-out {
	0% {
		opacity: 1;
		@include transform(translateX(0));
	}
	60% {
		opacity: 0;
		@include transform(translateX(-110%));
	}
	100% {
		opacity: 0;
		@include transform(translateX(-100%));
	}
}

.civi-fancy-heading-slider-top {
	b {
		opacity: 0;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		-webkit-animation: slider-top-in 0.6s;
		-moz-animation: slider-top-in 0.6s;
		animation: slider-top-in 0.6s;
	}

	.civi-fancy-heading-hidden {
		-webkit-animation: slider-top-out 0.6s;
		-moz-animation: slider-top-out 0.6s;
		animation: slider-top-out 0.6s;
	}
}

@keyframes slider-top-in {
	0% {
		opacity: 0;
		@include transform(translateY(100%));
	}
	60% {
		opacity: 1;
		@include transform(translateY(-10%));
	}
	100% {
		opacity: 1;
		@include transform(translateY(0));
	}
}

@keyframes slider-top-out {
	0% {
		opacity: 1;
		@include transform(translateY(0));
	}
	60% {
		opacity: 0;
		@include transform(translateY(-110%));
	}
	100% {
		opacity: 0;
		@include transform(translateY(-100%));
	}
}

.civi-fancy-heading-slider-bottom {
	b {
		opacity: 0;
	}

	.civi-fancy-heading-show {
		opacity: 1;
		-webkit-animation: slider-bottom-in 0.6s;
		-moz-animation: slider-bottom-in 0.6s;
		animation: slider-bottom-in 0.6s;
	}

	.civi-fancy-heading-hidden {
		-webkit-animation: slider-bottom-out 0.6s;
		-moz-animation: slider-bottom-out 0.6s;
		animation: slider-bottom-out 0.6s;
	}
}

@keyframes slider-bottom-in {
	0% {
		opacity: 0;
		@include transform(translateY(-100%));
	}
	60% {
		opacity: 1;
		@include transform(translateY(10%));
	}
	100% {
		opacity: 1;
		@include transform(translateY(0));
	}
}

@keyframes slider-bottom-out {
	0% {
		opacity: 1;
		@include transform(translateY(0));
	}
	60% {
		opacity: 0;
		@include transform(translateY(110%));
	}
	100% {
		opacity: 0;
		@include transform(translateY(100%));
	}
}

.civi-fancy-heading-rotate {
	.civi-fancy-heading-animated {
		perspective: 300px;
	}

	b {
		opacity: 0;
		@include transform-origin(50% 100%);
		@include transform(rotateX(180deg));
	}

	.civi-fancy-heading-show {
		opacity: 1;
		@include transform(rotateX(0deg));
		-webkit-animation: cd-rotate-1-in 1.2s;
		-moz-animation: cd-rotate-1-in 1.2s;
		animation: cd-rotate-1-in 1.2s;
	}

	.civi-fancy-heading-hidden {
		@include transform(rotateX(180deg));
		-webkit-animation: cd-rotate-1-out 1.2s;
		-moz-animation: cd-rotate-1-out 1.2s;
		animation: cd-rotate-1-out 1.2s;
	}
}

@-webkit-keyframes cd-rotate-1-in {
	0% {
		-webkit-transform: rotateX(180deg);
		opacity: 0;
	}
	35% {
		-webkit-transform: rotateX(120deg);
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(360deg);
		opacity: 1;
	}
}

@-moz-keyframes cd-rotate-1-in {
	0% {
		-moz-transform: rotateX(180deg);
		opacity: 0;
	}
	35% {
		-moz-transform: rotateX(120deg);
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	100% {
		-moz-transform: rotateX(360deg);
		opacity: 1;
	}
}

@keyframes cd-rotate-1-in {
	0% {
		@include transform(rotateX(180deg));
		opacity: 0;
	}
	35% {
		@include transform(rotateX(120deg));
		opacity: 0;
	}
	65% {
		opacity: 0;
	}
	100% {
		@include transform(rotateX(360deg));
		opacity: 1;
	}
}

@-webkit-keyframes cd-rotate-1-out {
	0% {
		-webkit-transform: rotateX(0deg);
		opacity: 1;
	}
	35% {
		-webkit-transform: rotateX(-40deg);
		opacity: 1;
	}
	65% {
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(180deg);
		opacity: 0;
	}
}

@-moz-keyframes cd-rotate-1-out {
	0% {
		-moz-transform: rotateX(0deg);
		opacity: 1;
	}
	35% {
		-moz-transform: rotateX(-40deg);
		opacity: 1;
	}
	65% {
		opacity: 0;
	}
	100% {
		-moz-transform: rotateX(180deg);
		opacity: 0;
	}
}

@keyframes cd-rotate-1-out {
	0% {
		@include transform(rotateX(0deg));
		opacity: 1;
	}
	35% {
		@include transform(rotateX(-40deg));
		opacity: 1;
	}
	65% {
		opacity: 0;
	}
	100% {
		@include transform(rotateX(180deg));
		opacity: 0;
	}
}
