.cube
	- 6.times do
		.cube__face
			- 25.times do
				.tile

@import 'compass/css3';

// you can increase this number if you have a better system
$n: 5; // number of tiles per cube edge

$tile-edge: 1.5em; // tile edge
$cube-edge: $n*$tile-edge;
$m: .5*($n - 1);

body {
	overflow: hidden;
	margin: 0;
	height: 100vh;
	perspective: 25em;
	background: #000;
}

div {
	position: absolute;
	top: 50%; left: 50%;
}

.cube {
	transform-style: preserve-3d;
	animation: rot 16s linear infinite;

	&__face {
		backface-visibility: hidden;
		
		@for $i from 0 to 6 {
			$mod: $i%2;
			$f: $i < 4;
			$off: if($f, 1, 2);
			$c0: hsl($i*90, 80%, 40%);
			$c1: hsl(($i + $off)*90, 80%, 40%);

			&:nth-child(#{$i + 1}) {
				transform: 
					if($i < 4, rotateY($i*90deg), 
						rotateX(pow(-1, $i)*90deg)) 
					translateZ(.5*$cube-edge) 
					if($i < 4, (), 
								 rotate(($i - 3)*90deg));
				
				@for $j from 0 to $n {
					@for $k from 0 to $n {
						$idx: $j*$n + $k + 1;
						$p: 50%/($n - 1)*
							($j + abs((1 - $mod)*($n - 1) - $k));
						@if $mod > 0 { $p: 100% - $p; }
						$c: mix($c0, $c1, $p);						
						
						:nth-child(#{$idx}) {
							color: $c;
						}
					}
				}
			}
		}
	}
}

@keyframes rot {
	to { transform: rotateX(1turn) rotate(1turn); }
}

.tile {
	width: $tile-edge; height: $tile-edge;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px #000,
		0 0 2px #000;
	background: currentColor;
	animation: flick 0s ease-in-out infinite alternate;
	
	&:nth-child(n + #{$n*$n + 1}) {
		display: none;
	}
	
	@for $i from 0 to $n {
		$y: ($i - $m - .5)*$tile-edge;
		
		@for $j from 0 to $n {
			$idx: $i*$n + $j + 1;
			$x: ($j - $m - .5)*$tile-edge;
			$t: 1s + random(100)*.01s;
			
			&:nth-child(#{$idx}) {
				margin: $y $x;
				animation-duration: $t;
				animation-delay: -$t*random(100)*.01;
			}
		}
	}
}

@keyframes flick {
	to { filter: brightness(2) saturate(.5) }
}