@charset "UTF-8";

.animate, div#logo img {
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: both;
	animation-play-state: running;
}

@-webkit-keyframes none {}

@keyframes none {}

body.animate div#body {
	position: relative;
	animation-name: body-transition;
	animation-duration: .3s;
	animation-timing-function: cubic-bezier(.6, .04, .98, .34);
}

body.animate {
	overflow-x: hidden;
}

@-webkit-keyframes body-transition {
	0% {
		left: 0;
	}
	
	100% {
		left: 100vw;
	}
}

@keyframes body-transition {
	0% {
		left: 0;
	}
	
	100% {
		left: 100vw;
	}
}

div#main.animate {
	position: relative;
	animation-name: main-transition;
	animation-duration: calc(1s * .6);
	animation-timing-function: cubic-bezier(.89, .65, .71, 1.29);
}

div#main.animate-avant {
	position: relative;
	top: calc(.7 * 100vw);
}

div#main div.section-title > div.animate {
	animation-name: s-title;
	animation-delay: .1s;
	animation-duration: calc(1s * .4);
	animation-timing-function: cubic-bezier(.89, .65, .71, 1.29);
}

div#main div.section-title > div.animate-avant {
	opacity: 0;
	margin-top: 200px;
}

@-webkit-keyframes main-transition {
	0% {
		top: calc(.7 * 100vw);
	}
	
	100% {
		top: 0;
	}
}

@keyframes main-transition {
	0% {
		top: calc(.7 * 100vw);
	}
	
	100% {
		top: 0;
	}
}

@-webkit-keyframes s-title {
	0% {
		opacity: 0;
		margin-top: 200px;
	}
	
	100% {
		opacity: 1;
		margin-top: 0;
	}
}

@keyframes s-title {
	0% {
		opacity: 0;
		margin-top: 200px;
	}
	
	100% {
		opacity: 1;
		margin-top: 0;
	}
}

#logo-moon {
	position: relative;
	animation-name: logo;
	animation-duration: .6s;
	animation-timing-function: cubic-bezier(.12, .87, .5, .87);
}

#logo-graphics {
	position: relative;
	animation-name: logo;
	animation-duration: .9s;
	animation-timing-function: cubic-bezier(.12, .87, .5, .87);
}

@-webkit-keyframes logo {
	0% {
		top: calc(( 307px + 160px ) * -1);
		opacity: 0;
	}
	
	30% {
		opacity: 0;
	}
	
	100% {
		top: 0;
		opacity: 1;
	}
}

@keyframes logo {
	0% {
		top: calc(( 307px + 160px ) * -1);
		opacity: 0;
	}
	
	30% {
		opacity: 0;
	}
	
	100% {
		top: 0;
		opacity: 1;
	}
}

div#sora.animate {
	animation-name: sora;
	animation-duration: .6s;
	animation-timing-function: linear;
}

div#sora.animate-avant {
	opacity: 0;
}

div#sora div.text.animate {
	animation-name: sora-text;
	animation-duration: 1.5s;
	animation-timing-function: ease-in;
}

div#sora div.text.animate-avant {
	opacity: 0;
}

@-webkit-keyframes sora {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes sora {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes sora-text {
	0% {
		opacity: 0;
		padding-top: 8rem;
		line-height: 6rem;
	}
	
	33% {
		opacity: .3;
		padding-top: 0;
		line-height: 2.5rem;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes sora-text {
	0% {
		opacity: 0;
		padding-top: 8rem;
		line-height: 6rem;
	}
	
	33% {
		opacity: .3;
		padding-top: 0;
		line-height: 2.5rem;
	}
	
	100% {
		opacity: 1;
	}
}

div#moon > div.phase.animate {
	animation-name: moon-phase;
	animation-timing-function: ease-out;
}

div#moon > div.phase[data-pos="0"].animate {
	animation-name: moon-current;
	animation-timing-function: ease-in;
}

div#moon > #moon-today.animate {
	animation-name: moon-today;
	animation-duration: .3s;
	animation-timing-function: ease-in;
}

div#moon > div.phase.animate-avant, div#moon > #moon-today.animate-avant {
	opacity: 0;
}

@-webkit-keyframes moon-phase {
	0% {
		opacity: 0;
	}
	
	90% {
		opacity: 1;
	}
	
	100% {
		opacity: .3;
	}
}

@keyframes moon-phase {
	0% {
		opacity: 0;
	}
	
	90% {
		opacity: 1;
	}
	
	100% {
		opacity: .3;
	}
}

@-webkit-keyframes moon-current {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes moon-current {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes moon-today {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes moon-today {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

div#works div.works-item.animate {
	overflow: visible;
}

div#works div.works-item .animate {
	position: relative;
}

div#works div.works-item.animate .animate {
	animation-name: works-item;
	animation-duration: .3s;
	animation-timing-function: cubic-bezier(.4, 1.04, .82, 1.01);
}

div#works div.works-item.animate-avant .animate {
	left: 100vw;
	opacity: 0;
}

@-webkit-keyframes works-item {
	0% {
		left: 100vw;
		opacity: 0;
	}
	
	100% {
		left: 0;
		opacity: 1;
	}
}

@keyframes works-item {
	0% {
		left: 100vw;
		opacity: 0;
	}
	
	100% {
		left: 0;
		opacity: 1;
	}
}