/**
 * [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1592] Purpose: Neural Core branded loader visual — SSoT CSS for every consumer
 * of the injectable Loader contract (webview-ui Loader.ts / site portable client).
 *
 * Goal: one motion language across Power Claude, neural-llm.com, NDP, and any
 * future product. Override palette via --ncore-* variables; do not fork keyframes.
 *
 * Consumers: load this stylesheet once per surface; register NEURAL_CORE_LOADER_HTML
 * (or a product alias) via renderLoaderTemplate / <template data-*-loader-template>.
 *
 * [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1589]
 */

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1592] ═══════════════════════════════════════════════════════════════════════════
 * NEURAL CORE LOADER (.ncore-loader)
 *
 * Anatomy → styling map:
 *   __ring--outer / --inner  two COUNTER-rotating conic-gradient arc rings
 *   __core                   pulsing nucleus with layered box-shadow glow
 *   __orbit--a/b/c > __synapse  three synapse dots at different radii/speeds
 *
 * Default palette: violet #7c3aed + cyan #22d3ee (neural brand pairing).
 * ═══════════════════════════════════════════════════════════════════════ */

.ncore-loader {
	/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1592] Local design tokens — geometry + palette for every child rule. */
	--ncore-violet: #7c3aed;
	--ncore-cyan: #22d3ee;
	--ncore-glow: var(--vscode-progressBar-background, var(--ncore-violet));
	--ncore-size: 44px;
	--ncore-arc-w: 2px;
	--ncore-dot: 4px;

	position: relative;
	display: inline-block;
	width: var(--ncore-size);
	height: var(--ncore-size);
	flex: none;
}

.ncore-loader--sm {
	--ncore-size: 18px;
	--ncore-arc-w: 1.5px;
	--ncore-dot: 0;
}

.ncore-loader--lg {
	--ncore-size: 64px;
	--ncore-arc-w: 3px;
	--ncore-dot: 5px;
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1592] Product alias (Power Claude historical class) — same rules, zero fork. */
.pc-neural-loader {
	--ncore-violet: #7c3aed;
	--ncore-cyan: #22d3ee;
	--ncore-glow: var(--vscode-progressBar-background, #7c3aed);
	--ncore-size: 44px;
	--ncore-arc-w: 2px;
	--ncore-dot: 4px;

	position: relative;
	display: inline-block;
	width: var(--ncore-size);
	height: var(--ncore-size);
	flex: none;
}

.ncore-loader__ring,
.pc-neural-loader__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: var(--ncore-arc-w);
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		color-mix(in srgb, var(--ncore-violet) 35%, transparent) 250deg,
		var(--ncore-violet) 320deg,
		transparent 320.5deg
	);
	animation: ncore-spin 1.1s linear infinite;
}

.ncore-loader__ring--inner,
.pc-neural-loader__ring--inner {
	inset: 18%;
	background: conic-gradient(
		from 180deg,
		transparent 0deg,
		color-mix(in srgb, var(--ncore-cyan) 35%, transparent) 220deg,
		var(--ncore-cyan) 290deg,
		transparent 290.5deg
	);
	animation: ncore-spin-counter 1.6s linear infinite;
}

.ncore-loader__core,
.pc-neural-loader__core {
	position: absolute;
	inset: 38%;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		var(--ncore-cyan),
		var(--ncore-violet) 70%
	);
	box-shadow:
		0 0 4px color-mix(in srgb, var(--ncore-glow) 90%, transparent),
		0 0 10px color-mix(in srgb, var(--ncore-violet) 60%, transparent),
		0 0 18px color-mix(in srgb, var(--ncore-cyan) 35%, transparent);
	animation: ncore-pulse 1.4s ease-in-out infinite;
}

.ncore-loader__orbit,
.pc-neural-loader__orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: ncore-spin 2.2s linear infinite;
}

.ncore-loader__orbit--b,
.pc-neural-loader__orbit--b {
	inset: 9%;
	animation: ncore-spin-counter 2.9s linear infinite;
	animation-delay: -0.9s;
}

.ncore-loader__orbit--c,
.pc-neural-loader__orbit--c {
	inset: -9%;
	animation-duration: 3.6s;
	animation-delay: -1.7s;
}

.ncore-loader__synapse,
.pc-neural-loader__synapse {
	position: absolute;
	top: calc(-1 * var(--ncore-dot) / 2 + var(--ncore-arc-w));
	left: 50%;
	width: var(--ncore-dot);
	height: var(--ncore-dot);
	margin-left: calc(-1 * var(--ncore-dot) / 2);
	border-radius: 50%;
	background: var(--ncore-cyan);
	box-shadow: 0 0 6px color-mix(in srgb, var(--ncore-cyan) 80%, transparent);
}

.ncore-loader__orbit--b .ncore-loader__synapse,
.pc-neural-loader__orbit--b .pc-neural-loader__synapse {
	background: var(--ncore-violet);
	box-shadow: 0 0 6px color-mix(in srgb, var(--ncore-violet) 80%, transparent);
}

/* [host:grok-cli:0.2.114][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1592] Hide orbit dots on sm (too dense for buttons). */
.ncore-loader--sm .ncore-loader__orbit {
	display: none;
}

@keyframes ncore-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes ncore-spin-counter {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes ncore-pulse {
	0%,
	100% {
		transform: scale(0.78);
		opacity: 0.7;
	}
	50% {
		transform: scale(1.06);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ncore-loader__ring,
	.ncore-loader__ring--inner,
	.ncore-loader__orbit,
	.ncore-loader__orbit--b,
	.ncore-loader__orbit--c,
	.pc-neural-loader__ring,
	.pc-neural-loader__ring--inner,
	.pc-neural-loader__orbit,
	.pc-neural-loader__orbit--b,
	.pc-neural-loader__orbit--c {
		animation: none;
		opacity: 0.45;
	}

	.ncore-loader__core,
	.pc-neural-loader__core {
		animation: ncore-pulse-reduced 2.6s ease-in-out infinite;
	}
}

@keyframes ncore-pulse-reduced {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.55;
	}
}