/* ===== 启动加载覆盖层 ===== */
:root {
	--overlay-bg: #fff;
	/* 覆盖层背景（够暗才能看清穿透效果） */
	--accent: #4fc3f7;
	/* 强调色：路径/标签边框 */
	--plane-size: 2rem;
	/* 飞机图标尺寸 */
	--anim-duration: 3800ms;
	/* 飞机沿路径运动总时长 */
	--reveal-duration: 1000ms;
	/* 透明门放大时长 */
	--easing: cubic-bezier(.22, .61, .36, 1);
	/* --easing: linear; */
	/* 动画缓动 */
	--logo-text: "Harmony";
	/* 中间透明Logo文字（可替换） */
	--logo-font: "微软雅黑";
}

.loader-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: auto;
	
	transition:transform var(--reveal-duration) var(--easing),opacity 500ms var(--easing);
	/* 使用SVG做遮罩: 除了LOGO文本区域外都遮住 */
}

/* SVG 全屏铺满 */
.loader-svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 半透明遮罩矩形，应用 mask 以挖掉 LOGO 字形，产生“透明门” */
.overlay-rect {
	fill: var(--overlay-bg);
}

/* ===== LOGO 文本（用于 mask，放大即“穿门”）===== */
#logoText {
	font: 900 var(--f180)/1 var(--logo-font);
	font-style: italic;
	/* letter-spacing: .06em; */
	transform-origin: center;
	/* 以自身中心缩放，制造走进门的观感 */
	transition: transform var(--reveal-duration) var(--easing);
}
/* 小标题 */
#smallText{
	font-size: var(--f24);
	color: var(--themeColor2);
	font-family: 'popm-font';
}
/* ===== 曲线路径 & 飞机 ===== */
.progress-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* 路径（可见轻微描边，提升指引感） */
.track {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}

.track path {
	fill: none;
	stroke: var(--themeColor2);
	stroke-width: 1.5;
	stroke-dasharray: 4 2;
}

/* 飞机图标容器（跟随路径移动/旋转） */
.plane {
	position: absolute;
	width: var(--plane-size);
	height: var(--plane-size);
	bottom: 0;
	will-change: transform;
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45));
}

.plane svg,
.plane img {
	width: 100%;
	height: 100%;
	display: block;
}

/* 进度标签（跟随飞机移动） */
.badge {
	position: absolute;
	padding: 6px 10px;
	font: 400 var(--f24)/1.1 'popm-font';
	user-select: none;
	white-space: nowrap;
	color: var(--themeColor2);
}

/* ===== 完成态（透明门放大 + 整层淡出）===== */
.loader-overlay.revealing {
	transform: translateY(-186%) scale(70);
	opacity: 0;
}

.loader-overlay.faded-out {
	opacity: 0;
	transition: opacity 420ms linear;
}