@import 'compass/css3';

$l: .75em;
$n-dir: 4; // same as in DOM
$n-rows: 6; // same as in DOM
$n-faces: 6; // no of faces for a cube
$t: 2s;

// computed
$f: .5*($n-dir - 1);
$fy: .5*($n-rows - 1);
$dim: ($n-rows + 2)*$l;
$hn-rows: .5*$n-rows;
$qn-rows: .25*$n-rows;
$n: 0;

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 40em;
	background: #222;
	color: #f62547;
}

div {
	position: absolute;
	top: 50%; left: 50%;
	transform-style: preserve-3d;
}

.heart {
	animation: r $t linear infinite;
	
	&:nth-child(even) { color: #fa4468; }
	
	@for $i from 0 to $n-dir {
		$s: pow(-1, $i);
		
		@for $j from 0 to $n-dir  {
			&:nth-child(#{$i*$n-dir + $j + 1}) {
				margin: ($i - $f)*$dim ($j - $f)*$s*$dim;
				animation-delay: -($i  + $j)/$n-dir/($n-dir + 1)*$t;
			}
		}
	}
}

@keyframes r { to {transform: rotateY(-1turn);} }

.cube {
	@for $row from 0 to $n-rows {
		$i: $hn-rows - floor(abs($qn-rows - $row));
		$n-cols: 2*$i + 1;
		$fx: .5*($n-cols - 1);
		$y: ($row - $fy)*$l;
		
		@for $col from 0 to $n-cols {
			$x: ($col - $fx)*$l;
			$k: $row + $x; // test
			
			&:nth-child(#{$n + $col + 1}) {
				@if $k + $row == 0 { display: none; }
				@else { margin: $y $x; }
			}
		}
		
		$n: $n + $n-cols;
	}
	
	&__face {
		box-sizing: border-box;
		margin: -.5*$l;
		border: solid 1px #000;
		width: $l; height: $l;
		backface-visibility: hidden;
		background: currentColor;
		
		@for $i from 0 to $n-faces {
			&:nth-child(#{$i + 1}) {
				transform: scale(.9) 
					if($i < 4, rotateY($i*90deg), 
										 rotateX(pow(-1, $i)*90deg)) 
					translateZ(.5*$l);
			}
		}
	}
}