@import 'compass/css3';

$demo: 25em;
$edge: 3em;
$c: #dcdcd2;
$n: 8;
$start: $demo/sqrt(2) + $edge;

@function gen-tiles($p: -1) {
	$sh: ();
	$α: 360deg/($n/2);
	@for $i from 0 to $n {
		$j: floor($i/($n/2));
		$k: $i%($n/2);
		$β: ($k - 1)*$α;
		$r: if($p < $i, $start, $edge);
		$x: $r*cos($β) + $j*(1 - $k%2)*$edge*sin($β);
		$y: $r*sin($β) - $j*($k%2)*$edge*cos($β);
		$sh: $sh, $x $y $c;
	}
	@return $sh;
}

body {
	background: #262626;
	&:before {
		position: absolute;
		top: 50%; left: 50%;
		margin: -$edge/2;
		width: $edge; height: $edge;
		background: $c;
		color: $c;
		animation: a 8s cubic-bezier(.2,.6,.4,1) infinite;
		animation-name: rot, adder;
		content: '';
	}
	&:after {
		position: absolute;
		top: 	calc(50% - #{$demo/2}); left: calc(50% - #{$demo/2});
		width: $demo; height: $demo;
		box-shadow: 0 0 0 100em #222;//no vmax in IE
		content: '';
	}
}

@keyframes rot {
	@for $i from 0 to $n {
		#{$i*10%}, #{($i + .5)*10%} {
			transform: rotate(-$i*90deg) scale(1);
			@if $i == $n - 1 { filter: none; }
		}
	}
	90% { filter: blur(.25em); }
	100% { transform: rotate(-2160deg) scale(.333); }
}
@keyframes adder {
	$ini-off: ($demo*sqrt(2) + $edge)/2;
	@for $i from 0 through $n {
		#{max($i - .5, 0)*10%}, #{$i*10%}, 100% {
			box-shadow: gen-tiles($i - 1);
		}
	}
}