@import 'naturalcrit/styles/core.less';
.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{
				height       : .9em;
				margin-right : .2em;
				cursor       : pointer;
				fill         : black;
			}
			.name{
				font-family : 'CodeLight';
				.crit{
					font-family : 'CodeBold';
				}
			}
		}
		p{
			margin-top : 10px;
			font-size  : 1.3em;
			font-style : italic;
			color      : @grey;
		}
	}
	.tools{
		width      : 100%;
		text-align : center;
		.tool{
			.sequentialDelay(0.5s, 1s);
			.fadeInDown(1s);
			.keep();
			display         : inline-block;
			cursor          : pointer;
			opacity         : 0;
			color           : black;
			text-align      : center;
			text-decoration : none;
			&+.tool{
				border-left : 1px solid #666;
			}
			.content{
				.addSketch(360px);
				.animateAll(0.5s);
				position : relative;
				width    : 320px;
				padding  : 35px;
				&: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;
				}
			}
			.content:hover{
				background-color : fade(@teal, 20%);
			}
			//Beta styles
			&.beta{
				cursor : initial;
				.content{
					&:hover{
						svg, h2{
							.transform(scale(1.0));
						}
					}
					svg, h2{
						opacity : 0.3;
					}
					&:after{
						.animateAll();
						content          : "beta!";
						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;
					}
				}
			}
		}
	}
}
.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();}
}