:root {
	--size: 1.5rem;
	--size-border: 0.1rem;
	--size-frame: 55vmin;
	--border-style: solid;
}

html,
body {
	height: 100%;
	overflow: hidden;
	margin: 0;
	background-color: var(--c-bg);
}

original-vortex {
	--animation-time: 20s;
	padding: var(--size);
	background-color: var(--c-bg);
	perspective: 1000px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: rotate(90deg);
	height: 100%;
	width: 100%;
	transform-origin: center center;
}

@media (prefers-color-scheme: light) {
	:root,
	:host {
		color-scheme: light;
		--c-fg: transparent;
		--c-bg: white;
		--c-border: purple;
	}
}
@media (prefers-color-scheme: dark) {
	:root,
	:host {
		color-scheme: dark;
		--c-fg: transparent;
		--c-bg: black;
		--c-border: green;
	}
}
original-vortex input {
	z-index: 0;
	opacity: 0;
}
original-vortex input:focus ~ vortex-particle {
	outline-color: white;
}
original-vortex input:checked:focus ~ vortex-particle {
	outline-color: var(--color);
	outline-style: dotted;
	color: var(--color);
}
original-vortex input:checked ~ vortex-particle:last-of-type:focus a {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
original-vortex input:checked ~ vortex-particle:last-of-type:focus iframe {
	width: 50%;
	height: 50%;
	background-color: black;
}
original-vortex input:checked ~ vortex-particle:last-of-type:focus a,
original-vortex input:checked ~ vortex-particle:last-of-type:focus-within a {
	color: blue;
	text-decoration: underline;
	pointer-events: all;
	z-index: 2;
}
original-vortex input:checked ~ vortex-particle:last-of-type:focus iframe {
	pointer-events: all;
}
original-vortex input:checked ~ vortex-particle {
	animation-name: rotateSolve;
	animation-delay: calc(var(--index) * 1s + 1s);
	pointer-events: painted;
}
original-vortex input:checked ~ vortex-particle iframe {
	transform: rotate3d(1, 1, 1, 45deg);
}
original-vortex input:checked ~ vortex-particle iframe {
	opacity: 1;
	filter: invert(1);
	width: 100%;
	height: 100%;
	animation: rotate3d var(--animation-time) infinite linear;
}
original-vortex input:checked ~ vortex-particle iframe:nth-of-type(2n) {
	animation-direction: reverse;
}
original-vortex input:checked ~ vortex-particle:focus {
	animation-duration: calc(var(--index) * 666ms);
}
original-vortex input:checked ~ vortex-particle:last-of-type:focus,
original-vortex input:checked ~ vortex-particle:last-of-type:focus-within {
	animation-play-state: paused;
	pointer-events: painted;
	z-index: 2;
}

original-vortex iframe {
	border: none;
	transform: scale(calc(var(--size) * 5));
	opacity: 0;
	transition: opacity 666ms ease-in-out;
}
original-vortex a {
	pointer-events: none;
	width: 100%;
	height: 100%;
	color: transparent;
	font-size: calc(var(--size) * 3);
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}
original-vortex input:checked ~ a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
vortex-particle:last-of-type:focus > input {
	opacity: 1;
}
original-vortex input:checked ~ vortex-particle iframe,
vortex-particle:first-of-type:focus ~ vortex-particle iframe {
	opacity: 1;
}

vortex-particle {
	position: absolute;
	height: var(--size-frame);
	width: var(--size-frame);
	animation: rotate var(--animation-time) infinite linear;
	border: var(--size-border) var(--border-style) var(--color);
	animation-delay: calc(var(--index) * 0.1s);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--size) * 2);
	pointer-events: visible;
	transform: rotateX(0) rotateY(0) scale(0);
	transition: all 48ms ease-in-out;
}
vortex-particle:nth-child(3n) {
	/* animation-direction: reverse; */
}
vortex-particle:first-of-type {
	filter: invert(1);
	width: calc(var(--size-frame) / 2);
	height: calc(var(--size-frame) / 2);
}
vortex-particle:first-of-type:before {
	/* content: "?"; */
	color: white;
	font-size: calc(var(--size) * 3);
}
vortex-particle:focus,
vortex-particle:focus ~ vortex-particle {
	pointer-events: none;
}
vortex-particle:focus + vortex-particle {
	pointer-events: all;
}
vortex-particle:focus,
vortex-particle:first-of-type:focus + vortex-particle {
	outline-style: solid;
	outline-offset: var(--size);
	outline-color: white;
	outline-width: var(--size);
}
vortex-particle:first-of-type:focus,
vortex-particle:first-of-type:focus-within {
	opacity: 1;
	transform: scale(var(--size));
}
vortex-particle:first-of-type:focus:before {
	content: "%20,␍";
}
vortex-particle:first-of-type:focus ~ vortex-particle {
	animation-duration: 10s;
	animation-direction: reverse;
}

@keyframes rotate {
	0% {
		transform: rotateX(-360deg) rotateY(0deg) scale(1);
	}
	50% {
		transform: rotateX(90deg) rotateY(90deg) scale(calc(var(--index) * 0.1));
	}
	100% {
		transform: rotateX(-360deg) rotateY(-360deg) scale(1);
	}
}

@keyframes rotateSolve {
	0% {
		transform: translateY(-50vw) rotateX(45deg);
	}
	100% {
		outline-color: var(--color);
		transform: translateY(50vw) rotateX(45deg);
	}
}

@keyframes rotate3d {
	0% {
		transform: rotate3d(1, 1, 1, 0deg);
	}
	100% {
		transform: rotate3d(0.1, 0.1, 0.1, 360deg);
	}
}