.tt3-loading {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	background: #f7e4ca;
	opacity: 1;
	visibility: visible;
	transition: opacity .55s ease, visibility .55s ease;
}

.tt3-loading.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.tt3-loading__stage {
	position: absolute;
	inset: clamp(32px, 7vh, 90px) clamp(28px, 7vw, 140px);
	perspective: 900px;
}

.tt3-loading__logo-wrap {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	left: 50%;
	top: 50%;
	width: 140px;
	height: 140px;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	animation: tt3-loading-logo-spin 2.4s linear 0s infinite;
}

.tt3-loading.is-front .tt3-loading__logo-wrap {
	animation: none;
	transform: translate(-50%, -50%) rotateY(0deg);
}

.tt3-loading__logo {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tt3-loading__logo--back {
	transform: rotateY(180deg);
}

.tt3-loading__fallback-mark {
	color: #c1272d;
	font-size: clamp(3rem, 8vw, 5.5rem);
}

.tt3-loading__line {
	position: absolute;
	background: #c1272d;
	color: #c1272d;
	box-shadow: none;
	animation-duration: 2.35s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.tt3-loading__line--top,
.tt3-loading__line--bottom {
	width: 112%;
	height: 1.5px;
	left: -6%;
	transform: scaleX(.12);
}

.tt3-loading__line--top {
	top: 0;
	transform-origin: center center;
	animation-name: tt3-loading-line-horizontal;
	animation-delay: 0s;
}
.tt3-loading__line--bottom {
	bottom: 0;
	transform-origin: center center;
	animation-name: tt3-loading-line-horizontal;
	animation-delay: 0s;
}

.tt3-loading__line--right,
.tt3-loading__line--left {
	width: 1.5px;
	height: 112%;
	top: -6%;
	transform-origin: center center;
	transform: scaleY(.12);
	animation-name: tt3-loading-line-vertical;
}

.tt3-loading__line--right {
	right: 0;
	background: #f2b01e;
	color: #f2b01e;
	animation-delay: 0s;
}
.tt3-loading__line--left {
	left: 0;
	background: #f2b01e;
	color: #f2b01e;
	animation-delay: 0s;
}

@keyframes tt3-loading-logo-spin {
	from { transform: translate(-50%, -50%) rotateY(0deg); }
	to { transform: translate(-50%, -50%) rotateY(360deg); }
}

@keyframes tt3-loading-line-horizontal {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes tt3-loading-line-vertical {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}