.container
	header
	input(type="checkbox" class="trigger" checked)
	nav
		- var i = 6
			while i--
				a(href="").block
	main Inspired by 
		a(href="https://dribbble.com/shots/1375652-Gif-Animation-Abracadabra-App" target="_blank") this Dribbble

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
$container-height: 95vh;
$header-height: 60px;
$animation-duration: 0.2s;
$icons: "\f11e", "\f132", "\f131", "\f119", "\f127", "\f145";
$web-font: "FontAwesome";
$color1: #f9f9f9;
$color2: #32446A;


html,body {
	height: 100%;
	background-color: #333;
}

.container {
	width: $container-height*9/16;
	height: $container-height;
	box-shadow: 0 4px 12px rgba(0,0,0,0.75);
	background-color: #999;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

header {
	height: $header-height;
	margin-bottom: 10px;
	background-color: darken($color2,10%);
	
	&:before {
		content: '\f0c9';
		font-family: $web-font;
		font-size: 1.5rem;
		color: rgba(0,0,0,0.45);
		position: fixed;
		top: 0;
		left: 0;
		width: $header-height;
		height: $header-height;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.trigger {
	position: fixed;
	top: 0;
	left: 0;
	width: $header-height;
	height: $header-height;
	margin: 0;
	opacity: 0;
	z-index: 10;
	cursor: pointer;

	&:checked {
		+ nav {
			transition-delay: 0s;
			height: calc(100% - #{$header-height});
			
			&:before {
				width: 100%;
			}

			.block {
				
				&:nth-child(1){
					animation-name: horizontal;
					animation-delay: $animation-duration*1;
				}

				&:nth-child(2){
					animation-name: vertical;
					animation-delay: $animation-duration*2;
				}

				&:nth-child(3){
					animation-name: vertical;
					animation-delay: $animation-duration*4;
				}

				&:nth-child(4){
					animation-name: horizontal;
					animation-delay: $animation-duration*3;
				}

				&:nth-child(5){
					animation-name: horizontal;
					animation-delay: $animation-duration*5;
				}

				&:nth-child(6){
					animation-name: vertical;
					animation-delay: $animation-duration*6;
				}
			}
		}
	}
}

nav {
	width: 100%;
	height: 10px;
	perspective: 1000px;
	transform-style: preserve-3d;
	border-top: 10px solid $color2;
	box-sizing: border-box;
	position: absolute;
	top: $header-height;
	left: 0;
	transition: height 0s ease $animation-duration*7;
	
	&:before {
		content: '';
		position: absolute;
		top: -10px;
		left: 0;
		width: 0;
		height: 10px;
		background-color: $color1;
		transition: width $animation-duration*7 cubic-bezier(0.9,0.05,0.7,0.2);
		animation: nav-intro $animation-duration*7 cubic-bezier(0.9,0.05,0.7,0.2);
	}
}

.block {
	width: 50%;
	height: 33.33%;
	float: left;
	outline: 1px solid rgba(0,0,0,0.45);
	display: block;
	text-decoration: none;
	animation-duration: $animation-duration;
	animation-timing-function: cubic-bezier(0.9,0.05,0.7,0.2);
	animation-fill-mode: both;
	
	&:before {
		height: 100%;
		font-size: 2.5rem;
		font-family: $web-font;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	@for $i from 1 to 7 {
		&:nth-child(#{$i}){
			&:before {
				content: nth($icons,$i);
			}
		}
	}

	&:nth-child(1){
		background-color: $color1;
		color: $color2;
		transform: rotateX(-90deg);
		transform-origin: top center;
		animation-name: horizontal-reverse;
		animation-delay: $animation-duration*6;
	}
	
	&:nth-child(2){
		background-color: $color2;
		color: $color1;
		transform: rotateY(90deg);
		transform-origin: left center;
		animation-name: vertical-reverse;
		animation-delay: $animation-duration*5;
	}
	
	&:nth-child(3){
		background-color: $color2;
		color: $color1;
		transform: rotateY(-90deg);
		transform-origin: right center;
		animation-name: vertical-reverse;
		animation-delay: $animation-duration*3;
	}
	
	&:nth-child(4){
		background-color: $color1;
		color: $color2;
		transform: rotateX(-90deg);
		transform-origin: top center;
		animation-name: horizontal-reverse;
		animation-delay: $animation-duration*4;
	}
	
	&:nth-child(5){
		background-color: $color1;
		color: $color2;
		transform: rotateX(-90deg);
		transform-origin: top center;
		animation-name: horizontal-reverse;
		animation-delay: $animation-duration*2;
	}
	
	&:nth-child(6){
		background-color: $color2;
		color: $color1;
		transform: rotateY(90deg);
		transform-origin: left center;
		animation-name: vertical-reverse;
		animation-delay: $animation-duration*1;
	}
}

main {
	box-sizing: border-box;
	padding: 20px;
}


// ******************************
// ***** Animation **************
// ******************************

// horizontal -----------------------------

@keyframes horizontal {
	0% { visibility: hidden; opacity: 0;}
	1% { visibility: visible; opacity: 1;}
	100% { transform: rotateX(0deg); visibility: visible; opacity: 1;}
}

@keyframes horizontal-reverse {
	0% { transform: rotateX(0deg); visibility: visible;}
	99% { visibility: visible; opacity: 1;}
	100% { visibility: hidden; opacity: 0;}
}


// vertical -----------------------------

@keyframes vertical {
	0% { visibility: hidden; opacity: 0;}
	1% { visibility: visible; opacity: 1;}
	100% { transform: rotateY(0deg); visibility: visible; opacity: 1;}
}

@keyframes vertical-reverse {
	0% { transform: rotateY(0deg); visibility: visible; opacity: 1;}
	99% { visibility: visible; opacity: 1;}
	100% { visibility: hidden; opacity: 0;}
}


// nav:before width reset -----------------------------

@keyframes nav-intro {
	0% { width: 0%;}
}