@property --step {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@keyframes animation-progress {
	0%{--step:0.0;}
	100%{--step:1.0;}
}
.dice {
	animation-name: animation-progress;
	animation-duration: 3600s;
	animation-iteration-count: infinite;
	animation-direction: repeat;
	animation-timing-function: linear;
	z-index: 1000;
	height: 100%;
	width: 100vw;
	overflow: hidden;
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
	.die {
		position: absolute;
		top: calc(50vh 
			+  sin(sin(sin(sin((var(--step) * 100 + var(--index) * 10)))))  * 35vh
			+  sin(sin(sin(sin((var(--step) * 200 + var(--index) * 15)))))  * 35vh
			+  sin(sin(sin(sin((var(--step) * 300 + var(--index) * 20)))))  * 35vh
			+  sin(sin(sin(sin((var(--step) * 400 + var(--index) * 25)))))  * 35vh
		);
		left: calc(50vw 
			+  sin(sin(sin(sin((var(--step) * 100 + var(--index) * 11)))))  * 35vw
			+  sin(sin(sin(sin((var(--step) * 200 + var(--index) * 16)))))  * 35vw
			+  sin(sin(sin(sin((var(--step) * 300 + var(--index) * 21)))))  * 35vw
			+  sin(sin(sin(sin((var(--step) * 400 + var(--index) * 26)))))  * 35vw
		);
		width: 14em;
		height: 20em;
		--index: calc(sibling-index());
		& >* {
			font-size: 4em;
			width: 2em;
			transform-style: preserve-3d;
			transform:
				translateY(2.5em)
				perspective(20em)
				rotateX(calc(var(--step) *  360deg * (193 + 3 * var(--index)) + var(--index) * 130deg))
				rotateY(calc(var(--step) *  360deg * (367 + 5 * var(--index)) + var(--index) * 261deg))
				rotateY(calc(var(--step) *  360deg * (467 + 7 * var(--index)) + var(--index) * 73deg))
				;
			counter-reset: side-counter 0;
			& >* {
				counter-increment: side-counter 1;
				&:before{content: counter(side-counter);}
				position: absolute;
				top: 0;
				left: 0;
				width: 2em;
				height: 2em;
				color: var(--accent-col);
				background: oklch(from var(--accent-inv-col-2) l c calc(var(--index) * 113) / 0.6);
				border: var(--border-width) solid var(--accent-col);
				text-align: center;
				line-height: 2em;
			}
			&.cube >* {
				&:nth-child(1){transform: translateZ(1em);}
				&:nth-child(2){transform: rotateX(90deg)   translateZ(1em);}
				&:nth-child(3){transform: rotateY(90deg)   translateZ(1em);}
				&:nth-child(4){transform: rotateY(-90deg)  translateZ(1em);}
				&:nth-child(5){transform: rotateX(-90deg)  translateZ(1em);}
				&:nth-child(6){transform: rotateY(-180deg) translateZ(1em);}
			}

			&.d8 >* {
				--h: calc(sqrt(3) / 2 * 100%);
				clip-path: polygon(0 var(--h), 50% 00%, 100% var(--h));
				--dist: calc(2em / sqrt(6));
				--γ: calc(90deg - atan(sqrt(2)));
				--nγ: calc(0deg - var(--γ));
				--dy: -0.15em;
				border: none;
				border-width:0;
				&:nth-child(1){transform: rotateX(var(--γ)) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(2){transform: rotateX(var(--nγ)) rotateZ(180deg) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(3){transform: rotateY(92deg) rotateX(var(--γ)) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(4){transform: rotateY(92deg) rotateX(var(--nγ)) rotateZ(180deg) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(5){transform: rotateY(-92deg) rotateX(var(--γ)) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(6){transform: rotateY(-92deg) rotateX(var(--nγ)) rotateZ(180deg) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(7){transform: rotateY(180deg) rotateX(var(--γ)) translateZ(var(--dist)) translateY(var(--dy));}
				&:nth-child(8){transform: rotateY(180deg) rotateX(var(--nγ)) rotateZ(180deg) translateZ(var(--dist)) translateY(var(--dy));}
			}
		}
	}
	/*Firefox Fallback:*/
	.die:nth-child(1){--index:1;}
	.die:nth-child(2){--index:2;}
	.die:nth-child(3){--index:3;}
	.die:nth-child(4){--index:4;}
	.die:nth-child(5){--index:5;}
	.die:nth-child(6){--index:6;}
	.die:nth-child(7){--index:7;}
	.die:nth-child(8){--index:8;}
	.die:nth-child(9){--index:9;}
	.die:nth-child(10){--index:10;}
	.die:nth-child(11){--index:11;}
	.die:nth-child(12){--index:12;}
	.die:nth-child(13){--index:13;}
	.die:nth-child(14){--index:14;}
	.die:nth-child(15){--index:15;}
	.die:nth-child(16){--index:16;}
	.die:nth-child(17){--index:17;}
	.die:nth-child(18){--index:18;}
	.die:nth-child(19){--index:19;}
	.die:nth-child(20){--index:20;}
	.die:nth-child(21){--index:21;}
	.die:nth-child(22){--index:22;}
	.die:nth-child(23){--index:23;}
	.die:nth-child(24){--index:24;}
	.die:nth-child(25){--index:25;}
	.die:nth-child(26){--index:26;}
	.die:nth-child(27){--index:27;}
	.die:nth-child(28){--index:28;}
	.die:nth-child(29){--index:29;}
	.die:nth-child(30){--index:30;}
}