@import 'compass/css3';

$chain: rotateY(-90deg) translate(50%) 
				rotateY(90deg);
$n-states: length($chain) + 2;
$perc: 100%/$n-states;
$d-play: 8em;

* {
	margin: 0;
	padding: 0;
	fill: currentColor;
	vector-effect: non-scaling-stroke;
}

html { overflow: hidden; }

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 10em; height: 100vh;

	> svg, > input, > label {
		position: absolute;
	}
	
	@media (min-aspect-ratio: 105/100) 
		 and (min-width: 50em) {
		flex-direction: row;

		pre {
			width: 10em;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
}

line {
	stroke: currentColor;
	stroke-width: 2px;
	marker-end: url(#arrow);
	vector-effect: non-scaling-stroke;
}

div {
	position: absolute;
	transform-style: preserve-3d;
}

pre {
	order: 1;
	padding: .5em 1em;
	background: #111;
	color: #ccc;
	font: .875em/2 courier;
	white-space: pre-wrap;
	
	@media (min-width: 15em) {
		font-size: 1em;
	}
	
	@media (min-width: 20em) {
		font-size: 1.25em;
	}
	
	@media (min-width: 75em) {
		font-size: 1.5em;
	}
}

body > svg { position: absolute; }

.hidden { opacity: .001; }

.scene {
	flex: 1;
	order: 2;
	perspective: 32em;
	perspective-origin: calc(50% - 10em) 50%;
}

.cube {
	--inradius: 19%;
	
	top: 50%; left: 50%;
	margin: calc(-1*var(--inradius));
	padding: var(--inradius);
	
	&__face {
		box-shadow: inset 0 0 0 1px black;
		opacity: .5;
		background: whitesmoke;
		
		@for $i from 0 to 6 {
			$s: pow(-1, $i);
			
			&:nth-child(#{$i + 1}) {
				transform: if($i < 4, 
					rotateY($i*90deg), 
					rotate($s*90deg))
				translate(50%) rotateY(90deg);
			}
		}
	}
	
	@media (min-aspect-ratio: 1/1) 
		and (min-width: 50em) {
			--inradius: 15%;
	}
	
	@media (min-aspect-ratio: 13/10) {
		@media (min-width: 62.5em) {
			--inradius: 12.5%;
		}

		@media (min-width: 75em) {
			--inradius: 10%;
		}

		@media (min-width: 100em) {
			--inradius: 8%;
		}
	}
}

.square {
	top: 0; right: 0; bottom: 0; left: 0;
	
	&:not(.cube__face) {
		> svg { width: 100%; height: 100%; }
		
		@media (min-width: 20em) {
			&:after {
				position: absolute;
				right: .25em; bottom: 50%;
				font: italic 2em/1.5 times new roman, serif;
				content: 'x';
			}
		}
	}
}

.ini { background: rgba(silver, .65); }

.ani { background: rgba(#ee8c25, .75); }

.basic {
	animation: ani 5s linear infinite;
	animation-play-state: paused;
}

@keyframes ani {
	$curr-chain: ();
	
	@for $i from 1 to $n-states {
		$ks: $i*$perc;
		
		@if $i == 1 { $ks: 0%, $ks }
		@else {
			$curr-chain: $curr-chain 
									 nth($chain, $i - 1);
		}
		@if $i == $n-states - 1 { $ks: $ks, 100% }
		
		#{$ks} {
			transform: 
				if($i == 1, none, $curr-chain);
		}
	}
}

.token {
	&--fnc { color: mix(#fff, #1c9edc); }
	&--uni { color: mix(#fff, #a048b9); }
	
	&--var {
		color: mix(#fff, #d14730);
		font-weight: 900;
	}
}

[id='run'] {
	position: absolute;
	left: -100vw;
	
	&:checked {
		& ~ .scene .basic {
			animation-play-state: running;
		}
		
		& ~ [for='run'] { opacity: .001; }
	}
}

[for='run'] {
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 3;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	opacity: .999;
	transition: opacity .5s;
	cursor: pointer;
	
	svg {
		align-self: center;
		width: $d-play; height: $d-play;
		
		&:hover use {
			stroke-dashoffset: 0;
		}
	}
	
	* {
		fill: none;
		stroke: #4ca454;
	}
	
	use {
		transition: stroke-dashoffset 1s 
			ease-in-out;
		stroke-width: .5em;
	}
	
	path { stroke-width: .25em; }
}