#print-loader {
	z-index: 500;
	background-color: #0e1d21;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

#print-loader-container {
	position: absolute;
	left: 50%;
	top: 50%;
	animation-duration: 0.6s;
}

#print-loader-studio-icon {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;

	background-image: var(--loader-studio-icon, url("assets/loader/studio-logo.webp"));
	background-position: center;
	background-size: 50%;
	background-repeat: no-repeat;
}

#print-loader-studio {
	opacity: 0;
	position: absolute;
	transform: translateX(-50%);
	width: 220px;
	height: 85px;
	left: 50%;
	top: -70px;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	background-image: var(--loader-studio, url("assets/loader/studio.webp"));
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#print-loader-platform {
	opacity: 0;
	position: absolute;
	transform: translateX(-50%);
	width: 250px;
	height: 85px;
	left: 50%;
	top: 40px;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	background-image: var(--loader-platform, url("assets/loader/platform.webp"));
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

@keyframes move-studio-icon-mobile-portrait {
	to {
		top: -16vh;
	}
}

@keyframes move-studio-icon-mobile-landscape {
	to {
		top: -12vw;
	}
}

@keyframes move-studio-icon-desktop {
	to {
		top: calc(9 / 16 * -26vmax);
	}
}

@keyframes fade-out-background {
	to {
		background-color: transparent;
	}
}

@keyframes fade-in-logo {
	to {
		opacity: 1;
	}
	from {
		margin-top: 6vw;
	}
	to {
		margin-top: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

/**
  MOBILE LANDSCAPE
 */
@media screen and (orientation: landscape) {
	html.mobile #print-loader-studio-icon {
		width: 24vh;
		height: 24vh;
	}

	html.mobile #print-loader-studio {
		width: 45vh;
		height: 45vh;
		top: -15vw;
	}

	html.mobile #print-loader-platform {
		width: 19vh;
		height: 19vh;
		top: 8vh;
	}

	html.mobile .move-studio-icon {
		animation: move-studio-icon-mobile-landscape;
	}
}

/**
  MOBILE PORTRAIT
 */
@media screen and (orientation: portrait) {
	html.mobile #print-loader-studio-icon {
		width: 24vw;
		height: 24vw;
	}

	html.mobile #print-loader-studio {
		width: 45vw;
		height: 45vw;
		top: -19vh;
	}

	html.mobile #print-loader-platform {
		width: 19vw;
		height: 19vw;
		top: 4vw;
	}

	html.mobile .move-studio-icon {
		animation: move-studio-icon-mobile-portrait;
	}
}

/**
  DESKTOP
 */

#print-loader-studio-icon {
	--aspect: 9/16;
	width: calc(var(--aspect) * 24vmax);
	height: calc(var(--aspect) * 24vmax);
}

html.desktop #print-loader-studio {
	--aspect: 9/16;
	width: calc(var(--aspect) * 45vmax);
	height: calc(var(--aspect) * 45vmax);
	top: calc(var(--aspect) * -32vmax);
}

html.desktop #print-loader-platform {
	--aspect: 9/16;
	width: calc(var(--aspect) * 19vmax);
	height: calc(var(--aspect) * 19vmax);
	top: calc(var(--aspect) * 4vmax);
}

html.desktop .move-studio-icon {
	animation: move-studio-icon-desktop;
}