@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--rxIcosahedron: calc(acos(sqrt(5) / -3) - 180deg);
	/* ≈ 41.8103deg */

	--tetrahelix-red: calc(-2 * atan(sqrt(2) / 4));
	/* ≈ -38.931629deg */

	--tetrahelix-large: calc(acos(1 / 3) - 180deg);
	/* ≈ -109.471deg */

	--tetrahelix-small: calc(180deg + var(--tetrahelix-red) + var(--tetrahelix-large));
	/* ≈ 31.586338deg */
}

body {
	font-family: "Lobster", sans-serif;
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	display: grid;
	place-items: center;
	perspective: 800px;
	overflow: clip;

	* {
		transform-style: preserve-3d;
	}
}

.change {
	position: fixed;
	inset: 0;
	padding: 0.5em;
	font-size: 2em;
	cursor: pointer;
	animation: change1 3s;

	&:has(:checked) {
		animation: change2 3s;

		~ .scene {
			.A { animation: toTetrahelix-A 3s ease-in-out forwards; }
			.B, .C, .D { animation: toTetrahelix-BCD 3s ease-in-out forwards; }
		}
	}

	input { display: none; }
}

@keyframes change1 {
	10%, 90% { opacity: 0; pointer-events: none; }
}
@keyframes change2 {
	10%, 90% { opacity: 0; pointer-events: none; }
}

.scene {
	position: relative;
	pointer-events: none;

	* { position: absolute; }
}

.m {
	transform:
				rotateX(calc(var(--my) * -60deg))
				rotateY(calc(var(--mx) * 60deg));
	transition: transform 0.5s ease-out;
	animation: m 60s infinite linear;
}

@keyframes m {
	to { rotate: y 360deg; }
}

.tri {
	--width: 10em;
	--color: hsl(calc(var(--i) * 36) 75% calc(60% + var(--l) * 10%));

	width: var(--width);
	height: calc(cos(30deg) * var(--width));
	transform-origin: bottom;
	transition: transform 1s;

	&.A { animation: toIcosahedron-A 3s ease-in-out forwards; }
	&:is(.B, .C, .D) { animation: toIcosahedron-BCD 3s ease-in-out forwards; }

	&.B { --preTransform: translateX(-50%) rotateZ(-60deg) translateX(50%); }
	&.C { --preTransform: translateX(50%) rotateZ(60deg) translateX(-50%); }
	&.D { --preTransform: rotateZ(180deg); }

	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background-color: var(--color, #fffe);
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		background-image: radial-gradient(circle at 50% 66.66%, transparent, 60%, #000 85%);
	}
}

.a1 { --rxTetrahelix: var(--tetrahelix-red); }
.a2 { --rxTetrahelix: var(--tetrahelix-small); }
.a3 { --rxTetrahelix: var(--tetrahelix-large); }

@keyframes toTetrahelix-A {
	0% { transform: translate3d(-50%, -50%, -9em); }
	50% { transform: translate3d(-75%, -50%, 0em); }
	100% { transform: translate3d(-50%, -50%, -4em); }
}

@keyframes toTetrahelix-BCD {
	0% { transform: var(--preTransform) rotateX(var(--rxIcosahedron)); }
	50% { transform: var(--preTransform) rotateX(0deg); }
	100% { transform: var(--preTransform) rotateX(var(--rxTetrahelix)); }
}

@keyframes toIcosahedron-A {
	0% { transform: translate3d(-50%, -50%, -4em); }
	50% { transform: translate3d(-75%, -50%, 0em); }
	100% { transform: translate3d(-50%, -50%, -9em); }
}

@keyframes toIcosahedron-BCD {
	0% { transform: var(--preTransform) rotateX(var(--rxTetrahelix)); }
	50% { transform: var(--preTransform) rotateX(0deg); }
	100% { transform: var(--preTransform) rotateX(var(--rxIcosahedron)); }
}