#splash {
	position: fixed;
	z-index: 900;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

#splash .black {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#splash .gridline {
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.5px;
	background: #555;
	transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
#splash .gridline.top { transform: translate3d(0, calc(var(--app-height) / -2), 0); }
#splash .gridline.bottom { transform: translate3d(0, calc(var(--app-height) / 2), 0); }

#splash .glow {
	background: #00c7ff44;
	position: absolute;
	opacity: 1;
	transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s;
}
#splash .glow.vertical {
	left: calc(50% - 6.5rem);
	width: 13rem;
	top: 0;
	height: 100%;
	transform: scale3d(0, 1, 1);
	-webkit-mask-image: linear-gradient(to bottom, #0000, #000f 10%, #000f 90%, #0000);
}

#splash .darken {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(#000c, #0000);
	opacity: 0;
	transition: opacity 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

#splash .part {
	position: absolute;
	width: 1.75rem;
	height: 0.65rem;
	margin: -0.325rem 0 0 -0.875rem;
	background: #00c7ff66;
	outline: solid 0.05rem #00c7ff;
	opacity: 0;
	transform: scale3d(0, 0, 1);
	transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	box-shadow: 0 0 2rem 0 #00c7ff;
}
#splash .part.top1 { transform: scale3d(0.1, 0.1, 1) translate3d(0, -3rem, 0); }
#splash .part.top2 { transform: scale3d(0.1, 0.1, 1) translate3d(0, -6rem, 0); }
#splash .part.bottom1 { transform: scale3d(0.1, 0.1, 1) translate3d(0, 3rem, 0); }
#splash .part.bottom2 { transform: scale3d(0.1, 0.1, 1) translate3d(0, 6rem, 0); }

#splash.beta .part.bottom2.right {
	transform-origin: top left;
}
#splash.beta.dangle .part.bottom2.right {
	animation: beta-dangle 2s forwards;
	transition: none;
}

@keyframes beta-dangle {
	12% {
		transform: rotate3d(0, 0, 1, 0turn);
	}
	24% {
		transform: rotate3d(0, 0, 1, 0.34turn);
	}
	36% {
		transform: rotate3d(0, 0, 1, 0.12turn);
	}
	48% {
		transform: rotate3d(0, 0, 1, 0.25turn);
	}
	60% {
		transform: rotate3d(0, 0, 1, 0.16turn);
	}
	72% {
		transform: rotate3d(0, 0, 1, 0.22turn);
	}
	84% {
		transform: rotate3d(0, 0, 1, 0.19turn);
	}
}

#splash .text {
	position: absolute;
	top: calc(50% + 7.8rem);
	left: calc(50% + 0.2em);
	color: #fff;
	font-size: 1rem;
	opacity: 0;
	transform: translate3d(-50%, 100%, 0);
	transition: transform 0.75s, opacity 0.3s;
	letter-spacing: 0.3em;
	text-align: center;
	width: 90%;
}
#splash-progress {
	color: #aaa;
	font-size: 80%;
	margin-top: 0.7em;
	letter-spacing: 0;
}

#splash .midi {
	position: absolute;
	top: calc(calc(var(--app-height) / 2) - 0.1rem);
	left: 50vw;
	width: 15rem;
	height: 14rem;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0) scale3d(0.7, 0.7, 1);
	transition: transform 1s, opacity 1s;
	background-image: url('../assets/splash-midi.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
}

#splash .two {
	position: absolute;
	bottom: calc(calc(var(--app-height) / 2) + 4.2rem);
	left: calc(50vw + 6.85rem);
	width: 0.8rem;
	height: 0.9rem;
	opacity: 0;
	transition: opacity 0.5s 0.3s;
	background-image: url('../assets/splash-2.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
}

#black {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 800;
}

#splash.show .gridline.top, #splash.show .gridline.bottom { transform: translate3d(0, 0, 0); }
#splash.show .glow.horizontal, #splash.show .glow.vertical { transform: scale3d(1, 1, 1); }
#splash.show .part, #splash.show .part.top1, #splash.show .part.bottom1, #splash.show .part.top2, #splash.show .part.bottom2 { transform: scale3d(1, 1, 1); opacity: 1; }
#splash.show .darken { opacity: 1; }
#splash.show .black { opacity: 1; }
#splash.show .text { opacity: 1; transform: translate3d(-50%, 0, 0); }
#splash.show .midi { opacity: 0.25; transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1); }
#splash.show .two { opacity: 0.16; }

#splash.hide .part.top1.left,
#splash.hide .part.bottom1.left
{
	transform: translate3d(-3rem, 0, 0);
}
#splash.hide .part.top1.right,
#splash.hide .part.bottom1.right
{
	transform: translate3d(3rem, 0, 0);
}
#splash.hide .part.top2.left,
#splash.hide .part.bottom2.left
{
	transform: translate3d(-6rem, 0, 0);
}
#splash.hide .part.top2.right,
#splash.hide:not(.beta) .part.bottom2.right
{
	transform: translate3d(30vw, 0, 0);
}

#splash.hide .black { transition: opacity 0.7s; }
#splash.hide .glow { opacity: 0; }
#splash.hide .text { transform: translate3d(-50%, 0, 0) scale3d(1, 0.1, 1); transition: transform 0.5s, opacity 0.5s; }
#splash.hide .midi { opacity: 0; transition: opacity 0.3s; }
#splash.hide .two { opacity: 0; }