/**
 * 首页全屏 Hero（参考 demo/banner/banner-animation-v2.html）
 */

.home-hero-stack {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
	font-size: 0;
	line-height: 0;
}

.home-hero-stack > .home-hero,
.home-hero-stack > #top {
	font-size: 14px;
	line-height: normal;
}


.home-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 560px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #000;
}

.home-hero__slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.home-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
}

.home-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.home-hero__loader {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at center, #121a35 0%, #070b18 100%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	pointer-events: none;
}

.home-hero.is-booting .home-hero__loader,
.home-hero.is-transitioning .home-hero__loader {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.home-hero__loader-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-hero__loader-logo {
	width: min(160px, 36vw);
	height: auto;
	filter: brightness(0) invert(1);
	animation: homeHeroLoaderPulse 1.2s ease-in-out infinite;
}

@keyframes homeHeroLoaderPulse {
	0%, 100% {
		opacity: 0.45;
		transform: scale(0.94);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

.home-hero.is-booting .home-hero__slides,
.home-hero.is-booting .home-hero__dots {
	visibility: hidden;
}

/* ========== 动画舞台（banner1~4 分层图，设计基准 1920×1080 等比 cover 铺满） ========== */
.home-hero__anim-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
}

.home-hero__fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: radial-gradient(circle at 50% 47%, #2a2e38 0%, #101218 38%, #06070a 100%);
	pointer-events: none;
	opacity: 0;
}

.home-hero__slide--1 .home-hero__fx {
	background: radial-gradient(circle at 50% 47%, #2a2e38 0%, #101218 38%, #06070a 100%);
}

.home-hero__slide--2 .home-hero__fx {
	background: radial-gradient(circle at 50% 47%, #1c283e 0%, #0c1220 38%, #04070e 100%);
}

.home-hero__slide--3 .home-hero__fx {
	background: radial-gradient(circle at 50% 47%, #3e201a 0%, #180c0a 38%, #080403 100%);
}

.home-hero__slide--4 .home-hero__fx {
	background: radial-gradient(circle at 50% 47%, #2e2814 0%, #120f07 38%, #070603 100%);
}

.home-hero__fx-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.home-hero__anim-canvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 1920px;
	height: 1080px;
	transform: none;
	transform-origin: top center;
	will-change: width, height, left, top;
}

.home-hero__anim-stage img {
	position: absolute;
	pointer-events: none;
	max-width: none;
	vertical-align: top;
}

.home-hero__anim-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0;
}

.home-hero__anim-layer {
	height: auto;
}

.home-hero__anim-layer {
	opacity: 0;
}

.home-hero__slide:not(.is-active) .home-hero__fx,
.home-hero__slide:not(.is-active) .home-hero__anim-bg {
	opacity: 0;
}

.home-hero__slide.is-active.is-bg-playing .home-hero__fx,
.home-hero__slide.is-active.is-bg-playing .home-hero__anim-bg {
	animation: homeHeroFadeIn 1s ease-out forwards;
}

.home-hero__slide.is-active.is-layers-playing .home-hero__fx,
.home-hero__slide.is-active.is-text-playing .home-hero__fx,
.home-hero__slide.is-active.is-hold .home-hero__fx,
.home-hero__slide.is-active.is-layers-playing .home-hero__anim-bg,
.home-hero__slide.is-active.is-text-playing .home-hero__anim-bg,
.home-hero__slide.is-active.is-hold .home-hero__anim-bg {
	opacity: 1;
}

.home-hero__slide:not(.is-layers-playing):not(.is-text-playing):not(.is-hold) .home-hero__anim-layer {
	animation: none;
	opacity: 0;
}

.home-hero__slide.is-text-playing .home-hero__anim-layer,
.home-hero__slide.is-hold .home-hero__anim-layer {
	opacity: 1;
}

.home-hero__slide:not(.is-text-playing):not(.is-hold) .home-hero__title,
.home-hero__slide:not(.is-text-playing):not(.is-hold) .home-hero__subtitle {
	animation: none;
	opacity: 0;
	transform: translateY(30px);
}

.home-hero__slide.is-hold .home-hero__title,
.home-hero__slide.is-hold .home-hero__subtitle {
	opacity: 1;
	transform: translateY(0);
}

.home-hero__slide-mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.28) 100%);
	pointer-events: none;
	z-index: 2;
}

.home-hero__slide-fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	overflow: hidden;
}

.home-hero__light-sweep {
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	transform: skewX(-20deg);
}

.home-hero__slide:not(.is-active) .home-hero__light-sweep {
	animation: none;
	left: -50%;
}

.home-hero__slide.is-active.is-sweep-playing .home-hero__light-sweep {
	animation: homeHeroSweep 2.8s ease-in-out forwards;
}

@keyframes homeHeroSweep {
	0% { left: -50%; }
	100% { left: 150%; }
}

.home-hero__text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(920px, 90%);
	text-align: center;
	z-index: 10;
	pointer-events: none;
}

.home-hero__title {
	margin: 0 0 24px;
	font-size: 56px;
	font-weight: 800;
	color: #fff;
	letter-spacing: 4px;
	line-height: 1.15;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(100, 180, 255, 0.25);
	opacity: 0;
	transform: translateY(30px);
}

.home-hero__subtitle {
	margin: 0;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: 2px;
	line-height: 1.6;
	text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(30px);
}

.home-hero__slide.is-active.is-text-playing .home-hero__title {
	animation: homeHeroTextIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.home-hero__slide.is-active.is-text-playing .home-hero__subtitle {
	animation: homeHeroTextIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes homeHeroTextIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes homeHeroFadeIn {
	to { opacity: 1; }
}

@keyframes homeHeroFlyIn {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes homeHeroSlideIn {
	to {
		opacity: 1;
		transform: translateX(0) rotate(0);
	}
}

@keyframes homeHeroRiseIn {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes homeHeroSlideRight {
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
		filter: blur(0);
	}
}

@keyframes homeHeroSlideInR {
	to {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes homeHeroScreenGlow {
	0%, 100% { filter: drop-shadow(0 0 15px rgba(0, 255, 180, 0.3)); }
	50% { filter: drop-shadow(0 0 30px rgba(0, 255, 180, 0.5)); }
}

@keyframes homeHeroChartGlow {
	0%, 100% { filter: drop-shadow(0 0 20px rgba(0, 255, 220, 0.5)); }
	50% { filter: drop-shadow(0 0 40px rgba(0, 255, 220, 0.8)); }
}

@keyframes homeHeroB2CoreIn {
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
		filter: blur(0);
	}
}

@keyframes homeHeroB2FlyL {
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes homeHeroB2FlyR {
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes homeHeroB2FlyU {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes homeHeroB2Breathe {
	0%, 100% {
		filter: drop-shadow(0 10px 36px rgba(184, 153, 104, 0.16));
	}

	50% {
		filter: drop-shadow(0 10px 56px rgba(184, 153, 104, 0.3));
	}
}

@keyframes homeHeroB4RiseChart {
	to {
		opacity: 1;
		transform: translateY(0) scale(0.6);
		filter: blur(0);
	}
}

@keyframes homeHeroB4SlideL {
	to {
		opacity: 1;
		transform: translateX(0) scale(0.6);
	}
}

@keyframes homeHeroB4PopIn {
	to {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(0.6);
	}
}

/* Banner 1 - 品牌全景（整体上移，避免底部溢出） */
.home-hero__slide--1 .home-hero__anim-layer--b1-01 { width: 18%; left: 2%; top: 38%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-02 { width: 28%; left: 8%; top: 26%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-03 { width: 38%; left: 20%; top: 14%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-04 { width: 30%; left: 30%; top: 38%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-05 { width: 32%; left: 38%; top: 19%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-06 { width: 20%; left: 55%; top: 31%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-07 { width: 16%; left: 62%; top: 23%; transform: translateY(80px) scale(0.7); filter: blur(4px); }
.home-hero__slide--1 .home-hero__anim-layer--b1-08 { width: 18%; left: 75%; top: 21%; transform: translateY(80px) scale(0.7); filter: blur(4px); }

.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-01 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-02 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-03 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-04 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-05 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-06 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-07 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; }
.home-hero__slide--1.is-active.is-layers-playing .home-hero__anim-layer--b1-08 { animation: homeHeroFlyIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards; }

/* Banner 2 - AI Agent（对齐 demo/banner/banner2，仅第 2 组 slide） */
.home-hero__slide--2 .home-hero__anim-layer:not(.home-hero__anim-bg) {
	transform-origin: center center;
}

.home-hero__slide--2 .home-hero__anim-layer--b2-core {
	width: 40%;
	left: 30%;
	top: 15%;
	transform: scale(0.88) translateY(24px);
	filter: blur(6px);
}

.home-hero__slide--2 .home-hero__anim-layer--b2-chat-big {
	width: 11%;
	left: 20%;
	top: 22%;
	transform: translate(-150px, -50px);
}

.home-hero__slide--2 .home-hero__anim-layer--b2-dashboard {
	width: 9%;
	left: 73%;
	top: 20%;
	transform: translate(150px, -50px);
}

.home-hero__slide--2 .home-hero__anim-layer--b2-notification {
	width: 9%;
	left: 18%;
	top: 50%;
	transform: translate(-150px, 20px);
}

.home-hero__slide--2 .home-hero__anim-layer--b2-flow {
	width: 9%;
	left: 74%;
	top: 48%;
	transform: translate(150px, 20px);
}

/* 底部两枚卡片：停留位置上移，避免贴边或被 cover 裁切 */
.home-hero__slide--2 .home-hero__anim-layer--b2-chat-small {
	width: 10%;
	left: 27%;
	top: 58%;
	transform: translateY(70px);
}

.home-hero__slide--2 .home-hero__anim-layer--b2-ai-status {
	width: 12%;
	left: 58%;
	top: 60%;
	transform: translateY(70px);
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-core {
	animation: homeHeroB2CoreIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards,
		homeHeroB2Breathe 4.5s ease-in-out 2.2s infinite;
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-chat-big {
	animation: homeHeroB2FlyL 1s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-dashboard {
	animation: homeHeroB2FlyR 1s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-notification {
	animation: homeHeroB2FlyL 1s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-flow {
	animation: homeHeroB2FlyR 1s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-chat-small {
	animation: homeHeroB2FlyU 1s cubic-bezier(0.22, 1, 0.36, 1) 1.7s forwards;
}

.home-hero__slide--2.is-active.is-layers-playing .home-hero__anim-layer--b2-ai-status {
	animation: homeHeroB2FlyU 1s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards;
}

/* Banner 3 - 开发与小程序（整体上移，略缩小主元素） */
.home-hero__slide--3 .home-hero__anim-layer--b3-glass1 { width: 24%; left: 10%; top: 12%; transform: translateX(-80px) rotate(-5deg); }
.home-hero__slide--3 .home-hero__anim-layer--b3-glass2 { width: 26%; left: 57%; top: 8%; transform: translateX(80px) rotate(5deg); }
.home-hero__slide--3 .home-hero__anim-layer--b3-laptop { width: 36%; left: 26%; top: 16%; transform: translateY(120px) scale(0.9); filter: blur(4px); }
.home-hero__slide--3 .home-hero__anim-layer--b3-phone { width: 12%; left: 57%; top: 22%; transform: translateX(100px) scale(0.9); filter: blur(4px); }
.home-hero__slide--3 .home-hero__anim-layer--b3-tablet { width: 24%; left: 60%; top: 32%; transform: translateX(80px) translateY(60px) scale(0.9); filter: blur(4px); }

.home-hero__slide--3.is-active.is-layers-playing .home-hero__anim-layer--b3-glass1 { animation: homeHeroSlideIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards; }
.home-hero__slide--3.is-active.is-layers-playing .home-hero__anim-layer--b3-glass2 { animation: homeHeroSlideIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards; }
.home-hero__slide--3.is-active.is-layers-playing .home-hero__anim-layer--b3-laptop { animation: homeHeroRiseIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards, homeHeroScreenGlow 3s ease-in-out 2.2s infinite; }
.home-hero__slide--3.is-active.is-layers-playing .home-hero__anim-layer--b3-phone { animation: homeHeroSlideRight 1s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; }
.home-hero__slide--3.is-active.is-layers-playing .home-hero__anim-layer--b3-tablet { animation: homeHeroSlideInR 1s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; }

/* Banner 4 - GEO 优化（无 title-bg，PNG 层 scale 60% 分散布局） */
.home-hero__slide--4 .home-hero__anim-layer:not(.home-hero__anim-bg) {
	transform-origin: center center;
}

.home-hero__slide--4 .home-hero__anim-layer--b4-chart { width: 28%; left: 36%; top: 16%; transform: translateY(120px) scale(0.36); filter: blur(4px); }
.home-hero__slide--4 .home-hero__anim-layer--b4-search { width: 22%; left: 14%; top: 10%; transform: translateX(-55px) scale(0.6); }
.home-hero__slide--4 .home-hero__anim-layer--b4-profile-male { width: 13%; left: 20%; top: 18%; transform: translateX(-45px) scale(0.48); }
.home-hero__slide--4 .home-hero__anim-layer--b4-progress { width: 12%; left: 26%; top: 30%; transform: translateY(45px) scale(0.48); }
.home-hero__slide--4 .home-hero__anim-layer--b4-ai { width: 15%; left: 70%; top: 8%; transform: translateX(50px) scale(0.48); }
.home-hero__slide--4 .home-hero__anim-layer--b4-info { width: 16%; left: 58%; top: 24%; transform: translateX(35px) scale(0.48); }
.home-hero__slide--4 .home-hero__anim-layer--b4-profile-female { width: 14%; left: 66%; top: 34%; transform: translateY(45px) scale(0.48); }

.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-chart { animation: homeHeroB4RiseChart 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards, homeHeroChartGlow 2.5s ease-in-out 2.2s infinite; }
.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-search { animation: homeHeroB4SlideL 0.8s ease-out 1.0s forwards; }
.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-profile-male { animation: homeHeroB4PopIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; }
.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-ai { animation: homeHeroB4PopIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards; }
.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-info { animation: homeHeroB4PopIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; }
.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-progress { animation: homeHeroB4PopIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards; }
.home-hero__slide--4.is-active.is-layers-playing .home-hero__anim-layer--b4-profile-female { animation: homeHeroB4PopIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; }

.home-hero__dots {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 20;
}

.home-hero__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	overflow: hidden;
	transition: width 0.35s ease, background 0.35s ease;
}

.home-hero__dot-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--v2-color-accent, #7a2ee6);
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
	backface-visibility: hidden;
}

.home-hero__dot.is-active {
	width: 22px;
	background: #fff;
	box-shadow: 0 0 10px rgba(122, 46, 230, 0.35);
}

@media only screen and (max-width: 768px) {
	.home-hero__title {
		font-size: 32px;
		letter-spacing: 2px;
	}

	.home-hero__subtitle {
		font-size: 14px;
		letter-spacing: 1px;
	}

	.home-hero__dots {
		bottom: 24px;
	}

	.home-hero__dot.is-active {
		width: 16px;
	}

	.home-hero__anim-layer {
		display: none;
	}

	.home-hero__slide.is-active.is-layers-playing .home-hero__fx,
	.home-hero__slide.is-active.is-text-playing .home-hero__fx,
	.home-hero__slide.is-active.is-hold .home-hero__fx,
	.home-hero__slide.is-active.is-layers-playing .home-hero__anim-bg,
	.home-hero__slide.is-active.is-text-playing .home-hero__anim-bg,
	.home-hero__slide.is-active.is-hold .home-hero__anim-bg {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__fx-canvas {
		display: none;
	}
}