wizard-animation.scss

/* Put here animation specific styles */
$orange: #FF5F19;
$orange-alt: #FA8E6A;
$white: #FFFFFF;

.celebration-container {
	position: relative;
	
	.bubble-container {
		position: absolute;
		left: 0;
		top: 20%;
		width: 50px;
		height: 50%;
		z-index: 0;
		
		&.bubble-container--right {
			left: auto;
			right: 0;
		}
	}
	
	@media (min-width: 600px) {
		max-width: 550px;
		margin: 0 auto;
		
		.bubble-container {
			left: -80px;
			width: 100px;
			
			&.bubble-container--right {
				right: -80px;
			}
		}
	}
}

.celebration-message {
	max-width: 450px;
	/* This makes sure that the text stays above the bubbles. */
	position: relative;
	z-index: 1;
}

#blinking-face-obj {
	position: relative;
	z-index: 5;
	width: 52px;
	height: 52px;
	margin-bottom: 25px;
}

/* Magic Dot thing */

.magic-dot {
	display: inline-block;
	position: absolute;
	top: 30px;
	right: 30px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transition: all .5s ease-in;
	background-color: $orange;
	z-index: 1;
}

.magic-dot-expanded {
	width: 1200px;
	height: 1200px;
	top: -200px;
	right: -200px;
}

/* Magic Texts */

.wizard-end-container {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	padding: 20px;
}

.wizard-end-appear {
	visibility: visible;
}

.magic-text-container .magic-text {
	max-width: 400px;
	color: $white;
	text-align: center;
	z-index: 2;
	$delay: .05s;
	transform: scale3d(0,0,0);
	transition: all .3s cubic-bezier(0, -2, 0, 2) $delay;
	
	@for $nth from 1 through 4 {
		&:nth-child(#{$nth}) {
			transition-delay: $delay + ($nth * 0.15s);
		}
	}
}

.magic-text-container.magic-text-container-appear .magic-text {
	transform: scale3d(1,1,1);
}