/* 
Thank you, Roman
https://codepen.io/kizu/pen/OJdzpmB
*/


@font-face {
	font-family: "Kosmik";
	src: url("../fonts/LTRKosmik-Regular.woff2");
	font-style: normal;
	font-stretch: normal;
	font-weight: normal;
}

:root {
	--meter-width: 42;
	--bg: white;
	--fg: black;
	--minute-width: .1;
	--hour-width: .3;
	--minute-indicator-length:.9;
	--hour-indicator-length: 1.2;
}
@media (prefers-color-scheme: dark) {
	:root {
		--fg: white;
		--bg: black;
	}
}

body {
  display: grid;
  margin: 0;
  min-height: 100vh;
  place-items: center;
  
  font-family: "Brenner 4", "Nara 19", georgia, serif;
  font-style: Normal;
  font-weight: 400;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 2vmin;
  line-height: 1;
  
  color: var(--fg);
  background: var(--bg);
	
}


div {
  grid-area: 1 / 1;
  z-index: 1;
  width: calc( var(--meter-width) * 1vmin );
  height: calc( var(--minute-width) * 1em);
  box-sizing: border-box;
  
  border-radius: 0;
  background: var(--fg);
  
  transform-origin: 0.5em calc( var(--minute-width) * .5em);
  transition: transform .5s,
  	opacity .5s;
  transform: 
	translateX(calc(50% - 0.5em))
	rotate(calc(360deg * var(--progress) - 90deg))
	;
}
#dot {
	width: 2em;
	height: 2em;
	background: var(--fg);
	border-radius: 50%;
}


#hours,
#hour2 {
  height: calc( var(--hour-width) * 1em);
  width: calc( var(--meter-width) / 1.414 * 1vmin );
  border-radius:  calc( var(--hour-width) * .5em);
  transform-origin: 0.5em calc( var(--hour-width) * .5em);
}

#hour2 {
	animation-name: --show;
	animation-duration: 3600s;
	animation-play-state: paused;
	animation-delay: calc( var(--m) * 3600/60 * -1s );
}
#hours {
	animation-name: --hide;
	animation-duration: 3600s;
	animation-play-state: paused;
	animation-delay: calc( var(--m) * 3600/60 * -1s );
}

@keyframes --show {
	0%,49.7% {
		opacity: 0;
	}
	50.3%,100% {
		opacity: 1;
	}
}
@keyframes --hide {
	0%,49.7% {
		opacity: 1;
	}
	50.3%,100% {
		opacity: 0;
	}
}

#minutes {
  width: calc( var(--meter-width) * 1vmin );
}
#minutes[style="--progress: 0;"],
body:has(#minutes[style="--progress: 0;"]) #hours {
	transition: none 0s;
}

#minuteIndicators {
	z-index: 2;
}

ol {
	grid-area: 1 / 1;
	width: calc( var(--meter-width) * 2vmin );
	aspect-ratio: 1;
	
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
}
li {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	width: calc( var(--minute-width) * 1em);
	height: calc( var(--minute-indicator-length) * 1em );
	border: none;
	background: var(--fg);
	box-sizing: border-box;
	transform: 
		rotate( calc(var(--index) * 6deg ) )
		translateY( calc( var(--meter-width) * -1vmin ) );
}
li:nth-of-type(5n) {
	width: calc( var(--hour-width) * 1em);
	border-radius: calc( var(--hour-width) * .5em);
	height: calc( var(--hour-indicator-length) * 1em );
}

#hourIndicators li {
	transform: 
		rotate( calc(var(--index) * 30deg ) )
		translateY( calc( var(--meter-width) / 1.2 * -1vmin ) )
		rotate( calc(var(--index) * -30deg ) );
	background: none;
	font-size: 7vmin;
	width: auto;
}