@font-face {
	src: url("../fonts/Shop_Sans_Variable-v01.woff2");
	font-family: "Shop Sans";
}
html {
	color-scheme: light dark;
	--clr: deeppink;
	--clr: oklch(from deeppink l c calc( 360/1440*--mm ));
	--opa: .1;
	@media (prefers-color-scheme: dark) {
		--opa: .22;
	}
}

/* (79.6 - --dd) * 6.27  */
body {
	font-family: "Shop Sans";
	display: grid;
	height: 100vh;
	margin: 0;
	--clr: oklch(from deeppink l c calc( 360/1440* var(--mm) ));
	color: var(--clr);
}

svg {
	grid-column: 1 / 1;
	grid-row: 1 / 1;
	z-index: 1;
	rotate: 90deg;
	max-width: 100vmin;
	aspect-ratio: 1;
	margin: auto;
}
svg.n {
	scale: .999;
}
/* //(79.6 - --dd) * 6.27 */
textPath {
	fill: var(--clr);
	opacity: var(--opa);
	font-size: calc( var(--ff) * 1% );
	transition: 1s;
	font-variation-settings: "CURV" calc( var(--ff)/186*20);
}
/* 
186 == 20;
(-ff/186)*20/--dd*100
 */

textPath:nth-of-type(1n) {
	--ff:  calc( (79.6 - var(--dd)) * 6.27 );
	font-variation-settings: "CURV" calc( var(--ff)/186*20/ var(--dd)*100 );
}


.on,
.sOn {
	opacity: 1;
}
.sOn {
	/* opacity: .5; */
	z-index: 1;
	filter: hue-rotate(-180deg);
}
.on {
	filter: hue-rotate(-0deg);
	z-index: 2;
}


div {
	grid-column: 1 / 1;
	grid-row: 1 / 1;
	margin: auto;
	display: grid;
	transition: opacity .5s;
}
body > div {
	rotate: -84deg;
}
div div {
	transform-origin: 0 50%;
	transform: translateX(50%) rotate( calc( var(--z) * 6deg + 3deg ) );
	width:36.5vmin;
	text-align: end;
	font-variation-settings: "CURV" 0;
	font-size: 3.8vmin;
	opacity: var(--opa);
}
div div:nth-of-type(1),
div div:nth-of-type(7) {
	display: grid;
}