/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Bug Fest CSS: Frontend
 */

:root {
	--spacing: 10px;
	--color__pink: #D418E8;
	--color__green: #00FF32;
}

@media ( min-width: 1000px ) {
	:root {
		--spacing: 20px;
	}
}

@media ( min-width: 1400px ) {
	:root {
		--spacing: 30px;
	}
}



.wrap {
	padding: var( --spacing );
}

.clipper {
	position: absolute;
	clip: rect( 0, auto, auto, 0 );
}

[class*="face--"] {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translate3d( 0, 0, 0 );
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}



html,
body,
#page {
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	perspective: 100vw;
}

#page {
	transition: transform 0.25s ease-in-out;
	overflow: visible;
}

#page #page__main {
	position: relative;
	height: 100%;
	width: 100%;
	transition: transform 0.25s ease-in-out;
	transform: translateZ( -50vh );
	transform-style: preserve-3d;
}

	#page #page__main #failure.face--top {
		transform: rotateX( 90deg ) translateZ( 50vh );
		background: red;
		display: none;
		
	}

	#page #page__main #front.face--front {
		transform: translateZ( 50vh );
	}

	#page #page__main #success.face--bottom {
		transform: rotateX( -90deg ) translateZ( 50vh );
		background: var( --color__green );
		display: none;
	}

	#page #page__main #front {
		width: 100%;
		height: 100%;
		perspective: 100vw;
	}

		#page #page__main #front #left {
			position: absolute;
			width: 50%;
			left: 0;
			height: 100%;
			transform-style: preserve-3d;
			transform: translateZ( -25vw );
			transition: transform 1.25s cubic-bezier(0.68, -0.55, 0.265, 1.55), left 0.25s ease-in-out;
		}

			#page #page__main #front #left .face--front {
				transform: translateZ( 25vw );
			}

				#page #page__main #front #left .face--front section {
					width: 200%;
				}

			#page #page__main #front #left .face--right {
				transform: translateX( 25vw ) rotateY( 90deg );
			}

			#page #page__main #front #left .face--back {
				transform: translateZ( -25vw ) rotateY( 180deg );
				background: var( --color__green );
			}
			#page #page__main #front #left .face--left {
				transform: translateX( -25vw ) rotateY( -90deg );
				background: var( --color__pink );
			}

			#page #page__main #front #left section {
				position: absolute;
				width: 100%;
				left: 0;
				height: 100%;
			}

		#page #page__main #front #right {
			position: absolute;
			left: 50%;
			width: 50%;
			height: 100%;
			transform-style: preserve-3d;
			transform: translateZ( -25vw );
			transition: transform 1.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s, left 0.25s ease-in-out;
		}

			#page #page__main #front #right .face--front {
				transform: translateZ( 25vw );
			}

				#page #page__main #front #right .face--front section {
					width: 200%;
				}

			#page #page__main #front #right .face--right {
				transform: translateX( 25vw ) rotateY( 90deg );
				background: var( --color__green );
			}
			#page #page__main #front #right .face--back {
				transform: translateZ( -25vw ) rotateY( 180deg );
				background: var( --color__pink );
			}

			#page #page__main #front #right .face--left {
				transform: translateX( -25vw ) rotateY( -90deg );
			}

			#page #page__main #front #right section {
				position: absolute;
				width: 100%;
				right: 0;
				height: 100%;
			}



.transitioning #page__main {
	transform: scale( 0.8 ) translateZ( -50vh ) !important;
}
	

.page__sign-up #front #left {
	transform: translateZ( -25vw ) rotateY( -90deg ) !important;
}
.page__sign-up #front #right {
	transform: translateZ( -25vw ) rotateY( 90deg ) !important;
}

.success #page__main {
	transform: translateZ( -50vh ) rotateX( 90deg ) !important;
	transition: transform 1.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.failure #page__main {
	transform: translateZ( -50vh ) rotateX( -90deg ) !important;
	transition: transform 1.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

	.success.transitioning #page,
	.failure.transitioning #page {
		transform: scale( 0.8 )
	}

	.success #page #page__main #failure.face--top,
	.success #page #page__main #success.face--bottom,
	.failure #page #page__main #failure.face--top,
	.failure #page #page__main #success.face--bottom {
		display: block;
	}



@media ( max-width: 999px ) { 
	.page__sign-up #page #page__main #front {
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		display: flex;
		flex-direction: column;
	}

		.transitioning #page #page__main #front {
			overflow: visible;
		}

		#page #page__main #front #left,
		#page #page__main #front #right {
			position: relative;
			width: 100%;
			left: 0;
			height: auto;

		}

		#page #page__main #front #left {
			transform: translateZ( -50vw );
			z-index: 100;
		}
		.page__sign-up #front #left {
			transform: translateZ( -50vw ) rotateY( -90deg ) !important;
		}

			#page #page__main #front #left .face--front {
				transform: translateZ( 50vw );
			}
			body:not( .transitioning ) #page #page__main #front #left .face--front {
				clip: unset;
			}

				#page #page__main #front #left .face--front section {
					width: 100%;
					height: var( --window_height );
				}

			#page #page__main #front #left .face--right {
				transform: translateX( 50vw ) rotateY( 90deg );
			}
			#page #page__main #front #left .face--back {
				transform: translateZ( -50vw ) rotateY( 180deg );
				top: 0;
			}
			#page #page__main #front #left .face--left {
				transform: translateX( -50vw ) rotateY( -90deg );
				top: 0;
			}

		#page #page__main #front #right {
			transform: translateZ( -50vw );
			flex: 1;
		}
		.page__sign-up #front #right {
			transform: translateZ( -50vw ) rotateY( 90deg ) !important;
		}

			#page #page__main #front #right .face--front {
				transform: translateZ( 50vw );
			}

				#page #page__main #front #right .face--front section {
					width: 100%;
					height: var( --window_height );
					bottom: 0;
					top: auto;
					left: 0;
					position: absolute;
				}

			#page #page__main #front #right .face--right {
				transform: translateX( 50vw ) rotateY( 90deg );
				background: var( --color__green );
			}
			#page #page__main #front #right .face--back {
				transform: translateZ( -50vw ) rotateY( 180deg );
				background: var( --color__pink );
			}

			#page #page__main #front #right .face--left {
				transform: translateX( -50vw ) rotateY( -90deg );
			}

			#page #page__main #front #right section {
				position: absolute;
				width: 100%;
				right: 0;
				height: 100%;
			}

	#page #page__main #front #left .face--right,
	#page #page__main #front #left section {
		height: auto;
		position: relative;
	}

	#page #page__main #front #right .face--left,
	#page #page__main #front #right section {
		height: 100%;
		position: relative;
	}
}

@media ( min-width: 1000px ) {
	.transitioning:not( .success ):not( .failure ) #front #left {
		left: -5% !important;
	}
	.transitioning:not( .success ):not( .failure ) #front #right {
		left: 55% !important;
	}

	.scroller {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;

		box-sizing: content-box;
		padding-right: 50px;
	}
}