@import 'naturalcrit/styles/reset.less';
//@import 'naturalcrit/styles/elements.less';
@import 'naturalcrit/styles/animations.less';
@import 'naturalcrit/styles/colors.less';
@import 'naturalcrit/styles/tooltip.less';

html,body, #reactContainer{
	min-height: 100vh;
	height: 100vh;
	margin: 0;
	font-family      : 'Open Sans', sans-serif;
}


.main{
	height           : 100vh;
	background-color : white;
	.top{
		.fadeInTop(1s);
		.delay(0.5);
		margin-bottom : 100px;
		padding-top   : 100px;
		text-align    : center;
		.logo{
			font-size : 4em;
			color     : black;
			svg{
				fill : black;
			}
		}
		p{
			margin-top : 10px;
			font-size  : 1.3em;
			font-style : italic;
			color      : @grey;
		}
	}
	.tools{
		width      : 100%;
		text-align : center;
		.toolContainer{
			.sequentialDelay(0.5s, 1s);
			.fadeInDown(1s);
			.keep();
			display      : inline-block;
			cursor       : pointer;
			opacity      : 0;
			text-align   : center;
			border-right : 1px solid #333;
			&:last-child{
				border : none;
			}
			.content{
				.addSketch(360px);
				.animateAll(0.5s);
				position : relative;
				width    : 500px;
				padding  : 40px;
				&:hover{
					svg, h2{
						.transform(scale(1.3));
					}
				}
				h2{
					.animateAll(0.5s);
					font-family : 'CodeBold';
					font-size   : 2em;
				}
				p{
					max-width   : 300px;
					margin      : 20px auto;
					line-height : 1.5em;
				}
				svg{
					.animateAll(0.5s);
					height : 10em;
				}
			}
			//Proejct specific styles
			&.homebrew{
				.content:hover{
					background-color : fade(@teal, 20%);
				}
			}
			&.combat{
				.content:hover{
					background-color : fade(@red, 20%);
				}
			}
			//Under Construction styles
			&.underConstruction{
				cursor : initial;
				.content{
					&:hover{
						svg, h2{
							.transform(scale(1.0));
						}
					}
					svg, h2{
						opacity : 0.3;
					}
					&:after{
						.animateAll();
						content          : "Under Construction";
						position         : absolute;
						display          : block;
						top              : 120px;
						left             : 0px;
						width            : 100%;
						padding          : 10px 0px;
						//opacity          : 0;
						background-color : fade(@grey, 50%);
						font-size        : 2em;
						font-weight      : 800;
						text-align       : center;
						text-transform   : uppercase;
					}
					&:before{
						content                   : "";
						position                  : absolute;
						display                   : block;
						top                       : 130px;
						right                     : 30px;
						height                    : 50px;
						width                     : 40px;
						//opacity                   : 0;
						background-image          : url('/assets/naturalCrit/home/bulldozer.png');
						background-repeat         : no-repeat;
						background-size           : contain;
						animation-iteration-count : infinite;
					}
				}
			}
		}
	}
}
.addSketch(@length, @color : black){
	path, line, polyline, circle, rect, polygon {
		.sketch(@length, @color, 4s);
		stroke-dasharray  : @length;
		stroke-dashoffset : 0px;
		stroke            : @color;
		stroke-width      : 0.5px;
		fill              : @color;
		//.animateAll(3s);
	}
}
.sketch(@length, @color : black, @duration : 3s, @easing : @defaultEasing){
	.createAnimation(sketch, @duration, @easing);
	.sketchKeyFrames(){
		0% { stroke-dashoffset : @length; fill: transparent;}
		50% { stroke-dashoffset : @length; fill: transparent;}
		80% { stroke-dashoffset : 0px; fill: transparent;}
		100% { stroke-dashoffset : 0px; fill:@color;}
	}
	@-webkit-keyframes sketch {.sketchKeyFrames();}
	@-moz-keyframes sketch {.sketchKeyFrames();}
	@-ms-keyframes sketch {.sketchKeyFrames();}
	@-o-keyframes sketch {.sketchKeyFrames();}
	@keyframes sketch {.sketchKeyFrames();}
}
/*
.sketch(@length, @color : black, @duration : 3s, @easing : @defaultEasing){
	.createAnimation(bounce, @duration, @easing);
	.sketchKeyFrames(){
		0% { stroke-dashoffset : 0px; fill:@color;}
		15% { stroke-dashoffset : 0px; fill : transparent}
		50% { stroke-dashoffset : @length; fill: transparent}
		85% { stroke-dashoffset : 0px; fill:transparent;}
		100% { stroke-dashoffset : 0px; fill:@color;}
	}
	@-webkit-keyframes bounce {.sketchKeyFrames();}
	@-moz-keyframes bounce {.sketchKeyFrames();}
	@-ms-keyframes bounce {.sketchKeyFrames();}
	@-o-keyframes bounce {.sketchKeyFrames();}
	@keyframes bounce {.sketchKeyFrames();}
}
*/