:root {
	--duration: 3600;
	--delay: 300; /* 6 */
	--delay: 1800; /* 7 */
	--delay: 3300; /* 8 */
	--delay: 4800; /* 9 */
	--delay: 6300; /* 10 */
	--delay: 7800; /* 11 */
	--delay: 8300; /* 11 */
	--delay: calc(11766); /* 7 */
	--m: 2.31;
	--r: .33;
	--path: path('M82.5 0c45.54 0 82.5 36.96 82.5 82.5S117.81 233.31 81.84 233.31C46.2 233.31 0 128.04 0 82.5S36.96 0 82.5 0Z');
	--pointer: 36%;
	--magic: 2.05;
	--indicator: 31%
}
@media (min-height: 33.5em ) and (min-width: 30em) {
	:root {
		--m: 3.5;
		--r: .5;
		--magic: 2.35;
		--indicator: 41%;
		--path: path('M125 0c69 0 125 56 125 125S178.5 353.5 124 353.5C70 353.5 0 194 0 125S56 0 125 0Z');
	}
}
@media (min-height: 50.25em ) and (min-width: 43em) {
	:root {
		--m: 5.25;
		--r: .75;
		--magic: 2.75;
		--indicator: 63%;
		--path: path('M187.5 0c103.5 0 187.5 84 187.5 187.5S267.75 530.25 186 530.25C105 530.25 0 291 0 187.5S84 0 187.5 0Z');
	}
}
@media (min-height: 67em ) and (min-width: 57em) {
	:root {
		--m: 7;
		--r: 1;
		--magic: 3.15;
		--indicator: 83%;
		--path: path('M250 0c138 0 250 112 250 250S357 707 248 707C140 707 0 388 0 250S112 0 250 0Z');
	}
}
body {
	margin: calc( (var(--m) + 1) * 1.4em);
	display: grid;
	overflow: hidden;
	font-family: "Francis", sans-serif;
	font-weight: 500;
}
time {
	position: relative;
	margin: auto;
	width: calc(34 * var(--r) * 1em);
}
img {
	height: calc(35 * var(--r) * 1em + (var(--m)) * 2em);
	position: absolute;
	top: calc((var(--m)) * -1.3em);
	left: 50%;
	translate: -50%;
	transform: rotate(18deg);
	animation-name: turn;
	animation-duration: calc( (var(--duration) / 12) * 10s);
	animation-delay: calc( ((var(--duration) / 12) + var(--delay)) * -1s); 
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
div {
	text-align: center;
	line-height: .7;
	width: 1em;
	aspect-ratio: 1;
	font-size: calc(var(--m) * 1em);
	background: black;
	color: white;
	offset-path: var(--path);
	animation-name: go;
	animation-duration: calc( var(--duration) * 1s);
	animation-delay: calc( (var(--index) * (var(--duration) / 12) + var(--delay)) * -1s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
	position: absolute;
	top: 0;
	left: 50%;
	translate: -222%;
	offset-anchor: bottom center;
}
div:nth-of-type(1) { --index: 1; }
div:nth-of-type(2) { --index: 2; }
div:nth-of-type(3) { --index: 3; }
div:nth-of-type(4) { --index: 4; }
div:nth-of-type(5) { --index: 5; }
div:nth-of-type(6) { --index: 6; }
div:nth-of-type(7) { --index: 7; }
div:nth-of-type(8) { --index: 8; }
div:nth-of-type(9) { --index: 9; }
div:nth-of-type(10) { --index: 10; }
div:nth-of-type(11) { --index: 11; }
div:nth-of-type(12) { --index: 12; }

div::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 0%;
	background: black;
	bottom: 100%;
	left: 50%;
	translate: -50%;
	transition: 10s;
}
[style*='--hour: 1;'] div:nth-of-type(12)::after { height: var(--pointer); }
[style*='--hour: 2;'] div:nth-of-type(7)::after { height: var(--pointer); }
[style*='--hour: 3;'] div:nth-of-type(2)::after { height: var(--pointer); }
[style*='--hour: 4;'] div:nth-of-type(9)::after { height: var(--pointer); }
[style*='--hour: 5;'] div:nth-of-type(4)::after { height: var(--pointer); }
[style*='--hour: 6;'] div:nth-of-type(11)::after { height: var(--pointer); }
[style*='--hour: 7;'] div:nth-of-type(6)::after { height: var(--pointer); }
[style*='--hour: 8;'] div:nth-of-type(1)::after { height: var(--pointer); }
[style*='--hour: 9;'] div:nth-of-type(8)::after { height: var(--pointer); }
[style*='--hour: 10;'] div:nth-of-type(3)::after { height: var(--pointer); }
[style*='--hour: 11;'] div:nth-of-type(10)::after { height: var(--pointer); }
[style*='--hour: 12;'] div:nth-of-type(5)::after { height: var(--pointer); }

ol {
	color: black;
	position: absolute;
	left: 50%;
	top: calc( ( (35 * var(--r) + var(--magic)) * 1em + (var(--m)) * 2em) / 2 );
	translate: -50%;
	margin: 0;
	padding: 0;
	list-style: none;
}
ol li {
	position: absolute;
	text-align: center;
	color: hsl(0 0% 0% / 0);
	left: 0;
	transform:
		translateX(-50%) 
		rotate( calc(((var(--index) * 3) - 90) * 1deg )) 
		translateY(calc( ((35 * var(--r) + 2) * 1em + (var(--m)) * 2em) / -2 ));
}
ol li:nth-of-type(5n + 1) {
	color: black;
	font-weight: 300;
}
ol li:nth-of-type(15n + 1) {
	font-weight: 700;
}
ol li::after {
	content: '';
	position: absolute;
	width: 1px;
	height: var(--indicator);
	background: white;
	top: 129%;
	left: 50%;
	translate: -50%;
}
ol li:nth-of-type(15n + 1)::after {
	width: 3px;
}


@keyframes go {
  100% {
	offset-distance: 100%;
  }
} 
@keyframes turn {
	100% {
		rotate: 1turn;
	}
}