/* Centering stuff is not hard. */
body {
	margin: 0;
	background: hsl(0 0 20);
	display: grid;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* The frame and the face of the clock */
div {
	--size: 80vmin;
	height: var(--size);
	width: var(--size);
	border: calc( var(--size) / 14 ) solid black;
	border-radius: 50%;
	box-sizing: border-box;
	background: hsl(0 0 30);
	position: relative;
}
.ticking div {
	background: whitesmoke;
}
button {
	position: absolute;
	right: 0;
	top: 50%;
	translate: -13vmin -50%;
	background: none;
	border: none;
	color: whitesmoke;
	font-size: clamp(.8em,1.9vmin,100em);
}
button:focus-visible {
	text-decoration: underline;
	outline: none;
}
.ticking button {
	opacity: 0;
}

/* By default all hands point down */
[id^="anim-clock"] {
	rotate: 180deg;
	transform-origin: 50%;
	//transition-timing-function: cubic-bezier(.17,.67,1,1.5);
}
.ticking [id^="anim-clock"] {
	transition: .7s;
	transition-timing-function: cubic-bezier(.17,.67,1,1.5);
	transition-timing-function: linear(0, 0.22 2%, 1.11 8%, 1.3, 1.35, 1.37, 1.37, 1.36 14%, 1.32 16%, 1.03 22%,
	0.94, 0.89, 0.87, 0.87, 0.88 31%, 1.01 38%, 1.04, 1.05, 1.04 46%, 1 53%, 0.98,
	0.99 61%, 1.01 72%, 1 87%, 1);
}

/* 
Animates 60 steps in 58 seconds
On page load a delay is set which somewhat corresponds with the current seconds
*/
.active [id="anim-clock-second-hand"] {
	rotate: calc( var(--s) * 6deg );
}

/* Minutes and hours respond to a simple change of custom attributes
set by javascript */
.active [id="anim-clock-minute-hand"] {
	rotate: calc( var(--m) * 6deg );
}
.active [id="anim-clock-hour-hand"] {
	rotate: calc( var(--h) * 30deg + var(--m) * .5deg );
}

/* 
A hack. 
Without it, when the minute hand goes from 59 to 0, it would rotate backwards.
Now it doesn’t animate, which is almost not noticeable, and a bit less annoying.
Works with the hour hand as well.
*/
[style*="--s: 0"] [id^="anim-clock-second-hand"],
[style*="--s: 0"][style*="--m: 0"] [id^="anim-clock-minute-hand"],
[style*="--s: 0"][style*="--m: 0"][style*="--h: 0"] [id^="anim-clock-hour-hand"] {
	transition: 0s;
}

/* 
Very annoying, but this is, for now, the only way to 
transition between steps() in a keyframe animation.
Had to write out every percentage. 
*/
@keyframes ticking {
	0% {
		rotate: 0deg;
		animation-timing-function: ease;
	}
	1.66666666% {
		rotate: 6deg;
		animation-timing-function: ease;
	}
	3.33333333% {
		rotate: 12deg;
		animation-timing-function: ease;
	}
	5% {
		rotate: 18deg;
		animation-timing-function: ease;
	}
	6.66666666% {
		rotate: 24deg;
		animation-timing-function: ease;
	}
	8.33333333% {
		rotate: 30deg;
		animation-timing-function: ease;
	}
	10% {
		rotate: 36deg;
		animation-timing-function: ease;
	}
	11.66666666% {
		rotate: 42deg;
		animation-timing-function: ease;
	}
	13.33333333% {
		rotate: 48deg;
		animation-timing-function: ease;
	}
	15% {
		rotate: 54deg;
		animation-timing-function: ease;
	}
	16.66666666% {
		rotate: 60deg;
		animation-timing-function: ease;
	}
	18.33333333% {
		rotate: 66deg;
		animation-timing-function: ease;
	}
	20% {
		rotate: 72deg;
		animation-timing-function: ease;
	}
	21.66666666% {
		rotate: 78deg;
		animation-timing-function: ease;
	}
	23.33333333% {
		rotate: 84deg;
		animation-timing-function: ease;
	}
	25% {
		rotate: 90deg;
		animation-timing-function: ease;
	}
	26.66666666% {
		rotate: 96deg;
		animation-timing-function: ease;
	}
	28.33333333% {
		rotate: 102deg;
		animation-timing-function: ease;
	}
	30% {
		rotate: 108deg;
		animation-timing-function: ease;
	}
	31.66666666% {
		rotate: 114deg;
		animation-timing-function: ease;
	}
	33.33333333% {
		rotate: 120deg;
		animation-timing-function: ease;
	}
	35% {
		rotate: 126deg;
		animation-timing-function: ease;
	}
	36.66666666% {
		rotate: 132deg;
		animation-timing-function: ease;
	}
	38.33333333% {
		rotate: 138deg;
		animation-timing-function: ease;
	}
	40% {
		rotate: 144deg;
		animation-timing-function: ease;
	}
	41.66666666% {
		rotate: 150deg;
		animation-timing-function: ease;
	}
	43.33333333% {
		rotate: 156deg;
		animation-timing-function: ease;
	}
	45% {
		rotate: 162deg;
		animation-timing-function: ease;
	}
	46.66666666% {
		rotate: 168deg;
		animation-timing-function: ease;
	}
	48.33333333% {
		rotate: 174deg;
		animation-timing-function: ease;
	}
	50% {
		rotate: 180deg;
		animation-timing-function: ease;
	}
	51.66666666% {
		rotate: 186deg;
		animation-timing-function: ease;
	}
	53.33333333% {
		rotate: 192deg;
		animation-timing-function: ease;
	}
	55% {
		rotate: 198deg;
		animation-timing-function: ease;
	}
	56.66666666% {
		rotate: 204deg;
		animation-timing-function: ease;
	}
	58.33333333% {
		rotate: 210deg;
		animation-timing-function: ease;
	}
	60% {
		rotate: 216deg;
		animation-timing-function: ease;
	}
	61.66666666% {
		rotate: 222deg;
		animation-timing-function: ease;
	}
	63.33333333% {
		rotate: 228deg;
		animation-timing-function: ease;
	}
	65% {
		rotate: 234deg;
		animation-timing-function: ease;
	}
	66.66666666% {
		rotate: 240deg;
		animation-timing-function: ease;
	}
	68.33333333% {
		rotate: 246deg;
		animation-timing-function: ease;
	}
	70% {
		rotate: 252deg;
		animation-timing-function: ease;
	}
	71.66666666% {
		rotate: 258deg;
		animation-timing-function: ease;
	}
	73.33333333% {
		rotate: 264deg;
		animation-timing-function: ease;
	}
	75% {
		rotate: 270deg;
		animation-timing-function: ease;
	}
	76.66666666% {
		rotate: 276deg;
		animation-timing-function: ease;
	}
	78.33333333% {
		rotate: 282deg;
		animation-timing-function: ease;
	}
	80% {
		rotate: 288deg;
		animation-timing-function: ease;
	}
	81.66666666% {
		rotate: 294deg;
		animation-timing-function: ease;
	}
	83.33333333% {
		rotate: 300deg;
		animation-timing-function: ease;
	}
	85% {
		rotate: 306deg;
		animation-timing-function: ease;
	}
	86.66666666% {
		rotate: 312deg;
		animation-timing-function: ease;
	}
	88.33333333% {
		rotate: 318deg;
		animation-timing-function: ease;
	}
	90% {
		rotate: 324deg;
		animation-timing-function: ease;
	}
	91.66666666% {
		rotate: 330deg;
		animation-timing-function: ease;
	}
	93.33333333% {
		rotate: 336deg;
		animation-timing-function: ease;
	}
	95% {
		rotate: 342deg;
		animation-timing-function: ease;
	}
	96.66666666% {
		rotate: 348deg;
		animation-timing-function: ease;
	}
	98.33333333% {
		rotate: 354deg;
		animation-timing-function: ease;
	}
	100% {
		rotate: 360deg;
		animation-timing-function: ease;
	}
}

/* You have reached the end! */