- var blocks = 82;

.container
	.surface
		- for (var b = 1;b <= blocks;++b) {
			div(class="block b" + b)
				.block-outer
					.block-inner
						.left
						.front
						.right
						.top
		- }

$sqSize: 16px;
$contW: 100%;
$contH: 100%;
$xSpaces: 33;
$ySpaces: 33;
$zSpaces: 4;
$xAngle: 54.75deg;
$zAngle: 45deg;
$dur: 6s;

// * Block placement *
// parameters: x-pos,y-pos,z-pos, width,depth,height, color
$blocks:
	// base
	(1,2,1, 1,32,1)
	(1,1,1, 33,1,1)
	(2,5,1, 3,1,1)
	(5,2,1, 1,4,1)
	(2,9,1, 7,1,1)
	(9,2,1, 1,8,1)
	(2,13,1, 3,1,1)
	(5,10,1, 1,4,1)
	(10,5,1, 3,1,1)
	(13,2,1, 1,4,1)
	(2,17,1, 15,1,1)
	(17,2,1, 1,16,1)
	(2,21,1, 3,1,1)
	(5,18,1, 1,4,1)
	(18,5,1, 3,1,1)
	(21,2,1, 1,4,1)
	(2,25,1, 7,1,1)
	(9,18,1, 1,8,1)
	(18,9,1, 7,1,1)
	(25,2,1, 1,8,1)
	(2,29,1, 3,1,1)
	(5,26,1, 1,4,1)
	(10,21,1, 3,1,1)
	(13,18,1, 1,4,1)
	(18,13,1, 3,1,1)
	(21,10,1, 1,4,1)
	(26,5,1, 3,1,1)
	(29,2,1, 1,4,1)
	
	// columns
	(5,1,2, 1,1,2)
	(5,5,2, 1,1,2)
	(5,9,2, 1,1,2)
	(5,13,2, 1,1,2)
	(5,17,2, 1,1,2)
	(5,21,2, 1,1,2)
	(5,25,2, 1,1,2)
	(5,29,2, 1,1,2)
	(9,1,2, 1,1,2)
	(9,9,2, 1,1,2)
	(9,17,2, 1,1,2)
	(9,25,2, 1,1,2)
	(13,1,2, 1,1,2)
	(13,5,2, 1,1,2)
	(13,17,2, 1,1,2)
	(13,21,2, 1,1,2)
	(17,1,2, 1,1,2)
	(17,17,2, 1,1,2)
	(21,1,2, 1,1,2)
	(21,5,2, 1,1,2)
	(21,9,2, 1,1,2)
	(21,13,2, 1,1,2)
	(25,1,2, 1,1,2)
	(25,9,2, 1,1,2)
	(29,1,2, 1,1,2)
	(29,5,2, 1,1,2)
	(33,1,2, 1,1,2)
	
	// tops of columns
	(5,1,4, 1,1,1)
	(5,5,4, 1,1,1)
	(5,9,4, 1,1,1)
	(5,13,4, 1,1,1)
	(5,17,4, 1,1,1)
	(5,21,4, 1,1,1)
	(5,25,4, 1,1,1)
	(5,29,4, 1,1,1)
	(9,1,4, 1,1,1)
	(9,9,4, 1,1,1)
	(9,17,4, 1,1,1)
	(9,25,4, 1,1,1)
	(13,1,4, 1,1,1)
	(13,5,4, 1,1,1)
	(13,17,4, 1,1,1)
	(13,21,4, 1,1,1)
	(17,1,4, 1,1,1)
	(17,17,4, 1,1,1)
	(21,1,4, 1,1,1)
	(21,5,4, 1,1,1)
	(21,9,4, 1,1,1)
	(21,13,4, 1,1,1)
	(25,1,4, 1,1,1)
	(25,9,4, 1,1,1)
	(29,1,4, 1,1,1)
	(29,5,4, 1,1,1)
	(33,1,4, 1,1,1)
	;
$bkColor: #5785f6;

@mixin placeBlock($args) {
	$defaultArgs: 1 1 1 1 1 1 $bkColor;
	$givenArgs: ();
	
	@for $a from 1 through length($defaultArgs) {
		@if $a <= length($args) {
			$givenArgs: append($givenArgs, nth($args,$a), space);
		} @else {
			$givenArgs: append($givenArgs, nth($defaultArgs, $a), space);
		}
	}

	$x: nth($givenArgs,1);
	$y: nth($givenArgs,2);
	$z: nth($givenArgs,3);
	$w: nth($givenArgs,4);
	$d: nth($givenArgs,5);
	$h: nth($givenArgs,6);
	$c: nth($givenArgs,7);
	
	display: inherit;
	transform: translate3d(
		1em*($x - 1),
		1em*(-$y - ($d - 1)),
		(1em*$z) + (1em*($h - 1))
	);
	.block-inner div {
		background-color: $c;
		&.top, &.bottom {
			@if $w > 1 {
				width: 1em * $w;
			}
			@if $d > 1 {
				height: 1em * $d;
			}
		}
		&.top	{
			transform: rotateX(-90deg) translateY(-1em*($d - 1));
		}
		&.bottom {
			transform: rotateX(-90deg) translateY(-1em*($d - 1)) translateZ(1em*$h);
		}
		&.front, &.back {
			@if $w > 1 {
				width: 1em * $w;
			}
			@if $h > 1 {
				height: 1em * $h;
			}
		}
		&.front {
			transform: translateZ(1em * ($d - 1));
		}
		&.left, &.right {
			@if $d > 1 {
				width: 1em * $d;
			}
			@if $h > 1 {
				height: 1em * $h;
			}
		}
		&.right {
			transform: rotateY(-270deg) translate3d(1em, 0, 1em*($w - $d));
		}
	}
}

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-size: $sqSize;
	height: 100vh;
	margin: 0;
}
.container {
	background: #87a9f9;
	display: flex;
	margin: auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: $contW;
	height: $contH;
	transform-style: preserve-3d;
}
.surface {
	animation: reveal $dur linear infinite;
	display: block;
	width: 1em * $xSpaces;
	height: 1em * $ySpaces;
	margin: auto;
	transform-style: preserve-3d;
	transform: translateY((1em * $zSpaces) * 0.25) rotateX($xAngle) rotateZ($zAngle) translate(5em,-5em);
	will-change: transform;
}
.block {
	display: none;
	transform-style: preserve-3d;
	position: absolute;
	bottom: 0;
}
.block-inner > div {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	position: absolute;
	width: 1em;
	height: 1em;
	&.front, &.back, &.left, &.right {
		&:before {
			background-color: #000;
			content: "";
			width: 100%;
			height: 100%;
		}
	}
	&.front, &.back {
		&:before {
			opacity: 0.2;
		}
	}
	&.left, &.right {
		&:before {
			opacity: 0.4;
		}
	}
}
.block-outer, .block-inner {
	position: relative;
	width: 1em;
	transform-style: preserve-3d;
}
.block-inner {
	transform: rotateX(-90deg) translateZ(1em);
}
.back {
	transform: translateZ(-1em) rotateY(180deg);
}
.left {
	transform-origin: center left;
	transform: rotateY(270deg) translateX(-1em);
}
.right {
	transform-origin: top right;
}
.top, .bottom {
	transform-origin: top center;
}

// * Render blocks *
// one block only
@if length(nth($blocks,1)) == 1 {
	.b1 {
		@include placeBlock($blocks);
	}
}
// more than one block
@else {
	@for $b from 1 through length($blocks) {
		.b#{$b} {
			@include placeBlock(nth($blocks, $b));
		}
	}
}

// * Exceptions (for parts of blocks) *
.block:nth-child(n + 56) {
	.top, .left {
		display: none;
	}
	.front, .front:before {
		background-color: transparent;
	}
	.front {
		background-image: linear-gradient(-45deg,$bkColor 50%,transparent 50%);
		&:before {
			background-image: linear-gradient(-45deg,#000 50%,transparent 50%);
		}
	}
}
.block:nth-child(n + 56):nth-child(-n + 62),
.block:nth-child(68),
.block:nth-child(70),
.block:nth-child(n + 74):nth-child(-n + 76),
.block:nth-child(80) {
	.right, .right:before {
		background-color: transparent;
	}
	.right {
		background-image: linear-gradient(45deg,$bkColor 50%,transparent 50%);
		&:before {
			background-image: linear-gradient(45deg,#000 50%,transparent 50%);
		}
	}
}

// * Animation *
@keyframes reveal {
	from, 45%, to {
		transform: translateY((1em * $zSpaces) * 0.25) rotateX($xAngle) rotateZ($zAngle) translate(5em,-5em);
	}
	65%, 80% {
		transform: translateY((1em * $zSpaces) * 0.25) rotateX($xAngle) rotateZ($zAngle - 90) translate(5em,-5em);
	}
}