.scene
	.cube 
		- for(let i = 0; i < 6; i++)
			.wall
				.square
				.square
				.square
				.square

$lines: 5;
$squares: 2;
$size: 50vmin;
$half: $size / 2;
$time: 30s;
$background: #000;
$perspective: $size * 4;
$border-width: $size * 0.005;
$border-color: #000;
$border: $border-width solid $border-color;
$texture: url(https://upload.wikimedia.org/wikipedia/commons/3/32/010.Pattern.090.Image.noise.filtered.jpg);

@function random-angle() {
	$angles: (0, 90, 45, -45);

	@return nth($angles, random(length($angles)));
}

@function random-color() {
	@return rgb(random(256) - 1, random(256) - 1, random(256) - 1);
}

@function random-colors($length) {
	$colors: ();

	@for $i from 0 to $length {
		$colors: append($colors, random-color());
	}

	@return $colors;
}

@function random-gradient($lines) {
	$angle: random-angle();
	$length: $lines + if(abs($angle) == 45, 2, 0);
	$colors: random-colors($length);

	@return gradient-lines($angle + deg, $colors);
}

@function gradient-lines($angle, $colors) {
	$length: length($colors);
	$percent: 100% / $length;
	$gradient: ();

	@for $i from 0 to $length {
		$start: $i * $percent;
		$end: $start + $percent;
		$color: nth($colors, $i + 1);
		$gradient: append($gradient, $color $start $end, comma);
	}

	@return linear-gradient($angle, $gradient...);
}

@mixin noise-texture($texture, $ratio: 0.2) {
	&::before {
		content: "";
		height: 100%;
		width: 100%;
		position: absolute;
		opacity: $ratio;
		background-image: $texture;
	}
}

@mixin grid-wall(
	$lines,
	$squares,
	$size,
	$border-width,
	$border-color,
	$background
) {
	$gap: $size / ($lines * $squares + $squares + 1);

	display: grid;
	grid-gap: $gap;
	grid-template-rows: repeat($squares, 1fr);
	grid-template-columns: repeat($squares, 1fr);

	height: $size;
	width: $size;
	padding: $gap;
	border: $border-width solid $border-color;
	background: $background;
}

@mixin cube($size) {
	$t-z: translateZ($size / 2 - 0.05);

	display: grid;
	transform-style: preserve-3d;

	> * {
		place-self: center;
		position: absolute;

		&:nth-of-type(1) {
			transform: $t-z;
		}

		&:nth-of-type(2) {
			transform: rotateY(180deg) $t-z;
		}

		&:nth-of-type(3) {
			transform: rotateY(90deg) $t-z;
		}

		&:nth-of-type(4) {
			transform: rotateY(-90deg) $t-z;
		}

		&:nth-of-type(5) {
			transform: rotateX(90deg) $t-z;
		}

		&:nth-of-type(6) {
			transform: rotateX(-90deg) $t-z;
		}
	}
}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

body {
	display: grid;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	background: $background;
	perspective: $size;
	transform-style: preserve-3d;
	animation: perspective $time ease-in-out infinite;
}

.scene {
	place-self: center;
	transform-style: preserve-3d;
	transform: translatez($size);
	animation: translate $time ease-in-out infinite;
}

.cube {
	@include cube($size);

	animation: rotation $time linear infinite;
}

.wall {
	@include grid-wall(
		$lines: $lines,
		$squares: $squares,
		$size: $size,
		$border-width: $border-width,
		$border-color: $border-color,
		$background: $background
	);

	@include noise-texture($texture: $texture);

	@for $j from 0 to 6 {
		&:nth-child(#{$j + 1}) {
			@for $i from 0 to $squares * $squares {
				> *:nth-of-type(#{$i + 1}) {
					background: random-gradient($lines);
				}
			}
		}
	}
}

@keyframes rotation {
	to {
		transform: rotate3d(1, 1, 1, 360deg);
	}
}

@keyframes perspective {
	10%,
	90% {
		perspective: $size;
	}
	50% {
		perspective: $size * 4;
	}
}

@keyframes translate {
	10%,
	90% {
		transform: translatez($size);
	}
	50% {
		transform: translatez(0);
	}
}