/* stylelint-disable color-no-hex */
/* stylelint-disable selector-max-id */

/* Core Animations */

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flipIn {
	0% {
		transform: translateZ(0) scale(0.1);
		opacity: 0;
	}
	100% {
		transform: translateZ(0);
		opacity: 1;
	}
}
@keyframes scaleIn {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}
@keyframes loadingEllipsis {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Core Reset */

* {
	box-sizing: border-box;
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	height: 100%;
}
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Global Messages (e.g. engine update or crash) */

#engine-global-message {
	text-align: center;
	margin: 1.429em;
	color: #333;
}

/* Engine Window Management and Layering */

.engine-window-list,
.engine-window {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.engine-window {
	z-index: 0;
}
.engine-window.in-front {
	z-index: 2;
}
.engine-window.in-front ~ * {
	z-index: 0;
}

/* Engine Boot */

#engine-boot {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	animation: fadeIn 0.2s ease-out;
}

#engine-boot .loading {
	color: #333;
	opacity: 1;
	position: absolute;
	bottom: 4.287rem;
	right: 5.716rem;
	max-width: 60%;
	text-align: right;
}
#engine-boot .loading-ellipsis span:nth-child(1) {
	animation: loadingEllipsis 1.2s infinite ease-in-out;
}
#engine-boot .loading-ellipsis span:nth-child(2) {
	animation: loadingEllipsis 1.2s infinite ease-in-out 0.4s;
}
#engine-boot .loading-ellipsis span:nth-child(3) {
	animation: loadingEllipsis 1.2s infinite ease-in-out 0.8s;
}