#cef-loadscreen {
	--ls-image: url("../../img/load1.png");
	
	--ls-progress-left: 14%;
	--ls-progress-top: 76.7%;
	--ls-progress-width: 72%;
	--ls-progress-height: 2.15%;
	
	--ls-tip-left: 22%;
	--ls-tip-top: 80%;
	--ls-tip-width: 56%;
	--ls-tip-height: 10%;
	
	--cef-primary: #0d6efd;
	--cef-bg-black: #000000;

	--ls-fade-in-duration: 0.8s;
	--ls-fade-out-duration: 1.2s;
	
	z-index: 10;
	background: var(--cef-bg-black);
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--ls-fade-in-duration) ease;
}

#cef-loadscreen.is-visible {
	opacity: 1;
}

/* При закрытии не уводим весь экран в прозрачность — иначе CEF показывает белый фон */
#cef-loadscreen.is-visible.is-closing {
	opacity: 1;
}

#cef-loadscreen.is-visible.is-closing .ls-stage {
	opacity: 0;
	transition: opacity var(--ls-fade-out-duration) ease;
}

#cef-loadscreen .ls-blur-fill {
	position: absolute;
	inset: -5vh -5vw;
	z-index: 0;
	background-image: var(--ls-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(28px);
	transform: scale(1.08);
	opacity: 0.45;
}

#cef-loadscreen .ls-black-fade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
	radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0) 34%,
		rgba(0, 0, 0, 0.35) 66%,
		rgba(0, 0, 0, 0.98) 100%
	),
	linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.85),
		rgba(0, 0, 0, 0) 18%,
		rgba(0, 0, 0, 0) 82%,
		rgba(0, 0, 0, 0.85)
	),
	linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.8),
		rgba(0, 0, 0, 0) 20%,
		rgba(0, 0, 0, 0) 80%,
		rgba(0, 0, 0, 0.9)
	);
}

#cef-loadscreen .ls-stage {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: min(100vw, calc(100vh * 16 / 9));
	height: min(100vh, calc(100vw * 9 / 16));
	transform: translate(-50%, -50%);
	overflow: hidden;
}

#cef-loadscreen .ls-progress-slot {
	position: absolute;
	left: var(--ls-progress-left);
	top: var(--ls-progress-top);
	z-index: 1;
	width: var(--ls-progress-width);
	height: var(--ls-progress-height);
	overflow: hidden;
	border-radius: 4px;
	background: rgba(5, 5, 5, 0.8);
}

#cef-loadscreen .ls-progress-bar {
	width: 0%;
	height: 100%;
	border-radius: inherit;
	background: var(--cef-primary);
	box-shadow: 0 0 16px rgba(13, 110, 253, 0.45);
	transition: width 0.25s linear;
}

#cef-loadscreen .ls-frame-image {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: var(--ls-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#cef-loadscreen .ls-tip-block {
	position: absolute;
	left: var(--ls-tip-left);
	top: var(--ls-tip-top);
	z-index: 3;
	width: var(--ls-tip-width);
	height: var(--ls-tip-height);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: rgba(120, 120, 120, 0.74);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#cef-loadscreen .ls-title {
	margin: 0 0 0.45em;
	font-size: clamp(13px, 1.18vw, 23px);
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: 0.015em;
	color: inherit;
}

#cef-loadscreen .ls-text {
	max-width: 88%;
	margin: 0;
	font-size: clamp(11px, 0.82vw, 16px);
	line-height: 1.35;
	font-weight: 400;
	color: inherit;
}

@media (max-aspect-ratio: 16 / 9) {
	#cef-loadscreen .ls-blur-fill {
		opacity: 0.32;
	}
}

@media (min-aspect-ratio: 16 / 9) {
	#cef-loadscreen .ls-blur-fill {
		opacity: 0.38;
	}
}