body {
	margin: 0;
	padding: 0;
}

#splash-screen {
	position: absolute;
	z-index: 1000;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #f6f8fa;
}

/*
 * A arte da marca vem em arquivo quadrado de 500x500 com a palavra ocupando 45,4% da altura e o
 * resto transparente. Dimensionar pela altura do arquivo deixaria a palavra pequena no meio de
 * uma caixa vazia, então a imagem é ampliada e a sobra transparente é recortada pelo wrapper.
 *
 * Este arquivo é CSS puro e carrega antes do bundle: ele não pode usar os tokens do sistema, e
 * por isso repete a medida. Mudar a arte exige acertar aqui e em `src/styles/_brand.scss`.
 */
#splash-screen .splash-logo {
	height: 64px;
	margin-left: calc(100vw - 100%);
	margin-bottom: 30px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

#splash-screen img {
	height: 141px; /* 64 / 0.454 */
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

#splash-screen.hidden {
	opacity: 0;
	visibility: hidden;
}

.spinner {
	animation: rotate 2s linear infinite;
	margin-left: calc(100vw - 100%);
	width: 50px;
	height: 50px;
}

.spinner .path {
	stroke: #354764;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}