body { margin: 0; color: #fff; background: #000; overflow: hidden; }

.download { padding:20% 0 0; text-align:center; font: 24px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }
.download a { color: #fff; }
.download a:hover, .download a:focus { color: #ccc; }

audio { visibility: hidden; }

#header h1, #logo div.icon { color: transparent; }
#logo, #header, #intro { position: absolute; top: 40%; left: 50%; }

#logo { width: 600px; height: 538px; margin: -290px 0 0 -290px; overflow: hidden; }
#logo div { position: absolute; width: 600px; height: 538px; opacity: 0; filter: alpha(opacity=0); }
#logo div.icon { z-index: 3; background: url(../images/logo_icon.png) no-repeat 233px 184px; }
#logo div.spots { z-index: 4; background: url(../images/logo_spots.png) no-repeat 195px 133px; }
#logo div.flare { z-index: 1; background: url(../images/logo_flare.jpg) no-repeat 0 0; }
#logo div.flareicon { z-index: 5; background: url(../images/logo_flare_icon.png) no-repeat 233px 184px; }

#header { width: 600px; height: 60px; margin: -43px 0 0 -300px; opacity: 0; filter: alpha(opacity=0);
	-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.4)));
}
#header h1 { width: 100%; height: 100%; margin: 0; background: url(../images/header.jpg) no-repeat 0 0;
	-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.4)));
}

#intro div { width: 256px; height: 256px; margin: -158px 0 0 -128px; }
#intro video,
#intro img { width: 529px; height: 479px; margin: -20px 0 0 -150px; opacity: 0; filter: alpha(opacity=0); }

#demo {
	-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, 0.4)));
}

/*------------------------
  animations
------------------------*/

/* logo keyframes */
@-webkit-keyframes logo-icon {
	from {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-out;
	}
	22% {
		opacity: 1;
		-webkit-transform: scale(0.92);
		-webkit-animation-timing-function: linear;
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
	82% {
		opacity: 1;
		-webkit-transform: scale(1.1);
		-webkit-animation-timing-function: ease-out;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(3);
		-webkit-animation-timing-function: ease-in;
	}
}
@-webkit-keyframes logo-spots {
	from {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-out;
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(0.4);
		-webkit-animation-timing-function: ease-out;
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: ease-in;
	}
	82% {
		opacity: 1;
		-webkit-transform: scale(0.92) rotate(230deg);
		-webkit-animation-timing-function: ease-out;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-in;
	}
}
@-webkit-keyframes logo-flare {
	from {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-out;
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(0.2) translateX(-20px) translateY(-100px);
		-webkit-animation-timing-function: ease-out;
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
	82% {
		opacity: 1;
		-webkit-transform: scale(0.92);
		-webkit-animation-timing-function: ease-out;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-in;
	}
}
@-webkit-keyframes logo-flareicon {
	from {
		opacity: 0;
		-webkit-transform: scale(3);
		-webkit-animation-timing-function: ease-out;
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
		-webkit-animation-timing-function: linear;
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
	82% {
		opacity: 1;
		-webkit-transform: scale(0.92);
		-webkit-animation-timing-function: ease-out;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: ease-in;
	}
}

/* text keyframes */
@-webkit-keyframes header {
	from {
		opacity: 0;
		-webkit-transform: scale(0.1);
		-webkit-animation-timing-function: linear;
	}
	20% {
		opacity: 1;
		-webkit-transform: scale(0.9);
		-webkit-animation-timing-function: linear;
	}
	77% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
	to {
		opacity: 0;
		-webkit-transform: scale(2.0);
		-webkit-animation-timing-function: linear;
	}
}

/* intro keyframes */
@-webkit-keyframes intro {
	from {
		-webkit-transform: scale(0.2);
		-webkit-animation-timing-function: linear;
	}
	20% {
		-webkit-transform: scale(0.6);
		-webkit-animation-timing-function: linear;
	}
	88% {
		-webkit-transform: scale(1.2);
		-webkit-animation-timing-function: linear;
	}
	to {
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	}
}
@-webkit-keyframes intro-video {
	from {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* logo timing */
body.go #logo div {
	-webkit-animation-delay: 0.5s;
	-webkit-animation-duration: 1.7s;
}
body.go #logo div.icon {
	-webkit-animation-name: logo-icon;
}
body.go #logo div.spots {
	-webkit-animation-name: logo-spots;
}
body.go #logo div.flare {
	-webkit-animation-name: logo-flare;
}
body.go #logo div.flareicon {
	-webkit-animation-name: logo-flareicon;
}

/* text timing */
body.go #header {
	-webkit-animation-delay: 2.2s;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-name: header;
}

/* intro timing */
body.go #intro div,
body.go #intro video,
body.go #intro img {
	-webkit-animation-delay: 3.7s;
	-webkit-animation-duration: 12.0s;
}
body.go #intro div {
	-webkit-animation-name: intro;
}
body.go #intro video,
body.go #intro img {
	-webkit-animation-name: intro-video;
}