/* loading.css — LOADING 动画样式（独立样式文件）
 *
 * 原 Vue 组件的 SCSS 已展开为普通 CSS：
 * - 嵌套选择器已展开（.home-loader .circle 等）；
 * - 动画关键帧加了 loading-anim- 前缀，避免与页面其他全局关键帧命名冲突；
 *
 * 引入方式（二选一）：
 *   1) <link rel="stylesheet" href="loading.css">
 *   2) 引入 loading.js 时自动注入本文件（默认路径 "loading.css"，
 *      可通过 createLoadingAnimation(container, { styleHref: '...' }) 覆盖）。
 */

.home-loader .circle-frame,
.home-loader .disc-frame {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-loader .circle-frame,
.home-loader .disc-frame,
.home-loader .circle,
.home-loader .disc {
	position: absolute;
}

.home-loader .circle {
	border: 2px solid transparent;
	border-left: 2px solid #1fd3b7;
	border-right: 2px solid #1fd3b7;
	border-radius: 50%;
	display: flex;
	z-index: 1;
}

.home-loader .circle:nth-child(1) {
	animation: loading-anim-spin 1.5s linear infinite;
}
.home-loader .circle:nth-child(2) {
	animation: loading-anim-spinner 2s linear infinite;
}
.home-loader .circle:nth-child(3) {
	animation: loading-anim-spin 3s linear infinite;
}

.home-loader .disc {
	height: 150px;
	width: 150px;
	border: 2px solid #1fd3b7;
	opacity: 0.9;
	border-radius: 50%;
	animation: loading-anim-rotate 3s linear infinite;
}

.home-loader .loading {
	display: block;
	font-size: 1rem;
	letter-spacing: 0.25rem;
	color: #1fd3b7;
	animation: loading-anim-blink 1s ease infinite;
}

@keyframes loading-anim-blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@keyframes loading-anim-rotate {
	100% {
		transform: rotate3D(0.5, 0.5, 0.5, -720deg);
	}
}

@keyframes loading-anim-spin {
	to {
		transform: rotateZ(-360deg);
	}
}

@keyframes loading-anim-spinner {
	to {
		transform: rotateZ(360deg);
	}
}