/**
 * Unlock Heading Widget
 * Base styles and entrance animations
 */

/* Wrapper */
.unlock-heading-wrapper {
	display: block;
}

.unlock-heading-wrapper .unlock-heading-title {
	margin: 0;
}

/* Entrance animation base */
.unlock-heading-animate {
	animation-fill-mode: both;
}

.unlock-heading-animate .unlock-heading-title {
	display: inline-block;
}

/* Keyframes: Fade */
@keyframes unlock-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes unlock-fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes unlock-fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes unlock-fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-20px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes unlock-fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(20px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Keyframes: Slide */
@keyframes unlock-slideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes unlock-slideInDown {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes unlock-slideInLeft {
	from {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes unlock-slideInRight {
	from {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

/* Keyframes: Zoom */
@keyframes unlock-zoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes unlock-zoomOut {
	from {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
	to {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
}

/* Keyframes: Bounce & Rotate */
@keyframes unlock-bounceIn {
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}
	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

@keyframes unlock-rotateIn {
	from {
		opacity: 0;
		transform: rotate3d(0, 0, 1, -200deg);
	}
	to {
		opacity: 1;
		transform: rotate3d(0, 0, 1, 0);
	}
}