.assembly.assembly--2d
	- 6.times do
		.positioner
			.triangle

.assembly.assembly--3d
	.cube
		- 6.times do
			.cube__face

@import 'compass/css3';

// fixed & fixed computed values
$n-2d: 6; // same as in DOM
$n-3d: 6; // same as in DOM
$n-tri: 3; // nuber of vertices in triangle
$base-angle-tri: 360deg/$n-tri;
$angle-tri: 180deg/$n-tri;
$skew-angle: 90deg - $angle-tri;
$s-factor: cos($skew-angle);
$rot-angle: -.5*$angle-tri;
$base-angle-2d: 360deg/$n-2d;

// variable values, can tweak these
$l: 5em;
$base-c: #184460; // clumsy picker value
$base-perc: 2.5%;
$light-factor: 10%;
// from easings.net
$easeInOutCubic: cubic-bezier(.65,.05,.35,1);

// computed values, from fixed & variable
$height-tri: $l*sin($angle-tri);
$delim-c: lighten($base-c, 30%);
$diag-face: sqrt(pow($l, 2) + pow($l, 2));
$diag-cube: sqrt(pow($diag-face, 2) + pow($l, 2));
$scale-3d: $diag-cube/$diag-face;
$l-3d: $scale-3d*$l;
// inverse trig func - see http://thesassway.com/advanced/inverse-trigonometric-functions-with-sass
$rx-3d: acos($diag-face/$diag-cube);

@mixin blur($f: .25*$l) {
	-webkit-filter: blur($f);
	filter: blur($f);
}

@mixin glow($c: $delim-c) {
	-webkit-filter: drop-shadow(0 0 1px $c);
	filter: drop-shadow(0 0 1px $c);
}

html, body { height: 100%; }

body {
	overflow: hidden;
	margin: 0;
	background: #000;
	
	* { // pos everyhing absolutely in the middle
		position: absolute;
		top: 50%; left: 50%;
		animation: inherit;
	}
}

.assembly {
	animation: vis-2d 4s steps(1, end) infinite;
	
	&--3d {
		&, * { transform-style: preserve-3d; }
		
		animation-name: vis-3d;
 		transform: rotateX(-$rx-3d) rotateY(-45deg);
	}
}

@keyframes vis-2d {
	0%, 60%, 100% { opacity: .999; }
	40% { opacity: .001; }
}

@keyframes vis-3d {
	0%, 60%, 100% { opacity: .001; }
	40% { opacity: .999; }
}

.positioner {
	animation-timing-function: $easeInOutCubic;
	
	@for $i from 0 to $n-2d {
		$j: floor($i/2);
		$curr-angle: ($i - 1)*$base-angle-2d;
		$curr-perc: ($i + 1)*$base-perc;
		$curr-c: darken(lighten($base-c, random(20)), random(20));
		$group-c: lighten($base-c, $j*$light-factor);
		
		&:nth-child(#{$i + 1}) {
			animation-name: pos#{$i + 1};
			
			.triangle { animation-name: paint#{$i + 1};	}
		}
		
		@at-root {
			@keyframes pos#{$i + 1} {
				0%, #{$curr-perc}, 
				#{80% + $curr-perc}, 100% {
					transform: rotate($curr-angle) 
						translate(-$l);
					opacity: .001;
					@include blur();
					animation-timing-function: 
						cubic-bezier(.215,.61,.355,1);
				}
				20%, 80% {
					transform: rotate($curr-angle);
					opacity: .999;
					@include blur(0);
				}
			}
			
			@keyframes paint#{$i + 1} {
				20%, 80% { color: $curr-c; }
				30%, 70% { @include glow($curr-c); }
				40%, 60% {
					color: $group-c;
					@include glow($group-c);
				}
			}
		}
	}
}

.triangle {
	margin: -.5*$l;
	width: $l; height: $l;
	transform: translate(-$height-tri) 
		rotate($rot-angle) 
		skewX($skew-angle) scaleY($s-factor);
	background: linear-gradient(-45deg, 
		  currentColor 50%, transparent 50%);
	color: $base-c;
	@include glow();
}

.cube {
	animation-name: rot;
	animation-timing-function: $easeInOutCubic;
	
	&__face {
		margin: -.5*$l-3d;
		width: $l-3d; height: $l-3d;
		background: currentColor;
		color: $base-c;
		animation: none;
		
		&:nth-child(even) {
			color: lighten($base-c, 2*$light-factor);
		}
		
		&:nth-child(n + 5) {
			color: lighten($base-c, $light-factor);
		}
		
		@for $i from 0 to $n-3d {
			&:nth-child(#{$i + 1}) {
				transform: if($i < 4, rotateY($i*90deg), rotateX(pow(-1, $i)*90deg)) 
					translateZ(.5*$l-3d);
			}
		}
	}
}

@keyframes rot {
	0%, 40% { transform: none; }
	60%, 100% { transform: rotateY(.5turn); }
}