/* Shared visual from LoadingGate, also used before the app starts. */
.brand-loader-orbit {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 4rem;
	block-size: 4rem;
	isolation: isolate;
}

.brand-loader-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg 190deg,
		color-mix(in srgb, var(--accent) 45%, transparent) 290deg,
		var(--accent) 360deg
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	animation: brand-loader-spin 1.1s linear infinite;
	filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 32%, transparent));
}

.brand-loader-ring--inner {
	inset: 8px;
	opacity: 0.55;
	animation-direction: reverse;
	animation-duration: 1.7s;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

.brand-loader-halo {
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--accent) 30%, transparent),
		transparent 70%
	);
	z-index: -1;
	animation: brand-loader-pulse 2s var(--ease-out) infinite;
}

.brand-loader-mark {
	display: grid;
	place-items: center;
	inline-size: 1.7rem;
	block-size: 1.7rem;
	animation: brand-loader-breathe 2s var(--ease-out) infinite;
}

.brand-loader-mark img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.brand-loader-dot {
	position: absolute;
	inset: 50%;
	inline-size: 5px;
	block-size: 5px;
	margin: -2.5px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
	animation: brand-loader-orbit-dot 1.5s linear infinite;
}

.brand-loader-dot--b {
	animation-delay: -0.5s;
	opacity: 0.65;
}

.brand-loader-dot--c {
	animation-delay: -1s;
	opacity: 0.4;
}

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

@keyframes brand-loader-pulse {
	0%,
	100% {
		transform: scale(0.8);
		opacity: 0.45;
	}
	50% {
		transform: scale(1.12);
		opacity: 1;
	}
}

@keyframes brand-loader-breathe {
	0%,
	100% {
		transform: scale(0.92);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes brand-loader-orbit-dot {
	from {
		transform: rotate(0) translateX(1.85rem);
	}
	to {
		transform: rotate(360deg) translateX(1.85rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.brand-loader-ring {
		animation-duration: 2.6s;
	}
	.brand-loader-ring--inner,
	.brand-loader-halo,
	.brand-loader-mark,
	.brand-loader-dot {
		animation: none;
	}
}

:root:not([data-theme='dark']) .brand-loader-ring {
	filter: none;
}

:root:not([data-theme='dark']) .brand-loader-halo {
	display: none;
}

:root:not([data-theme='dark']) .brand-loader-dot {
	box-shadow: none;
}