- 6.times do |i|
	%div{:class => "spider_#{i}"}
		.eye.left
		.eye.right
		- 4.times do
			%span.leg.left
		- 4.times do
			%span.leg.right
%h1
	Happy Halloween!
%img{ :src => "http://www.scandiafun.com/images/spiderweb-corner-right.png", :class => "web-right"}
%img{ :src => "http://www.scandiafun.com/images/spiderweb-corner-right.png", :class => "web-left"}

@import "compass";

html {
	height: 100%;
	width: 100%; 
	overflow: hidden;
	scroll: none;
}

body {
	background-color: #2F5363;
	@include filter-gradient(#2F5363, #1B2628, horizontal);
	@include background-image(radial-gradient(center, ellipse cover, #2F5363 0%,#1B2628 80%));
	overflow: hidden;
}

[class*="spider"] {
	position: absolute;
	height: 40px;
	width: 50px;
	@include border-radius(50%);
	margin: 40px 0 0 0;
	background: #110D04;
	
	*, &:before, &:after, :after, :before {
		position: absolute;
		content: "";
	}
	
	&:before {
		width: 1px;
		background: #AAAAAA;
		left: 50%;
		top: -320px;
		height: 320px;
	}
	
	.eye {
		top: 16px;
		height: 14px;
		width: 12px;
		background: #FFFFFF;
		@include border-radius(50%);
		
		&:after {
			top: 6px;
			height: 5px;
			width: 5px;
			@include border-radius(50%);
			background: black;
		}
		
		&.left {
			left: 14px;
			
			&:after {
				right: 3px;
			}
		}
		
		&.right {
			right: 14px;
			
			&:after {
				left: 3px;
			}
		}
	}
	
	.leg {
		top: 6px;
		height: 12px;
		width: 14px;
		border-top: 2px solid #110D04;
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;
		border-bottom: 1px solid transparent;
		z-index: -1;
		
		&.left {
			left: -8px;
			@include transform-origin(top, right);
			@include transform(rotate(36deg) skewX(-20deg));
			border-left: 2px solid #110D04;
			@include border-radius(60% 0 0 0 );
			@include animation(legs-wriggle-left 1s 0s infinite);
		}
		
		&.right {
			right: -8px;
			@include transform-origin(top, left);
			@include transform(rotate(-36deg) skewX(20deg));
			border-right: 2px solid #110D04;
			@include border-radius(0 60% 0 0 );
			@include animation(legs-wriggle-right 1s 0.2s infinite);
		}
		
		&:nth-of-type(2)  {
			top: 14px;
			left: -11px;
			@include animation(legs-wriggle-left 1s 0.8s infinite);
		}
		
		&:nth-of-type(3)  {
			top: 22px;
			left: -12px;
			@include animation(legs-wriggle-left 1s 0.2s infinite);
		}
		
		&:nth-of-type(4)  {
			top: 31px;
			left: -10px;
			@include animation(legs-wriggle-left 1s 0.4s infinite);
		}
		
		&:nth-of-type(6)  {
			top: 14px;
			right: -11px;
			@include animation(legs-wriggle-right 1s 0.4s infinite);
		}
		
		&:nth-of-type(7)  {
			top: 22px;
			right: -12px;
			@include animation(legs-wriggle-right 1s 0.7s infinite);
		}
		
		&:nth-of-type(8)  {
			top: 31px;
			right: -10px;
			@include animation(legs-wriggle-right 1s 0.3s infinite);
		}
	}
}

.spider_0  {
	left: 5%;
	@include animation(spider-move-0 5s infinite);
}

.spider_1  {
	left: 20%;
	@include animation(spider-move-1 5s infinite);
}

.spider_2  {
	left: 35%;
	@include animation(spider-move-2 5s infinite);
}

.spider_3  {
	right: 35%;
	margin-top: 160px;
	@include animation(spider-move-3 5s infinite);
}

.spider_4  {
	right: 20%;
	margin-top: 50px;
	@include animation(spider-move-4 5s infinite);
}

.spider_5  {
	right: 5%;
	margin-top: 210px;
	@include animation(spider-move-5 5s infinite);
}

h1 {
	position: absolute;
	left: 6%;
	bottom: 12%;
	font-family: 'Eater', cursive;
	font-size: 8.5vw;
	color: #111111;
	@include animation(flicker 4s 0s infinite);
}

.web-right {
	position: absolute;
	height: 200px;
	width: auto;
	right: -10px;
	top: -10px;
	z-index: -1;
	opacity: 0.2;
}

.web-left {
	position: absolute;
	left: -10px;
	top: -10px;
	@include transform(rotate(-90deg));
	z-index: -1;
	opacity: 0.2;
}

@include keyframes(flicker) {
	0%, 6%, 12% {
		text-shadow: none;
		color: #111111;
	}
	3%, 9% {
		text-shadow: 0 0 8px rgba(#fa6701,0.6);
		color: #fa6701;
	}
	60% {
		text-shadow: 0 0 8px rgba(#fa6701,0.6),
		 0 0 16px rgba(#fa6701,0.4), 
		 0 0 20px rgba(255,0,84,0.2), 
		 0 0 22px rgba(255,0,84,0.1);
		color: #fa6701;
	}
	100% {
		text-shadow: 0 0 8px rgba(#fa6701,0.6),
		 0 0 16px rgba(#fa6701,0.4), 
		 0 0 20px rgba(255,0,84,0.2), 
		 0 0 22px rgba(255,0,84,0.1);
		color: #fa6701;
	}
}

@include keyframes(legs-wriggle-left) {
	0%, 100% {
		@include transform(rotate(36deg) skewX(-20deg));
	}
	25%, 75% {
		@include transform(rotate(15deg) skewX(-20deg));
	}
	50% {
		@include transform(rotate(45deg) skewX(-20deg));
	}
}

@include keyframes(legs-wriggle-right) {
	0%, 100% {
		@include transform(rotate(-36deg) skewX(20deg));
	}
	25%, 75% {
		@include transform(rotate(-15deg) skewX(20deg));
	}
	50% {
		@include transform(rotate(-45deg) skewX(20deg));
	}
}

$n: 6;
@for $i from 0 to $n {
	$height: random(190) + 40 + "px";
	$movement: random(100) + 20 + "px";
	$random-percentage: random(40) + 30 + "%";
	
	@include keyframes(spider-move-#{$i}) {
		0%, 100% {
			margin-top: #{$height};
		}
		#{$random-percentage} {
			margin-top: calc(#{$height} + #{$movement});
		}
	}
}