$unit-s: 3vmin;

$bg-1: #7a74de;
$bg-2: darken($bg-1, 8);
$red: #fa2c34;
$black: #27282d;
$white: #e5e7f1;
$neon: #c0f5f5;
/***********************/
@mixin cylinder($base, $sides, $degree, $pi, $width, $color) {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;

	&__side {
		position: absolute;
		height: (2 * $pi * ($base / 2)) / $sides;
		width: $width;
		background-color: darken($color, 15);

		@for $var from 1 to ($sides + 1) {
			&:nth-of-type(#{$var}) {
				transform: rotateX($var * $degree / $sides) translateZ($base / 2);
			}
		}
		@for $var from 1 to 16 {
			&:nth-of-type(#{$var}) {
				background-color: darken($color, $var * 1.5);
			}
		}
		@for $var from 1 to 16 {
			&:nth-last-of-type(#{$var}) {
				background-color: darken($color, $var * 1.5);
			}
		}
	}
	&__top,
	&__bottom {
		position: absolute;
		width: $base;
		height: $base;
		transform: rotateY(90deg) translateZ($width / 2);
		border-radius: 50%;
	}
	&__bottom {
		transform: rotateY(90deg) translateZ($width / -2);
	}
}

@mixin sphere($base, $sides, $degree, $pi, $width, $y, $color) {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;

	&__side {
		position: absolute;
		height: (2 * $pi * ($base / 2)) / $sides;
		width: $width;
		background-color: darken($color, 15);

		@for $var from 1 to ($sides + 1) {
			&:nth-of-type(#{$var}) {
				transform: rotateX($var * $degree / $sides)
					translateZ($base / 2)
					rotateY($y);
			}
		}
		@for $var from 1 to 16 {
			&:nth-of-type(#{$var}) {
				background-color: darken($color, $var * 1.5);
			}
		}

		@for $var from 1 to 16 {
			&:nth-last-of-type(#{$var}) {
				background-color: darken($color, $var * 1.5);
			}
		}
	}
}
/***********************/
/***********************/
*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transform-style: preserve-3d;

	user-select: none;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	font-family: "Press Start 2P", cursive;
}
/***********************/
/***********************/
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;

	font-weight: bolder;
	overflow: hidden;
	cursor: pointer;
	background-color: $bg-1;
}
.face {
	position: absolute;
}
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}
/***********************/
/***********************/
// .s{
//     position: fixed;
//     width: 15.25 * $unit-s;
//     height: 15.25 * $unit-s;
//     outline: 1 * $unit-s solid lime;
//     border-radius: 50%;
// }
.main,
.sphere {
	position: absolute;
	width: 15 * $unit-s;
	height: 15 * $unit-s;
}
.main {
	transform: perspective(400 * $unit-s) rotateX(70deg) rotateZ(0)
		translateZ(-7 * $unit-s);
	transition: transform 200ms ease-out;
}
.is-button-active {
	animation: is-button-active 4000ms linear infinite;
}
.is-button-hidden {
	display: none;
}
@keyframes is-button-active {
	to {
		transform: perspective(400 * $unit-s) rotateX(70deg) rotateZ(1turn)
			translateZ(-7 * $unit-s);
	}
}

.svg-icon {
	position: absolute;
	left: 50%;
	bottom: 50px;
	width: 50px;
	height: 50px;

	z-index: 2000;
	opacity: 0.65;
	transform: translateX(-50%);
	cursor: pointer;

	&:hover {
		opacity: 0.9;
	}
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
	fill: white;
}
.svg-icon circle {
	stroke: white;
	stroke-width: 1;
}

.shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translateZ(-0.5 * $unit-s);
	border-radius: 50%;
	background-image: radial-gradient(
		darken($bg-2, 20),
		darken($bg-2, 10),
		$bg-2 60%
	);
	filter: blur(0.4 * $unit-s);

	&::before {
		content: "";
		position: absolute;
		bottom: -16 * $unit-s;
		left: 5 * $unit-s;
		width: 5 * $unit-s;
		height: 10 * $unit-s;

		filter: blur(0.5 * $unit-s);
		border-radius: 50%;
		background-image: linear-gradient(
			to bottom,
			rgba($neon, 0.3),
			rgba($neon, 0.05)
		);
	}
}

.sphere {
	$sides: 30;
	$degree: 360deg;
	$width: 2 * $unit-s;

	&::before,
	&::after {
		content: "";
		position: absolute;
		width: 2 * $unit-s;
		height: 2 * $unit-s;
		border-radius: 50%;

		background-image: linear-gradient(
			to left,
			darken($white, 10),
			darken($white, 20)
		);
		transform: translateZ(-0.49 * $unit-s);
	}

	&::after {
		transform: translateZ(14.5 * $unit-s);
		background-image: linear-gradient(
			to left,
			darken($red, 10),
			darken($red, 10)
		);
	}

	&-item1 {
		$base: 3.75 * $unit-s;
		$pi: 5;
		$y: 75deg;

		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(0.2125 * $unit-s);
		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($white, 13));
		&__side {
			clip-path: polygon(0 0, 100% 27%, 100% 73%, 0% 100%);
		}
	}
	&-item2 {
		$base: 7.35 * $unit-s;
		$pi: 4;
		$y: 60deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-0.55 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($white, 10));
		&__side {
			clip-path: polygon(0 0, 100% 16%, 100% 86%, 0% 100%);
		}
	}
	&-item3 {
		$base: 10.45 * $unit-s;
		$pi: 3.73;
		$y: 48deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-1.7 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($white, 7));
		&__side {
			clip-path: polygon(0 0, 100% 13%, 100% 87%, 0% 100%);
		}
	}
	&-item4 {
		$base: 12.825 * $unit-s;
		$pi: 3.6;
		$y: 28deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-3.2 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($white, 3));
		&__side {
			clip-path: polygon(0 0, 100% 8%, 100% 92%, 0% 100%);
		}
	}
	&-item5 {
		$base: 14.2 * $unit-s;
		$pi: 3.45;
		$y: 15deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-5 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, $white);
		&__side {
			clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
		}
	}
	// ======
	// ======
	&-item6 {
		$base: 14.35 * $unit-s;
		$pi: 3.3;
		$y: 0deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-7 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, $black);
	}
	// ======
	// ======
	&-item7 {
		$base: 14.2 * $unit-s;
		$pi: 3.45;
		$y: -15deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-8.95 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($red, 5));
		&__side {
			clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 95%);
		}
	}
	&-item8 {
		$base: 12.825 * $unit-s;
		$pi: 3.6;
		$y: -28deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-10.8 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($red, 3));
		&__side {
			clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 92%);
		}
	}
	&-item9 {
		$base: 10.45 * $unit-s;
		$pi: 3.73;
		$y: -48deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-12.35 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($red, 2));
		&__side {
			clip-path: polygon(0 13%, 100% 0%, 100% 100%, 0% 87%);
		}
	}
	&-item10 {
		$base: 7.35 * $unit-s;
		$pi: 4;
		$y: -60deg;
		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-13.5 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, darken($red, 2));
		&__side {
			clip-path: polygon(0 14%, 100% 0%, 100% 100%, 0% 86%);
		}
	}
	&-item11 {
		$base: 3.75 * $unit-s;
		$pi: 5;
		$y: -75deg;

		position: absolute;
		width: $width;
		height: $base;
		transform: rotateY(90deg) translateX(-14.25 * $unit-s);

		@include sphere($base, $sides, $degree, $pi, $width, $y, $red);
		&__side {
			clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 73%);
		}
	}
}
.cylinder {
	position: absolute;
	width: 5 * $unit-s;
	height: 5 * $unit-s;

	transform: translateZ(9.5 * $unit-s) rotateX(90deg);
	bottom: -2.5 * $unit-s;
	left: 4.85 * $unit-s;

	.circle {
		$sides: 30;
		$degree: 360deg;
		$width: 5 * $unit-s;

		&-a {
			$base: 5 * $unit-s;
			$pi: 3.5;

			width: $width;
			height: $base;
			transform: rotateY(90deg) translateX(-50%);

			@include cylinder($base, $sides, $degree, $pi, $width, $black);

			&__top {
				background-image: radial-gradient($neon, darken($neon, 15));
				border: 0.6 * $unit-s solid $black;
			}
		}
	}
}
.cylinder2 {
	position: absolute;
	width: 3.5 * $unit-s;
	height: 3.5 * $unit-s;

	transform: translateZ(8.7 * $unit-s) rotateX(90deg);
	bottom: -2 * $unit-s;
	left: 5.625 * $unit-s;

	.circle {
		$sides: 30;
		$degree: 360deg;
		$width: 3.5 * $unit-s;

		&-b {
			$base: 3.5 * $unit-s;
			$pi: 3.5;

			position: absolute;
			width: $width;
			height: $base;
			transform: rotateY(90deg) translateX(-50%);

			@include cylinder($base, $sides, $degree, $pi, $width, $black);

			&__top {
				background-image: radial-gradient($neon, darken($neon, 15));
				border: 0.25 * $unit-s solid $black;
				box-shadow: 0 0 1 * $unit-s rgba($neon, 0.65);
			}
		}
	}
}