// vars

$random_color: rgba(random(255),random(255),random(255),.5);

$c: ( // colors 
	s: #000,
	w: #fff,
	gr: #F0F0EF,
	r: #EC7263,
	y: #FEBE7E,
	br: #A75265,
	li: #57385C,
	bg: rgba(46, 230, 11, 0.5), //$random_color,
);

// set in settings
$f: unquote("'Podkova', serif"); 
$fz: 16px;

@function clr($col) { // usage: clr(s) from $c
	@return get($c, $col);
};

// ------------- settings -------

$time: .3s;

// --------- defaults ---------
* {
	&:focus {
		outline: 0;
	}
	
	&, &:before, &:after {
		box-sizing: border-box;
	}
}
@include placeholder(){
		font-family: $f;
}
// --------------------
html {
	background-color: clr(s);
	
	body {
		font-family: $f;
		font-size: $fz;
		color: clr(w);
		background-color: clr(bg);
	}
	
	&, body {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
}

h1 {
	font-size: 1.3em;
	margin-bottom: .5em;
}
p {
	a {
		color: clr(w);
		text-decoration: none;
		text-shadow: .2em .2em 0 rgba(clr(s), .75);

		&:hover {
			text-decoration: underline;
		}
	}
}

small {
	font-size: .7em;
	
	h1 & {
		vertical-align: top;
	}
}

#sect	{
	width: 20em;
	height: 20em;
	margin: 10vmin auto 0;
	padding: 1em;
	position: relative;
	border-radius: .5em;
	//background-color: clr(g);
}

nav {
	display: block;
	padding: 2em 1em;
	margin: 0 auto;
	width: 5em;
	// filter: url(#filter-goo2);
}

ul {
	position: relative;
	background-color: rgba(clr(s), .5);
	border-radius: 50%;
	width: 3em;
	height: 3em;
	z-index: 100;
	transition: all $time $time;
	box-shadow: inset 0 -.1em 0 0 rgba(clr(w), 0), 0 0 0 0 rgba(clr(s), 0);
	
	&:hover {
		transition: all $time;
		box-shadow: inset 0 -.1em 0 0 rgba(clr(w), .1), 0 0 0 70em rgba(clr(s), .3);

		li:not(.closer) {
			opacity: 1;
			height: 200%;
			top: 0%;
			transition: all $time ease-out;
			
			.itm {
				box-shadow: 0 0 0 .25em rgba(clr(s), .3),  0 -.1em 0 rgba(clr(w), .2),  0 .1em 0 rgba(clr(s), .3);
				&:hover {
					background-color: clr(br);
					
						&:after {
							content: '';
							position: fixed;
							//background-color: rgba(red, .5);
							border-radius: 50%;
							width: 150%;
							height: 150%;
							top: -25%;
							left: -25%;
							z-index: -1;
						}
					}
			
				h2 {
					&:after {
						opacity: .5;
					}
				}
			}
		}
	}
	
	li {
		position: absolute;
		left: 0;
		height: 0%;
		top: 50%;
		display: inline-block;
		transform-origin: center bottom;
		transition: all $time ease-in $time/2;
		width: 3em;
		//margin-left: .5em;
		// background-color: red;
				
		&:not(:first-child) {
			opacity: 0;
		}
		&:first-child {
			.itm {
				box-shadow: 0 0 0 .15em rgba(clr(s), .3),
					0 -.1em 0 rgba(clr(w), .2),
					0 .1em 0 rgba(clr(s), .2);

			}
		}
		
		h2 {
			display: inline-block;
			white-space: nowrap;

			&:after {
				display: inline-block;
				position: absolute;
				right: 0;
				top: 0;
				font-size: .6em;
				padding: 0 .3em;
				border-radius: 50%;
				background-color: clr(s);
				opacity: 0;
				line-height: 1;
				transition: all $time $time;
			}
			
			a {
				padding: .5em;
				color: rgba(clr(y), .5);
				text-decoration: none;
				transition: all $time;
				border-radius: 50%;
				
				&:hover {
					color: clr(y);
				}
				
				&:active {
					color: clr(w);
					box-shadow: inset .2em .2em .2em rgba(clr(s), .33);
				text-shadow: .2em .2em .2em rgba(clr(s), .33);
				}
			}
		}
		
		.itm {
			width: 3em;
			height: 3em;
			line-height: 3;
			vertical-align: middle;
			text-align: center;
			position: absolute;
			// overflow: hidden;
			top: 0;
			left: 50%;
			border-radius: 50%;
			background-color: clr(li);
			box-shadow: 0 0 0 0 rgba(clr(s), 0),  0 0 0 rgba(clr(w), 0),  0 .1em 0 rgba(clr(s), .3);
			display: inline-block;
			transition: all $time;
		}
	}
}
@for $i from 1 through 16 {
	li:nth-last-of-type(#{$i}):first-of-type, 
	li:nth-last-of-type(#{$i}):first-of-type ~ li {

		ul:hover & {
			height: 30% + ($i * 16);
		}
		
		
		@for $j from 1 through $i {

			ul:hover & {			
				&:nth-child(#{$j}) {
					//z-index: $j;
				}
			}
			
			&:nth-last-child(#{$j}) {
				z-index: $j;
				transform: rotate((-360deg / $i) * $j);
				
				.itm {
					transform: translate(-50%, -50%) rotate((360deg / $i) * $j);
										
					h2 {
						&:after {
							content: ' #{($i - $j) +1}';
							position: fixed;
						}
					}
				
				}
			}
		}
	}
	
}