/**
 * @package   CleverStyle Music
 * @category  app
 * @author    Nazar Mokrynskyi <nazar@mokrynskyi.com>
 * @copyright Copyright (c) 2014-2015, Nazar Mokrynskyi
 * @license   MIT License, see license.txt
 */
@import 'mixins';

html {
	font-family : 'Open Sans', sans-serif;
	font-size   : 12pt;
	position    : fixed; /* Fix for scrolling in Firefox for Android */

	/deep/ * {
		box-sizing      : border-box;
		-moz-box-sizing : border-box;
	}
}

body {
	background : url(../img/bg.jpg) rgba(0, 0, 0, 0.5) no-repeat center center / cover fixed;
	color      : #fff;
	height     : 100vh;
	overflow   : hidden;
	width      : 100vw;

	&:before {
		background : rgba(0, 0, 0, 0.5);
		content    : '';
		display    : block;
		height     : 100vh;
		width      : 100vw;
	}

	> * {
		// Quadratic ease-in
		@include animation(hide cubic-bezier(.55, .09, .68, .53) .3s both);
		height      : 100vh;
		left        : 0;
		opacity     : 0;
		position    : absolute;
		top         : 0;
		width       : 100vw;
		will-change : transform, opacity;
		z-index     : 1;

		&:not([show]) > cs-loading {
			display : none;
		}

		&[show] {
			// Quintic ease-out
			@include animation(show cubic-bezier(.23, 1, .32, 1) .8s both);
			z-index : 2;
		}
	}

	&.low-performance > * {
		@include animation(none !important);

		&[show] {
			opacity : 1;
		}
	}
}

@include keyframes(show) {
	0% {
		opacity : 0;
		@include transform(translate3d(40vw, 0, 0) scale(.8, .8));
	}
	100% {
		opacity : 1;
		@include transform(translateX(0) scale(1, 1));
	}
}

@include keyframes(hide) {
	0% {
		opacity : 1;
		@include transform(translateX(0) scale(1, 1));
	}
	100% {
		opacity : 0;
		@include transform(translate3d(-40vw, 0, 0) scale(.8, .8));
	}
}
