/* This code registers --rotation as a custom CSS property, with the type of <angle>. Seems like this allows the browser to interpolate it as an angle!*/
@property --rotation {
	syntax: '<angle>';
	inherits: true;
	initial-value: 0deg;
}

/* This code creates the actual animation. */
@keyframes orbit-rotate {
	from { --rotation: 0deg; }
	to { --rotation: 360deg; }
}

/* This is just the container for all the buttons and the centerpiece, normal CSS stuff. */
.week-links {
	position: relative;
	width: 640px;
	height: 320px;
	margin: 80px auto;
	--rx: 300px;
	--ry: 140px;
	--rotation: 0deg;
	--tilt: -10deg;
	transform: rotate(var(--tilt));
	animation: orbit-rotate 24s linear infinite;
}

/* This one needed some understanding (even though I did so much trigonometry!). */
.week-button {
	position: absolute;
	left: calc(50% + cos(calc(var(--rotation) + var(--offset))) * var(--rx));
	top: calc(50% + sin(calc(var(--rotation) + var(--offset))) * var(--ry));
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--tilt)));
	z-index: calc(round(sin(calc(var(--rotation) + var(--offset))) * 1000, 1));
}

/* For the sphere in the middle of the orbit! */
.orbit-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--tilt)));
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	font-size: 1.6em;
	text-transform: uppercase;
	z-index: 0;
}