/**
 * SMG-Auto Animated Preloader
 * Re-skins Cosmobit Pro's existing `.prealoader` markup.
 */

:root {
	--smg-preloader-red: #ed1c24;
	--smg-preloader-blue: #078dc5;
	--smg-preloader-ink: #05080d;
}

html.smg-preloader-active,
html.smg-preloader-active body {
	overflow: hidden;
}

.prealoader {
	display: grid !important;
	place-items: center;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 22% 52%, rgba(237, 28, 36, 0.18), transparent 32%),
		radial-gradient(circle at 78% 48%, rgba(7, 141, 197, 0.2), transparent 32%),
		linear-gradient(135deg, #04060a 0%, #0b111a 52%, #05080d 100%) !important;
	opacity: 1;
	visibility: visible;
	transition: opacity 360ms ease, visibility 360ms ease;
	overscroll-behavior: none;
}

.prealoader::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
	animation: smg-grid-drift 8s linear infinite;
}

.prealoader::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(88vw, 620px);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(237, 28, 36, 0.7) 28%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(7, 141, 197, 0.75) 72%,
		transparent 100%
	);
	box-shadow:
		-90px 0 18px rgba(237, 28, 36, 0.2),
		90px 0 18px rgba(7, 141, 197, 0.22);
	transform: translate(-50%, -50%) scaleX(0.2);
	opacity: 0;
	animation: smg-horizon-pulse 1.8s ease-in-out infinite;
}

.prealoader .spinner {
	--smg-logo-render-width: min(calc(68.88vw - 16.8px), 310.8px);
	--smg-logo-render-height: min(calc(25.67vw - 6.26px), 115.83px);
	--smg-wheel-size: max(17px, min(calc(5.13vw - 1.25px), 23px));
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(82vw, 390px) !important;
	height: 220px;
	text-align: center;
	transform: translate(-50%, -50%);
	transition: opacity 340ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.prealoader .spinner::before {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 18px;
	height: 128px;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 22px;
	background-color: rgba(255, 255, 255, 0.97);
	background-image: var(--smg-preloader-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(84%, 322px) auto;
	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.42),
		-16px 0 42px rgba(237, 28, 36, 0.13),
		16px 0 42px rgba(7, 141, 197, 0.16),
		inset 0 0 0 1px rgba(5, 8, 13, 0.05);
	clip-path: inset(0 100% 0 0 round 22px);
	animation:
		smg-logo-reveal 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards,
		smg-logo-breathe 2.6s ease-in-out 1.25s infinite;
}

.prealoader .spinner::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 22px;
	width: 18%;
	height: 120px;
	border-left: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: 18px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(237, 28, 36, 0.18) 35%,
		rgba(7, 141, 197, 0.34) 100%
	);
	filter: blur(0.2px);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	animation: smg-logo-scan 1.55s cubic-bezier(0.65, 0, 0.35, 1) 180ms infinite;
}

.prealoader .spinner > div {
	display: block;
	border-radius: 0;
	background: none;
	animation: none;
}

.prealoader .spinner .bounce1 {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 163px;
	width: auto;
	height: 3px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
}

.prealoader .spinner .bounce1::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 42%;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		transparent,
		var(--smg-preloader-red) 35%,
		#ffffff 52%,
		var(--smg-preloader-blue) 72%,
		transparent
	);
	box-shadow:
		-10px 0 16px rgba(237, 28, 36, 0.55),
		10px 0 16px rgba(7, 141, 197, 0.55);
	animation: smg-progress-run 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.prealoader .spinner .bounce2 {
	position: absolute;
	left: 0;
	top: 180px;
	width: 100%;
	height: auto;
	color: rgba(255, 255, 255, 0.82);
	font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	white-space: nowrap;
	speak: none;
}

.prealoader .spinner .bounce2::before {
	content: "ECU SOFTWARE";
	color: rgba(255, 255, 255, 0.96);
}

.prealoader .spinner .bounce2::after {
	content: "  •  DPF  •  ADBLUE  •  REMAP";
	color: rgba(255, 255, 255, 0.58);
}

.prealoader .spinner .bounce3 {
	position: absolute;
	left: calc(50% + min(calc(17.75vw - 4.33px), 80.13px));
	top: calc(82px + min(calc(5.99vw - 1.46px), 27.03px));
	width: var(--smg-wheel-size);
	height: var(--smg-wheel-size);
	overflow: hidden;
	border: 0;
	border-radius: 50%;
	background: #f8f8f8;
	box-shadow: none;
	filter: none;
	mix-blend-mode: normal;
	transform: translate(-50%, -50%);
	pointer-events: none;
	backface-visibility: hidden;
	will-change: transform;
	animation: smg-wheel-turn 900ms linear infinite;
}

.prealoader .spinner .bounce3::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--smg-logo-render-width);
	height: var(--smg-logo-render-height);
	background-image: var(--smg-preloader-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	transform: translate(-75.78%, -73.33%);
	transform-origin: 75.78% 73.33%;
}

.prealoader.smg-preloader--complete {
	opacity: 0;
	visibility: hidden;
}

.prealoader.smg-preloader--complete .spinner {
	opacity: 0;
	transform: translate(-50%, -47%) scale(1.025);
}

@keyframes smg-logo-reveal {
	0% {
		clip-path: inset(0 100% 0 0 round 22px);
		opacity: 0.25;
		transform: scale(0.96);
	}
	55% {
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0 0 0 round 22px);
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes smg-logo-scan {
	0% {
		left: 0;
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	70% {
		opacity: 0.92;
	}
	100% {
		left: 82%;
		opacity: 0;
	}
}

@keyframes smg-logo-breathe {
	0%,
	100% {
		box-shadow:
			0 24px 70px rgba(0, 0, 0, 0.42),
			-16px 0 42px rgba(237, 28, 36, 0.13),
			16px 0 42px rgba(7, 141, 197, 0.16),
			inset 0 0 0 1px rgba(5, 8, 13, 0.05);
	}
	50% {
		box-shadow:
			0 28px 80px rgba(0, 0, 0, 0.5),
			-22px 0 54px rgba(237, 28, 36, 0.2),
			22px 0 54px rgba(7, 141, 197, 0.24),
			inset 0 0 0 1px rgba(5, 8, 13, 0.04);
	}
}

@keyframes smg-progress-run {
	0% {
		transform: translateX(-115%);
	}
	100% {
		transform: translateX(340%);
	}
}

@keyframes smg-wheel-turn {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

@keyframes smg-horizon-pulse {
	0%,
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scaleX(0.2);
	}
	45% {
		opacity: 0.45;
		transform: translate(-50%, -50%) scaleX(1);
	}
	70% {
		opacity: 0.12;
		transform: translate(-50%, -50%) scaleX(0.72);
	}
}

@keyframes smg-grid-drift {
	to {
		background-position: 32px 32px;
	}
}

@media (max-width: 420px) {
	.prealoader .spinner {
		--smg-logo-render-width: min(calc(75.68vw - 6.88px), 285.52px);
		--smg-logo-render-height: min(calc(28.2vw - 2.56px), 106.41px);
		--smg-wheel-size: max(17px, min(calc(5.64vw - 0.51px), 21.3px));
		width: min(88vw, 340px) !important;
	}

	.prealoader .spinner::before {
		left: 4px;
		right: 4px;
		background-size: 86% auto;
	}

	.prealoader .spinner::after {
		left: 4px;
	}

	.prealoader .spinner .bounce2 {
		font-size: 9px;
		letter-spacing: 0.17em;
	}

	.prealoader .spinner .bounce3 {
		left: calc(50% + min(calc(19.51vw - 1.77px), 73.6px));
		top: calc(82px + min(calc(6.58vw - 0.6px), 24.83px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.prealoader::before,
	.prealoader::after,
	.prealoader .spinner::before,
	.prealoader .spinner::after,
	.prealoader .spinner .bounce1::after,
	.prealoader .spinner .bounce3 {
		animation: none !important;
	}

	.prealoader .spinner::before {
		clip-path: inset(0 0 0 0 round 22px);
		opacity: 1;
		transform: none;
	}
}