// Color vars
$color1: #76777b;
$color2: #555756;
$color3: #29373a;
$color4: #86878b;
$color5: #141414;
$color6: #dddddd;

$eyeColor: rgba(255,255,255,.5);
// Beam
$beamWidth: 2px;
$beamHeight: 100px;
$beamColor: rgba(255, 198, 66,.7);

// A test of converting a timeline based animation sequence spanning several elements,
// into something more manageble than percentage values using SASS.
//
// Benefits of this:
//	- Easier to maintain.
//	- Easy to change timing of existing timeline sequences.
//	- Easy to add new timeline sequences between existing sequences.
//	- Better overview in the @keyframes animations.


// Storyboard Timeline
$timeline: (
 'begin'              : 0s,
 'visor-pos-down-1'   : 1s,
 'visor-move-up'      : 1.8s,
 'visor-pos-up'       : 0.5s,
 'powerup-start'      : 0.6s,
 'powerup-end'        : 1s,
 'eye-start'       		: 1s,
 'seek-left-1'        : 1.5s,
 'seek-right-1'       : 1.5s,
 'seek-left-2'        : 1.5s,
 'seek-right-2'       : 1.5s,
 'beam-swipe-left-1'  : 1.5s,
 'beam-swipe-right-1' : 1.5s,
 'beam-swipe-left-2'  : 1.5s,
 'beam-swipe-right-2' : 1.5s,
 'eye-end'       	 		: 1s,
 'powerdown-start'    : 0.6s,
 'powerdown-end'      : 1s,
 'visor-move-down'    : 1.8s,
 'visor-pos-down-2'   : 1s,
 'end'                : 2s
);

// $totaltime:						Total of all timecodes in $timeline
// $timelineAccumulated:	Accumulated timeline map based on $timeline
$totaltime: 0s;
$timelineAccumulated: ();
@each $key, $time in $timeline {
	$totaltime: $totaltime + $time;
	$timelineAccumulated: map-merge($timelineAccumulated, ($key : $totaltime) );
}

// Timecode to Percent function
// Params:
// 	$key:			key/position in timeline
// 	$offset:	optional offset to add to time from timeline (use negative number to subtract)
// Return: 		Percentage value of keyposition in timeline.
@function tp($key, $offset: 0s) {
	@return (map-get($timelineAccumulated, $key) + $offset) / $totaltime * 100%;
}

#debug {
	content: '#{$totaltime}';
}

@keyframes beam-fire {
	#{tp('begin')},
  #{tp('end')},
	#{tp('beam-swipe-left-1', -0.01s)},
	#{tp('beam-swipe-right-2', 0.01s)} {
	  opacity: 0;
	}
	#{tp('beam-swipe-left-1')},
  #{tp('beam-swipe-left-2')} {
	  opacity: 1;
		transform: translate3D(calc(-60% + 5px),82px,0) rotateY(88deg) rotateX(90deg);
	}
	#{tp('beam-swipe-right-1')},
  #{tp('beam-swipe-right-2')} {
	  opacity: 1;
		transform: translate3D(calc(-40% + 5px),82px,0) rotateY(92deg) rotateX(90deg);
	}
}

@keyframes cover-open-close {
	#{tp('begin')},
  #{tp('visor-pos-down-1')},
  #{tp('visor-pos-down-2')},
  #{tp('end')} {
		height: 40px;
	}
	#{tp('visor-move-up')},
  #{tp('visor-move-down')} {
		height: 0;
	}
}
@keyframes powerup-anim {
	#{tp('begin')},
	#{tp('powerup-start')},
	#{tp('powerdown-end')},
	#{tp('end')} {
	  opacity: 0;
	}
	#{tp('powerup-end')},
  #{tp('powerdown-start')} {
	  opacity: 1;
	}
}
@keyframes eye-seek {
	#{tp('begin')},
	#{tp('powerup-end')},
	#{tp('powerdown-start')},
  #{tp('end')} {
	  transform: scale(0);
		left: 45px;
		background: $eyeColor;
	}
	#{tp('eye-start')},
	#{tp('eye-end')} {
		transform: scale(1);
		left: 45px;
		background: $eyeColor;
	}
	#{tp('seek-left-1')},
	#{tp('seek-left-2')}{
		left: 5px;
		background: $eyeColor;
	}
	#{tp('beam-swipe-left-1')},
	#{tp('beam-swipe-left-2')} {
		background: $beamColor;
		left: 5px;
	}
	#{tp('seek-right-1')},
	#{tp('seek-right-2')} {
		left: 95px;
		background: $eyeColor;
	}
	#{tp('beam-swipe-right-1')},
	#{tp('beam-swipe-right-2')} {
		background: $beamColor;
		left: 95px;
	}
}

@keyframes pulse {
	0%,100% {
		transform: scale(1)
	}
	50% {
		transform: scale(.5)
	}
}

@import url(http://fonts.googleapis.com/css?family=Cabin:400,700);

html,body {
	height: 100%;
}

body {
	font: normal .8em/1.2 'Cabin', sans-serif;
	text-align: center;
	background-color: $color5;
	color: $color4;
}

h1 {
	font-size: 10vmin;
	line-height: 1;
	margin: 4vmin 0;
	padding: 0;
	color: #fff;
	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

}
h2 {
	font-size: 3vmin;
	text-shadow: none;
	color: $color3;
}

q {
	display: block;
	font-size: 4.5vmin;
	font-weight: normal;
	color: #fff;
	text-overflow: clip;
	text-shadow: none;
}

a {
	position: relative;
	color: $color4;
	text-decoration:none;
	white-space: nowrap;
	transition: color 0.2s;
}
a:after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: -.1em;
	width: 0;
	height: .1em;
	background-color: $color6;
	transform: translateX(-50%);
	transition: width 0.2s;
}
a:hover {
	color: $color6;
}
a:hover:after {
	width: 100%;
}

.gort {
	position: relative;
	display: inline-block;
	text-align: left;
	width: 420px;
	height: 360px;
	overflow: hidden;

	perspective: 440px;
	perspective-origin: center 60px;

	.beam {
		position: absolute;
		height: 100%;
		width:  100%;
		z-index: 10;
		transform-style: preserve-3d;
		div {
			position: absolute;
			width: 100%;
			height: 4px;
			background: $beamColor;
			box-shadow: 0 0 1px $beamColor;
			transform-style: preserve-3d;
			transform-origin: right center;
			animation: beam-fire $totaltime linear infinite;
		}
	}

	.head {
		position: absolute;
		width: 146px;
		height: 192px;
		left: 137px;
		border-radius: 55% 55% 45% 45%/ 45% 45% 55% 55%;
		background-color: $color1;
		box-shadow: inset -8px -3px 0 3px $color2,
								inset 8px -3px 0 3px $color2;
		.visor {
			position: absolute;
			z-index: 1;
			width: 145px;
			height: 40px;
			border-radius: 60% / 40%;
			top:65px;
			left:1px;
			overflow: hidden;
			background: $color5;
			box-shadow:	0 -8px 0 -2px $color1,
									0 3px 0 -2px $color3;
			background-clip: padding-box;
			.cover {
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				border-radius: 60% / 40%;
				background: $color1;
				background-clip: padding-box;
				box-shadow: inset -15px 0 0 -5px $color2,
										inset 15px 0 0 -5px $color2;
				animation: cover-open-close $totaltime linear infinite;
			}
			.powerup {
				z-index: -2;
				position: absolute;
				width: 100px;
				height: 10px;
				top: 15px;
				left: 23px;
				border-radius: 50%;
				background: $color2;
				box-shadow:	inset 3px -1px 0 1px $color3,
										inset -3px 1px 0 1px $color3;
				animation: powerup-anim $totaltime linear infinite;
				.eye {
					position: absolute;
					width: 10px;
					height: 10px;
					top: 0px;
					left: 68px;
					border-radius: 50%;
					background: $eyeColor;
					box-shadow: 0 0 15px rgba(255,255,255,.5);
					animation: eye-seek $totaltime linear infinite;
					&:before, &:after {
						position: absolute;
						content: "";
						z-index: -1;
						animation: pulse 1.5s ease infinite;
					}
					&:before {
						width: 20px;
						left: -5px;
						top: 5px;
						box-shadow: 0 0 2px 1px rgba(255,255,255,.4);
					}
					&:after {
						width: 14px;
						left: -2px;
						top: 5px;
						box-shadow: 0 0 2px 1px rgba(255,255,255,.4);
					}
				}
			}
    }
		.ears {
			position: absolute;
			width: 147px;
			top: 70px;
			left: 0;
			.ear {
				position: absolute;
				height: 40px;
				width: 4px;
				background-color: $color1;
				background: linear-gradient(to bottom,
										$color1 0%,
										$color1 37%,
										$color2 38%,
										$color2 77%,
										$color3 78%,
										$color3 100%);
				&:before, &:after {
					position: absolute;
					content: "";
					width: 4px;
					background: inherit;
				}
				&:first-child {
					left:-3px;
					&:before {
						height: 32px;
						top: 4px;
						left: -4px;
					}
					&:after {
						height: 24px;
						top: 9px;
						left: -8px;
					}
				}
				&:last-child {
					right: -3px;
					&:before {
						height: 32px;
						top: 4px;
						right: -4px;
					}
					&:after {
						height: 24px;
						top: 9px;
						right: -8px;
					}
				}
			}
		}
		&:after {
			/* Neck */
			position: absolute;
			content: "";
			z-index: -1;
			width: 110px;
			height: 240px;
			top:135px;
			left: 18px;
			border-radius: 50%;
			background-color:  $color2;
		}
  }
	.body {
		position: absolute;
		width: 370px;
		height: 130px;
		top:192px;
		left: 25px;
		border-radius: 50%;
		background-color:  $color2;
		&:before {
			position: absolute;
			content: "";
			width: 280px;
			height: 125px;
			top: 5px;
			border-radius: 50%;
			left: 45px;
			z-index: 1;
			background:  $color1;
			box-shadow: -15px -10px 0 -6px $color2,
									15px -10px 0 -6px $color2;
		}
		.arm {
			position: absolute;
			width: 120px;
			height: 114px;
			top: 75px;
			background-color:  $color2;
			&:before, &:after {
				position: absolute;
				content: "";
			}
			&:before {
				/* Chest */
				z-index: 1;
				width: 140px;
				height: 160px;
				top: -43px;
				background-color:  $color1;
			}
			&:after {
				width: 50px;
				height: 150px;
				top:-30px;
				background: $color1;
			}
			&:first-child {
				left: -13px;
				transform: rotate(12deg);
				&:before {
					left: 67px;
					transform: rotate(-28deg);
					box-shadow: inset 20px 0 0 -10px $color2;
				}
				&:after {
					left: 8px;
					border-radius: 40% 0 0  0;
				}
			}
			&:last-child {
				right: -13px;
				transform: rotate(-12deg);
				&:before {
					right: 67px;
					transform: rotate(28deg);
					box-shadow: inset -20px 0 0 -10px $color2;
				}
				&:after {
					right: 8px;
					border-radius: 0 40% 0  0;
				}
			}
		}
	}
}