:root {
	--size: 1.5em;
	--size-border: 0.1rem;
	--size-frame: 40vmin;
	--border-style: dashed;
	--outline-color: var(--color);
}

html,
body {
	height: 100%;
	overflow: hidden;
	margin: 0;
}
/* container */
square-ball {
	--animation-duration: calc(23 / 2 * 1s);
	--animation-timing: ease-in-out;
	padding: var(--size);
	width: 100vw;
	height: 100vh;
	background-color: var(--c-bg);
	perspective: 1000px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media (prefers-color-scheme: light) {
	:root,
	:host {
		color-scheme: light;
		--c-fg: purple;
		--c-bg: white;
		--c-border: purple;
	}
}
@media (prefers-color-scheme: dark) {
	:root,
	:host {
		color-scheme: dark;
		--c-fg: green;
		--c-bg: black;
		--c-border: green;
	}
}

square-ball input[type="checkbox"] {
	opacity: 0;
}
square-ball input[type="checkbox"]:focus ~ square-particle {
	outline-color: var(--color);
	outline-style: double;
}
square-ball input[type="checkbox"][checked]:focus ~ square-particle[active] {
	outline-width: calc(var(--size) * 2);
}

/* a particle */
square-particle {
	--animation-delay: 1s;
	position: absolute;
	height: var(--size-frame);
	width: var(--size-frame);
	animation: rotate var(--animation-duration) infinite var(--animation-timing);
	animation-direction: alternate;
	animation-delay: calc(var(--index) * 0.1s);
	border: var(--size-border) var(--border-style) var(--c-border);
	display: flex;
	justify-content: center;
	align-items: center;
	outline: 0.1rem solid var(--outline-color);
	outline-offset: calc(var(--index) / 2 * 0.4rem);
	cursor: grab;
	border-radius: 0;
	transition: all 24ms ease-in-out;
	padding: calc(var(--size) * 1.5);
}

/* when focuses */
square-particle:focus {
	border-radius: calc(var(--index) * calc(var(--size)));
	outline-width: calc(var(--size));
	outline-color: var(--color);
	pointer-events: none;
}
square-particle:focus ~ square-particle {
	pointer-events: none;
}
square-particle:focus::before {
	color: var(--color);
	transform: scale(calc(var(--size) * 5));
}

/* all particle pseudo elements */
square-particle::before,
square-particle::after {
	pointer-events: none;
	font-family: monospace;
	font-size: calc(var(--size) * 2);
	transition: all calc(420 / 42 / 12 * 23ms) ease-out;
}
square-particle:last-child::before,
square-particle:last-child::after {
	transition-delay: 1s;
	display: inline;
	margin-right: 10vw;
	text-align: right;
	z-index: 2;
}
square-particle::before {
	display: block;
	content: attr(c);
	color: transparent;
	margin-right: calc(var(--index) * 2.5vw);
}
square-particle:focus ~ square-particle:last-child {
	opacity: 0;
}

/* only last child (visually first) */
square-particle:last-child:focus {
	outline-style: dotted;
}

/* only first child, visually last */
square-particle:first-of-type:focus ~ square-particle {
	outline-width: 0.3rem;
	outline-style: dotted;
	outline-color: var(--color);
	filter: invert(1);
}
/* all other elements are shown */
square-particle:first-of-type:focus ~ square-particle:before,
square-particle[active]:before {
	color: var(--color);
}
square-particle[active] {
	outline-color: var(--color);
	outline-width: calc(var(--size) / 2);
}
square-particle[active] + square-particle {
	color: var(--color);
}
square-particle[active] + square-particle + square-particle {
	color: var(--color);
}

/* the animation with various steps and transformations */
@keyframes rotate {
	0% {
		transform: rotateX(0) rotateY(0);
		border-radius: 50%;
	}
	35% {
		transform: rotateX(-360deg) rotateY(-360deg)
			scale(calc(var(--index) * -10%));
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg)
			scale(calc(var(--index) * 5%) + 0.1);
		border-radius: 50%;
	}
}

@keyframes rotateSimple {
	0% {
		transform: rotateX(0) rotateY(0) scale(0.3);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg) scale(0.3);
	}
}