.logo {
	--size: 4em;

	width: var(--size);
	height: var(--size);
	flex-shrink: 0;
	
	display: grid;
	grid-template-areas: "everything";
	
	align-items: center;
	justify-items: center;
}

.logo * {
	grid-area: everything;
	width: 100%;
	height: 100%;
}

.logo .circle1 {
	border-radius: 100%;
	border: calc(var(--size) / 6) solid var(--bgcolor);
	z-index: 0;
}

.logo .cover1 {
	z-index: 1;
	background-color: var(--fgcolor);
	width: 104%; /* makes it just a bit wider than the circle to cover up AA artifacts*/
	height: calc(var(--size) / 6);
	animation: spin 40s linear -15s infinite;
	outline: 1px solid transparent; /* also for some AA */
}

.logo .circle2 {
	z-index: 2;
	border-radius: 100%;
	border: calc(var(--size) / 8) solid var(--bgcolor);
	width: 45%;
	height: 45%;
}

.logo .cover2 {
	z-index: 3;
	background-color: var(--fgcolor);
	width: 52%;
	height: calc(var(--size) / 15);
	animation: spin 30s linear -10s infinite reverse;
	outline: 1px solid transparent; /* also for some AA */
}

.logo .iris {
	z-index: 4;
	width: 0;
	height: 0;
	border: calc(var(--size) / 15) solid red;
	border-radius: 100%;
	
	animation: blink 17s ease-in 4s infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0turn);
	}
	100% {
		transform: rotate(1turn);
	}
}

@keyframes blink {
	0% {
		transform: scaleY(100%)
	}
	
	0.5% {
		transform: scaleY(0%);
	}
	
	1% {
		transform: scaleY(100%);
	}
}

@media (prefers-reduced-motion) {
	.logo .cover1, .logo .cover2, .logo .iris {
		animation-duration: 0s !important;
	}
	
	.logo .cover1 {
		transform: rotate(-40deg);
	}
	
	.logo .cover2 {
		transform: rotate(35deg);
	}
}