/**
 * CTM Loading Overlay — Stadium Glow
 * Anillo giratorio lime alrededor del logo, glassmorphism, logo pulsa suavemente.
 */

/* ── Overlay backdrop (glassmorphism) ── */
#ctm-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	background: rgba(4, 14, 31, 0.75);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#ctm-loading-overlay.ctm-lo-visible {
	display: flex;
	animation: ctm-lo-fadein 0.25s ease-out both;
}

@keyframes ctm-lo-fadein {
	from { opacity: 0; transform: scale(1.02); }
	to   { opacity: 1; transform: scale(1); }
}

/* ── Contenedor interno ── */
.ctm-lo-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	user-select: none;
	-webkit-user-select: none;
}

/* ── Spinner: logo + anillo giratorio ── */
.ctm-lo-spinner-wrap {
	position: relative;
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Glow ambiental detrás del spinner */
.ctm-lo-spinner-wrap::before {
	content: '';
	position: absolute;
	inset: -18px;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(189, 237, 77, 0.18) 0%,
		rgba(189, 237, 77, 0.06) 45%,
		transparent 70%
	);
	animation: ctm-lo-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes ctm-lo-glow-pulse {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50%       { opacity: 1;   transform: scale(1.08); }
}

/* ── Anillo giratorio exterior ── */
.ctm-lo-ring-outer {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* Arco de gradiente: de lime pleno a transparente */
	background: conic-gradient(
		from 0deg,
		#bded4d       0deg,
		rgba(189,237,77,.7) 60deg,
		rgba(189,237,77,.3) 110deg,
		transparent   160deg,
		transparent   360deg
	);
	/* Máscara: sólo el borde (5px de grosor) */
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 6px),
		#fff         calc(100% - 5px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 6px),
		#fff         calc(100% - 5px)
	);
	animation: ctm-lo-spin 1.3s linear infinite;
}

/* ── Anillo secundario interior (más lento, inverso) ── */
.ctm-lo-ring-inner {
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	background: conic-gradient(
		from 180deg,
		#98d59e       0deg,
		rgba(152,213,158,.4) 80deg,
		transparent   140deg,
		transparent   360deg
	);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#fff         calc(100% - 3px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 4px),
		#fff         calc(100% - 3px)
	);
	animation: ctm-lo-spin 2.1s linear infinite reverse;
}

/* Rotación */
@keyframes ctm-lo-spin {
	to { transform: rotate(360deg); }
}

/* ── Logo centrado, pulsante ── */
.ctm-lo-logo {
	position: relative;
	z-index: 2;
	width: 120px;
	height: 120px;
	object-fit: contain;
	/* Pulso suave: escala + glow */
	animation: ctm-lo-logo-pulse 2.4s ease-in-out infinite;
	filter: drop-shadow(0 0 12px rgba(189, 237, 77, 0.3));
}

@keyframes ctm-lo-logo-pulse {
	0%, 100% {
		transform: scale(1);
		filter: drop-shadow(0 0 12px rgba(189,237,77,.3));
	}
	50% {
		transform: scale(1.04);
		filter: drop-shadow(0 0 28px rgba(189,237,77,.65));
	}
}

/* ── Texto dinámico ── */
.ctm-lo-text {
	font-family: 'Lexend', Arial, sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(216, 227, 251, 0.5);
	min-width: 160px;
	text-align: center;
}