/* 首屏 / 登录跳转过渡动画。
   这段 CSS 必须**完全自包含**：它在 JS bundle 下载完之前就要能渲染，
   所以不依赖 UnoCSS、不依赖主题变量（只用 loading.js 注入的 --primary-color 做兜底）。
   设计取向与登录页一致：深色电影感 + 品牌橙辉光。 */

.loading-container {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #0a0c10;
	animation: loadingFadeIn 0.35s ease-out;
}

/* 两团缓慢漂移的橙色极光，给纯暗底一点"活气"
   （比再塞一张背景图更轻 —— 首屏不该等图片下载） */
.loading-container::before,
.loading-container::after {
	content: '';
	position: absolute;
	width: 70vmax;
	height: 70vmax;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}
.loading-container::before {
	top: -22vmax;
	right: -16vmax;
	background: radial-gradient(circle, var(--loading-glow-strong, rgba(244, 81, 30, 0.55)), transparent 65%);
	animation: loadingAuroraA 13s ease-in-out infinite alternate;
}
.loading-container::after {
	bottom: -26vmax;
	left: -16vmax;
	background: radial-gradient(circle, var(--loading-glow-soft, rgba(244, 81, 30, 0.3)), transparent 65%);
	animation: loadingAuroraB 17s ease-in-out infinite alternate;
}

@keyframes loadingAuroraA {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-7vmax, 5vmax, 0) scale(1.18); }
}
@keyframes loadingAuroraB {
	from { transform: translate3d(0, 0, 0) scale(1.1); }
	to   { transform: translate3d(6vmax, -5vmax, 0) scale(1); }
}

/* ── 徽标：一圈掠过的橙色光弧 + 呼吸的 logo ── */
.loading-emblem {
	position: relative;
	width: 168px;
	height: 168px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loading-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
		transparent 0 58%,
		var(--primary-color, #f4511e) 76%,
		#ff9a6b 82%,
		transparent 92%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
	animation: loadingSpin 1.7s linear infinite;
}
.loading-logo {
	width: 104px;
	height: 104px;
	object-fit: contain;
	filter: drop-shadow(0 0 26px var(--loading-glow-strong, rgba(244, 81, 30, 0.55)));
	animation: loadingBreathe 3.2s ease-in-out infinite;
}

@keyframes loadingSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes loadingBreathe {
	0%, 100% { transform: scale(1);     opacity: 0.92; }
	50%      { transform: scale(1.055); opacity: 1; }
}

/* ── 不定长进度条：比四个跳动的方块更像"系统在干活" ── */
.loading-bar {
	position: relative;
	width: 184px;
	height: 3px;
	margin-top: 36px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.09);
	overflow: hidden;
}
.loading-bar::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	border-radius: 99px;
	background: linear-gradient(90deg,
		transparent,
		var(--primary-color, #f4511e),
		#ff9a6b,
		transparent);
	animation: loadingSlide 1.35s ease-in-out infinite;
}
@keyframes loadingSlide {
	0%   { transform: translateX(-105%); }
	100% { transform: translateX(345%); }
}

.loading-title {
	margin-top: 22px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 8px;
	text-indent: 8px; /* 抵消 letter-spacing 在末尾多出的一格，保证视觉居中 */
	color: rgba(255, 255, 255, 0.62);
}

@keyframes loadingFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* 尊重系统「减少动态效果」：关掉位移/旋转类动画，保留静态构图 */
@media (prefers-reduced-motion: reduce) {
	.loading-container::before,
	.loading-container::after,
	.loading-ring,
	.loading-logo,
	.loading-bar::after {
		animation: none;
	}
}