<section id="scene">

	<div class="cube">
		<div class="cube_side tb"></div>
		<div class="cube_side fr"></div>
		<div class="cube_side ba"></div>
		<div class="cube_side le"></div>
		<div class="cube_side ri"></div>
		<div class="cube_side bt"></div>
	</div>

	<div class="grid">

		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>

	</div>

</section>

/* tried to make grid dynamic for learning purposes.
Grid is off without these exact values, which is close to what the video has anyway.
SASS variables used because nth hates CSS variables but accepts these. Whatever. */
$columns: 12;
$columnsodd: $columns * 2;

:root {
	--side: 25em;
	--halfside: calc(var(--side) / 2);
	--cubespeed: 0.65s;
	--cubespeeddel: 0.65s;
	--cubefalldel: calc(var(--cubespeeddel) + var(--cubespeed));
	--cubefall: 1s;
	--gzoomspeed: 0.4s;
	--gzoomdelay: 1.5s;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	transform-style: preserve-3d;
}

html {
	font-size: 6.25%; /* resets so font sizes can be used in em, rem */
}

body {
	font-size: 10rem; /* 10rem = 10px. rem, em are not accurate on Chrome in portrait mode on mobile for some stupid reason. It's a known glitch. Haven't found a fix. */
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	position: relative;
}

#scene {
	width: 50em;
	height: 50em;
	position: relative;
	perspective: 100em;
	background: linear-gradient(
		rgb(0, 0, 0),
		rgb(2, 7, 53) 20%,
		rgb(4, 16, 74) 65%,
		rgb(16, 47, 150)
	);
	background-size: 100% 300%;
	animation: background var(--gzoomspeed) var(--gzoomdelay) ease-in forwards;
	overflow: hidden;
}

/* cube */
.cube {
	margin: 0 auto;
	width: var(--side);
	height: var(--side);
	position: relative;
	z-index: 1;
	transform: rotatex(-30deg) rotatey(45deg) scale3d(0.7, 0.7, 0.7)
		translate3d(0, 130%, 0);
	animation: cube var(--cubespeed) var(--cubespeeddel) linear forwards,
		cubefall var(--cubefall) var(--cubefalldel) linear forwards;
	&_side {
		position: absolute;
		width: var(--side);
		height: var(--side);
		border: 0.5em solid #6ffdfa;
		background: rgba(27, 102, 108, 0.4);
		transform-origin: 50% 0;
	}

	.tb {
		transform: rotatex(90deg) translatey(calc(var(--halfside) * -1));
	}

	.bt {
		transform-origin: 50% 50%;
		transform: translate3d(
				0,
				calc(var(--halfside) * -1),
				calc(var(--halfside) * -1)
			)
			rotateX(90deg) translateZ(calc(var(--side) * -1)) rotateX(0deg)
			translateY(var(--halfside));
		animation: bt var(--cubespeed) var(--cubespeeddel) linear forwards;
	}

	.le {
		transform: translatex(0) rotatey(90deg) translatez(calc(var(--halfside) * -1));
		animation: le var(--cubespeed) var(--cubespeeddel) linear forwards;
	}

	.ri {
		transform: translatex(0) rotatey(90deg) translatez(var(--halfside));
		animation: ri var(--cubespeed) var(--cubespeeddel) linear forwards;
	}

	.ba {
		transform: translateZ(calc(var(--halfside) * -1)) rotatex(0);
		animation: ba var(--cubespeed) var(--cubespeeddel) linear forwards;
	}

	.fr {
		transform: translateZ(var(--halfside)) rotatex(0);
		animation: fr var(--cubespeed) var(--cubespeeddel) linear forwards;
	}
}

/* Squares - CSS Grid */
.grid {
	display: grid;
	grid-template-columns: repeat($columns, 1fr);
	justify-items: center;
	align-items: center;
	grid-gap: 0 5%;
	transform: rotatex(60deg) scale(1.15) translatez(-27.5em);
	animation: gridzoom var(--gzoomspeed) var(--gzoomdelay) linear forwards;
	& > div {
		background: #8db2fd;
		width: 80%;
		padding-bottom: 80%;
		grid-column: span 2;
		grid-row: span 2;
		animation: squareheight 1s ease-in-out forwards;
		/* raise scalex and translate3d for height of floor squares*/
		transform: translateX(10%) rotate(45deg) scaleZ(0.01) translate3d(0, 0, 0px);
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #081e6c;
			box-shadow: inherit;
			transform-origin: 100% 100%;
		}
		&::before {
			transform: rotateY(-90deg);
			filter: brightness(380%);
		}
		&::after {
			transform: rotateX(90deg);
			filter: brightness(480%);
		}
		&:nth-child(#{$columns}n + 1) {
			background: transparent;
			grid-column-start: 1;
			&::before,
			&::after {
				background: transparent;
			}
		}
		&:nth-child(33),
		&:nth-child(34) {
			z-index: 5;
			position: relative;
		}

		/* middle */
		&:nth-child(21),
		&:nth-child(22),
		&:nth-child(33),
		&:nth-child(34) {
			animation-delay: 2.1s;
		}

		/*group 2*/
		&:nth-child(n + 15):nth-child(-n + 17),
		&:nth-child(27),
		&:nth-child(29),
		&:nth-child(n + 39):nth-child(-n + 41) {
			animation-delay: 2.2s;
		}

		/*group 3*/
		&:nth-child(n + 8):nth-child(-n + 11),
		&:nth-child(20),
		&:nth-child(23),
		&:nth-child(32),
		&:nth-child(35) {
			animation-delay: 2.3s;
		}

		/*group 4*/
		&:nth-child(n + 2):nth-child(-n + 6),
		&:nth-child(14),
		&:nth-child(18),
		&:nth-child(26),
		&:nth-child(30),
		&:nth-child(38),
		&:nth-child(42) {
			animation-delay: 2.4s;
		}

		/*group 5*/
		&:nth-child(7),
		&:nth-child(12),
		&:nth-child(19),
		&:nth-child(24),
		&:nth-child(31),
		&:nth-child(36) {
			animation-delay: 2.5s;
		}
	}
}

/* animation */
@keyframes le {
	100% {
		transform: translatex(0) rotatey(90deg) translatez(calc(var(--halfside) * -1))
			rotatex(-180deg);
	}
}

@keyframes ri {
	100% {
		transform: translatex(0) rotatey(90deg) translatez(12.5em) rotatex(180deg);
	}
}

@keyframes ba {
	100% {
		transform: translateZ(calc(var(--halfside) * -1)) rotatex(-180deg);
	}
}

@keyframes fr {
	100% {
		transform: translateZ(var(--halfside)) rotatex(180deg);
	}
}

@keyframes bt {
	100% {
		transform: translate3d(
				0,
				calc(var(--halfside) * -1),
				calc(var(--halfside) * -1)
			)
			rotateX(-90deg) translateZ(calc(var(--side) * -1)) rotateX(-180deg)
			translateY(var(--halfside));
	}
}

@keyframes cube {
	0%,
	20% {
		transform: rotatex(-30deg) rotatey(45deg) scale3d(0.7, 0.7, 0.7)
			translate3d(0, 40em, 0);
	}
	100% {
		transform: rotatex(-30deg) rotatey(45deg) scale3d(0.7, 0.7, 0.7)
			translate3d(0, 60em, 0);
	}
}

@keyframes gridzoom {
	0% {
		transform: rotatex(60deg) scale(1.15) translatex(-0.4em) translatez(-27.5em);
	}
	100% {
		transform: rotatex(60deg) scale(1.15) translatex(-0.4em) translatez(5.5em);
	}
}

@keyframes background {
	0% {
		background-position: 50% 0%;
	}
	100% {
		background-position: 51% 100%;
	}
}

@keyframes cubefall {
	0%,
	55% {
		transform: rotatex(-30deg) rotatey(45deg) scale3d(0.7, 0.7, 0.7)
			translatey(60em);
	}
	80% {
		transform: rotatex(-30deg) rotatey(45deg) scale3d(0.5, 0.5, 0.5)
			translatey(53em);
	}
	90% {
		transform: rotatex(-30deg) rotatey(45deg) scale3d(0.4, 0.4, 0.4)
			translatey(83em);
	}
	100% {
		transform: rotatex(-30deg) rotatey(45deg) scale3d(0.3, 0.3, 0.3)
			translatey(138em);
	}
}

@keyframes squareheight {
	0%,
	100% {
		transform: translateX(10%) rotate(45deg) scaleZ(0.01) translate3d(0, 0, 0px);
	}
	50% {
		transform: translateX(10%) rotate(45deg) scaleZ(1) translate3d(0, 0, 54px);
	}
}