:root {
	--cube: #0984e380;
	--ball: #d63031;
	--bounce: 1s;
	--revolution: 5s;
}

body {
	background: #000;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: calc(100vmin / 15);

	display: flex;
	justify-content: center;
	align-items: center;

	perspective: 10em;
	perspective-origin: 50% calc(50% - 2em);

	animation: grow 2s forwards;
}

@keyframes grow {
	from {
		font-size: calc(100vmin / 15);
	}

	0.1% {
		font-size: 1px;
		opacity: 0;
	}

	to {
		font-size: calc(100vmin / 15);
		opacity: 1;
	}
}

.scene {
	position: relative;
	transform-style: preserve-3d;

	animation: revolution var(--revolution) infinite linear;
}

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

/* ball */

.ball {
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: var(--ball);

	position: absolute;
	left: -0.5em;

	background-image: radial-gradient(circle at top, var(--ball), 75%, #000);

	animation: bounce var(--bounce) infinite ease-out,
		revolution var(--revolution) infinite linear reverse;
}

@keyframes bounce {
	0%,
	100% {
		bottom: 0.5em;
	}

	50% {
		bottom: 3em;
		animation-timing-function: ease-in;
	}
}

/* cube */

.cube {
	width: 2em;

	position: absolute;
	bottom: calc(-1em + 1px);
	left: -1em;

	transform-style: preserve-3d;

	animation: collide var(--bounce) infinite ease;
}

@keyframes collide {
	0%,
	100% {
		height: 1.5em;
	}

	50%,
	94.5% {
		height: 2em;
	}
}

/* cube parts */

.cube * {
	background: var(--cube);
	position: absolute;
	box-shadow: 0 0 0em 0.1em #0004 inset;
}

.left,
.right,
.front,
.back {
	width: 100%;
	height: 100%;
}

.front {
	transform: translateZ(1em);
}
.right {
	transform: rotateY(90deg) translateZ(1em);
}
.back {
	transform: rotateY(180deg) translateZ(1em);
}
.left {
	transform: rotateY(270deg) translateZ(1em);
}

.top,
.bottom {
	width: 2em;
	height: 2em;
}

.top {
	transform: translateY(-50%) rotateX(90deg);
	overflow: hidden;
}

.bottom {
	background: #0008;
	bottom: 0;
	transform: translateY(50%) rotateX(90deg);
	box-shadow: 0 0 0.5em #000;
}

/* shadow */

.shadow {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(#0008, #0000 50%);

	animation: shadow var(--bounce) infinite ease-out;
}

@keyframes shadow {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.5);
		opacity: 0.5;
		animation-timing-function: ease-in;
	}
}

/* floor */

.floor {
	position: absolute;
	top: 1em;
	transform: translate(-50%, -50%) rotateX(90deg);

	width: 15em;
	height: 15em;
	background-image: radial-gradient(#0000, #000 70%),
		repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
	background-size: 100%, 1em 1em;
}

/* span */

span {
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	color: #222;
	font-size: 16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	user-select: none;
}