//  ORDER
//  01. LOADING
//  02. FACE-BUILD
//  03. FACE-MOVE
//  04. DEVICE-INSTRUCTIONS

//--- SRCSET-LIKE CSS BG MIXINS
@mixin bgImageCreator($image, $file-type) {
	background: url( "https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-med" + $file-type) no-repeat center center;
	background-size: contain;
	@media (min-width: 940px) {
		background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-large" + $file-type) no-repeat center center;
		background-size: contain;
	}
	@media (-webkit-max-device-pixel-ratio: 1) and (max-width: 500px), (max-resolution: 96dpi) and (max-width: 500px) {
  	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/172456/" + $image + "-small" + $file-type) no-repeat center center;
		background-size: contain;
	}
} 

* {
	box-sizing: border-box;
}

$gold: #a18a67;
 
//--- PAGE CODE
$background-color: #181818;
html,
body {
	// cursor: none;
	font-size: 10px;
	width: 100%;
	height: 100%;
	background: $background-color;
	font-family: "Helvetica", "Arial", sans-serif;
	overflow: hidden;
}

main {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
	min-width: 320px;
	min-height: 568px;
}
section {
	position: absolute;
	width: 100%;
	height: 100%;
}

//--- PRELOADER CODE
$loader-time: 3s;
$circle-length: 338 - 20;
$preloader-icon-size: 9vh;

.preloader-overlay {
	width: 100%;
	height: 100%;
	opacity: 0;
	background: $background-color;
	position: absolute;
	display: flex;
		align-items: center;
		justify-content: center;
	transition: opacity .25s ease-in-out;
	transform: translate3d(0,0,0);
	html.loading & {
		opacity: 1;
	}
}

svg.preloader-icon {
	width: $preloader-icon-size;
	height: $preloader-icon-size;
	
	html.loading & {
		animation-play-state: running;
	}
	html.hide-preloader {
		animation-play-state: paused;
	}
	
	@media (orientation: portrait) {
		@media (min-height: 800px) {
			width: 6vh;
			height: 6vh;	
		}
		@media (min-height: 800px) {
			width: 6vh;
			height: 6vh;	
		}
		@media (min-height: 1100px) {
			width: 5vh;
			height: 5vh;	
		}
	}
	@media (orientation: landscape) {
		@media (min-width: 500px) {
			width: 10vw;
			height: 10vw;
		}
		@media (min-width: 600px) {
			width: 9vw;
			height: 9vw;
		}
		@media (min-width: 800px) {
			width: 6vw;
			height: 6vw;
		}
		@media (min-width: 1000px) {
			width: 5vw;
			height: 5vw;
		}
		@media (min-width: 1600px) {
			width: 2.75vw;
			height: 2.75vw;
		}
	}
}


//--- DEVICE MOVE INSTRUCTIONS CODE

.instructions {
	position: absolute;
	background: rgba($background-color, .75);
	height: 100%;
	opacity: 0;
	transition: opacity .25s ease-in-out;
	width: 100%;
	z-index: 12;
	display: flex;
		justify-content: center;
		align-items: center;
	transform-style: preserve-3d;
	transform: translate3d(0,0,0);
	perspective: 500px;
	pointer-events: none;
	&.show {
		opacity: 1;
		transition: opacity .5s ease-in-out;
	}
	.move-mouse,
	.move-device {
		text-align: center;
		margin-bottom: 3%;
		img {
			display: block;
			height: auto;
			margin: 0 auto;
		}
		span {
//			display: none;
			color: white;
			font-family: Helvetica, Arial, sans-serif;
			font-weight: bold;
			font-size: 1.4rem;
			@media (min-width: 400px){
				font-size: 1.5rem;
			}
		}
	}
	.move-mouse {
		img {
			transform: translateZ(20px);
			animation: mouseMoveIcon 2s infinite cubic-bezier(.59, .24, .43, .75);
			animation-play-state: paused;
			width: 6.5rem;
			margin-bottom: 5%;
			@media (orientation: landscape) {
				@media (min-width: 1400px) {
					width: 9rem;
				}
			}
			@media (orientation: portrait) {
				width: 6.5rem;
				@media (min-width: 700px) {
					width: 8.5rem;
				}
			}
		}
	}
	.move-device {
		img {
			transform: translateZ(20px);
			animation: deviceMoveIcon 1.5s infinite ease-in-out;
			animation-play-state: paused;
			width: 3.5rem;
			margin-bottom: 30%;
			@media (orientation: landscape) {
				@media (min-width: 1300px) {
					width: 3.75rem;
				}
			}
			@media (orientation: portrait) {
				width: 3.5rem;
				@media (min-width: 700px) {
					margin-bottom: 40%;
					width: 4.15rem;
				}
				@media (min-width: 1000px) {
					width: 4.5rem;
				}
			}
		}
	}
}

.instructions.show img {
	animation-play-state: running;
}

@keyframes mouseMoveIcon {
	#{100/5*1}% { transform: translateZ(20px) translateX(0)    }
	#{100/5*2}% { transform: translateZ(20px) translateX(10%)  }
	#{100/5*3 + 7}% { transform: translateZ(20px) translateX(-10%) }
	#{100/5*4 + 7}% { transform: translateZ(20px) translateX(0)    }
	#{100/5*5}% { transform: translateZ(20px) translateX(0)    }
}

@keyframes deviceMoveIcon {
	0%   { transform: translateZ(20px) rotateY(-20deg) }
	50%  { transform: translateZ(20px) rotateY(20deg) }
	100% { transform: translateZ(20px) rotateY(-20deg)}
}

//--- IMAGE LAYER STRUCTURE CODE

.container {
	overflow: hidden;
	position: absolute;
	width: 100%; 
	height: 100%;
}

.parallax-layers, .build-layers {
	height: 100%;
	position: absolute;
	transform: translate3d(0, 0, 0) scale(1.45, 1.45) translate(-1%, 2%);
	width: 100%;
	overflow: hidden;
	
	// PORTRAIT MEDIA QUERIES
	@media (orientation: landscape) {
		transform: translate3d(0, 0, 0) scale(1.6, 1.6) translate(-1%, 6%);
		
		@media (min-height: 700px) {
			transform: translate3d(0, 0, 0) scale(1.25, 1.25) translate(-1%, 6.75%);
		}
		@media (min-height: 800px) {
			transform: translate3d(0, 0, 0) scale(1.15, 1.15) translate(-1%, 7%);
		}
		@media (min-height: 1080px) {
			transform: translate3d(0, 0, 0) scale(1.05, 1.05) translate(-1%, 3.75%);
		}
		@media (min-height: 1200px) {
			transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 2%);
		}
		@media (min-height: 1300px) {
			transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 1%);
		}
	}
	
	@media (orientation: portrait) {
		transform: translate3d(0, 0, 0) scale(1.45, 1.45) translate(-1%, 2%);
		
		@media (min-width: 500px){
			transform: translate3d(0, 0, 0) scale(1.2, 1.2) translate(-1%, 2%);
		}
		@media (min-width: 600px){
			transform: translate3d(0, 0, 0) scale(1.1, 1.1) translate(-1%, 2.25%);
		}
		@media (min-width: 800px){
			transform: translate3d(0, 0, 0) scale(1, 1) translate(-1%, 1.75%);
		}
	}

	div {
		height: 100%;
		position: absolute;
		width: 100%;
	}
}

//--- FACE-BUILD ANIMATION
$face-build-total-duration: 7;
$face-build-layer-duration: 1.75;
$face-build-number-of-steps: 6;
$build-ease: cubic-bezier(.35, -0.02, .35, 1);
$trigger-delay-per-layer: $face-build-total-duration/$face-build-number-of-steps;

$final-build: $trigger-delay-per-layer*$face-build-number-of-steps;
$build-completion-delay: $face-build-total-duration + .75;



.build-layers {
	// Fade out the build layers once the build is done
	opacity: 1;
	transition: opacity $face-build-layer-duration + s ease-in-out;
	transition-delay: $final-build + s;
	html.face-build & {
		opacity: 0;
	}
	[class*='build-0'] {
		will-change: opacity;
	}
}



@for $i from 1 through $face-build-number-of-steps {
	.build-#{$i} {
		@include bgImageCreator("build-0#{$i}", ".jpg");
//		background: red;
		opacity: 0;
		transition: opacity $face-build-layer-duration + s $build-ease;
		// Trigger layer animation one after another.
		// ($i - 1) makes sure the delay starts immediately
		transition-delay: $trigger-delay-per-layer*($i - 1) + s;
		html.face-build & {
			opacity: 1;
		}
	}
}


//--- FACE-PARALLAX LAYERS
.parallax-layers {
	transition: opacity $face-build-layer-duration + s $build-ease;
	// trigger delay  makes sure the delay starts immediately
	transition-delay: $trigger-delay-per-layer*($face-build-number-of-steps - 1) + s;
	opacity: 0;
	z-index: 1;
	html.face-build & {
		opacity: 1;
	}
}
// Create the Face Layers
$face-list: 1,2,4,5;

@each $num in $face-list {
	.face-#{$num} {
		@include bgImageCreator("0#{$num}-face", ".png");
	}
} 

// Face 3 excluded to create Eye move
.face-3 {
	overflow: hidden;
	div {
		width: 100%;
		height: 100%;
		transform-origin: center;
		@include bgImageCreator("03-face", ".png");
		
		html.face-build & {
			animation: eyeMoveLarge 8s infinite ease-in-out;
			animation-delay: $build-completion-delay - 2.25s;
			
			@media (orientation: landscape) {
				
				@media (min-width: 400px) {
					animation-name: eyeMoveSmall;
				}
				@media (min-width: 1100px) {
					animation-name: eyeMoveLarge;
				}
				@media (max-height: 700px) {
					animation-name: eyeMoveExtraSmall;
				}
			}
			@media (orientation: portrait) {
				animation-name: eyeMoveLarge;
			}
		}
	}
}

html.face-build .build-1, .build-1 {
	opacity: 1;
	animation: none;
}

@keyframes eyeMoveExtraSmall {
	0%   { transform: translateX(0) }
	80%  { transform: translateX(0) } 
	90%  { transform: translateX(.3%) }
	100% { transform: translateX(0) }
}
@keyframes eyeMoveSmall {
	0%   { transform: translateX(0) }
	80%  { transform: translateX(0) } 
	90%  { transform: translateX(.7%) }
	100% { transform: translateX(0) }
}
@keyframes eyeMoveLarge {
	0%   { transform: translateX(0) }
	80%  { transform: translateX(0) } 
	90%  { transform: translateX(1%) }
	100% { transform: translateX(0) }
}

.splatter {
	height: 100%;
	width: 100%;
	@include bgImageCreator("splatter", ".jpg");
	opacity: 0;
	transition: all $face-build-layer-duration + s;
	transition-delay: $build-completion-delay + .1s;
	html.face-build & {
		opacity: 1;
	}
}



//--- DESCRIPTION

.description {
	
	// display: none;
  width: 100%;
	line-height: 110%;
	text-align: center;
  background: linear-gradient(to bottom, rgba($background-color, 0), rgba($background-color, 0) 0%);
	
	margin: 0 auto;
	opacity: 0;
	padding: 10vh 2rem;
	padding-bottom: 6vh;
  position: absolute;
  	bottom: 0;
  	z-index: 11;
	transition: all 1s ease-out;
	transition-delay: $build-completion-delay + s;
	transform: translateY(10%);
	pointer-events: none;
	
	@media (min-width: 400px) {
		padding-left: 4rem;
		padding-right: 4rem;
	}
	
	@media (orientation: landscape) {
		padding-top: 12vh;
		@media (min-height: 700px) {
			padding-bottom: 7vh;
		}
		@media (min-width: 1300px) {
			padding-bottom: 9vh;
		}
	}
	
	@media (orientation: portrait) {
		@media (min-height: 1000px) {
			padding-bottom: 8.5vh;
		}
	}
//	@media (min-width: 1400px) {
//		padding-bottom: 7vh;
//	}
	
	html.face-build & {
		opacity: 1;
		transform: translateY(0);
		background: linear-gradient(to bottom, rgba($background-color, 0), rgba($background-color, 0.9) 60%);
//		background: rgba(red, .2);
	}
	
	
	//--- SIGNATURE
	
	svg.signature {
		height: 5rem;
		$translateX: translateX(5%);
		
		@media (orientation: landscape) {
			@media (min-height: 400px) {
				margin-bottom: .5%;
				transform: $translateX scale(1.1);
			}
			@media (min-height: 600px) {
				margin-bottom: 1.30%;
				transform: $translateX scale(1.3);
			}
			@media (min-height: 1000px) {
				margin-bottom: 1.25%;
				transform: $translateX scale(1.45);
			}
			@media (min-height: 1100px) {
				margin-bottom: 1.25%;
				transform: $translateX scale(1.7);
			}
		}
		@media (orientation: portrait) {
			@media (min-width: 300px) {
				margin-bottom: 3%;
				transform: $translateX scale(1.1);
			}
			@media (min-width: 350px) {
				margin-bottom: 4%; 
				transform: $translateX scale(1.2);
			}
			@media (min-width: 400px) {
				transform: $translateX scale(1.3);
			}
			@media (min-width: 700px) {
				margin-bottom: 3.5%;
				transform: $translateX scale(1.4);
			}
			@media (min-width: 1000px) {
				margin-bottom: 4.25%;
				transform: $translateX scale(1.7);
			}
		}
		
		.sig-stroke {
			stroke: darken(white, 10%);
			stroke: $gold;
			fill:none;
			stroke-width: 8.2509;
			stroke-linecap:round;
			stroke-linejoin:round;
			stroke-miterlimit:10;
		}

		$line-lengths: 80, 219, 267, 83, 98, 364, 296;  
		$num-lines: 7;
		$draw-duration: .5;

		@for $i from 1 through $num-lines {
			.line-#{$i} {
				stroke-dashoffset: -1*nth($line-lengths, $i)*2;
				stroke-dasharray: nth($line-lengths, $i)*2 10000;
				transition: all $draw-duration + s ease-in-out;
				transition-delay: ($i - 1)*$draw-duration/2 + $build-completion-delay + s;
				
				html.face-build & {
					stroke-dashoffset: 0;
				}
			}
		}
		.line-3 { 
			transition-duration: $draw-duration*2.75 + s ;
			transition-delay: $build-completion-delay + $draw-duration - .5 + s;
		}
		.line-7 { 
			transition-duration: $draw-duration*2.75 + s ;  
		}
		.line-4 {
			transition-delay: $build-completion-delay + $draw-duration*2.25 + s;
		}
		.line-5 {
			transition-delay: $build-completion-delay + $draw-duration*2.75 + s;
		}
		.line-6 {
			transition-duration: $draw-duration*1.5 + s;
			transition-delay: $build-completion-delay + $draw-duration*3.25 + s;
		}
		.line-7 {
			transition-delay: $build-completion-delay + $draw-duration*3.5 + s;
		}
	}
	p {
    transition: all 1s ease-out;
		transition-delay: $build-completion-delay + 3s;
    transform: translateY(50%);
		opacity: 0;
    color: darken(white, 50%);
    font-size: 1.5rem;
		line-height: 150%;
		@media (orientation: landscape) {
			@media (min-height: 600px) {
				font-size: 1.6rem;
			}
			@media (min-height: 1000px) {
				font-size: 1.7rem;
			}
			@media (min-height: 1200px) {
				font-size: 1.8rem;
			}
		}
		@media (orientation: portrait) {
			@media (min-width: 350px) {
				font-size: 1.5rem;
			}
			@media (min-width: 400px) {
				font-size: 1.6rem;
			}
			@media (min-width: 550px) {
				font-size: 1.7rem;
			}
			@media (min-width: 600px) {
				font-size: 1.8rem;
			}
			@media (min-width: 650px) {
				font-size: 1.7rem;
			}
			@media (min-width: 800px) {
				font-size: 1.6rem;
			}
			@media (min-width: 1000px) {
				font-size: 1.8rem;
			}
		}
		
		html.face-build & {
			opacity: 1;
			transform: translateY(0);
		}
  }
}
.mobile-codepen-note {
	display: none;
	background: rgba(black, .5);
	padding: 16px;
	color: white;
	font-size: 16px;
	line-height: 120%;
	position: fixed;
		z-index: 999;
	a {
		color: $gold;
	}
}