/* Hero首屏区域 - 布局 + 3D图片容器 + 动画 + 按钮 + 装饰元素 */
.first-section { margin-top: 30px; min-height: 520px; display: flex; align-items: center; gap: 60px; position: relative; padding-bottom: 60px; }
.home-first-left { flex: 1; max-width: 580px; padding-right: 20px; }
.home-first-right { flex: 1; position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; }

/* 3D动画图片容器 - 基础样式 */
.brutal-hero-3d-container { position: relative; width: 100%; height: 520px; perspective: 1200px; perspective-origin: center center; }
.hero-3d-image {
	position: absolute; transform-style: preserve-3d;
	will-change: transform, opacity; overflow: hidden; border-radius: 12px;
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}
.hero-3d-image::after {
	content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
	width: 85%; height: 6px; border-radius: 50%; filter: blur(8px); z-index: -1;
	animation: underglowPulse 3s ease-in-out infinite;
}
@keyframes underglowPulse {
	0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
	50% { opacity: 1; transform: translateX(-50%) scaleX(1.08); }
}
.hero-3d-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 主图 - PC端 (右上角) */
.hero-3d-image-primary {
	width: var(--hero-primary-width, 420px); height: var(--hero-primary-height, 210px);
	top: 50px; right: 0; z-index: 2; animation: none; opacity: 0;
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2), 0 4px 20px rgba(255, 51, 102, 0.35), 0 8px 40px rgba(255, 51, 102, 0.15);
}
.hero-3d-image-primary::after {
	background: #FF3366;
	box-shadow: 0 0 15px 4px rgba(255, 51, 102, 0.7), 0 0 35px 10px rgba(255, 51, 102, 0.35), 0 0 60px 20px rgba(255, 51, 102, 0.12);
}
/* 次图 - 移动端 (左下角) */
.hero-3d-image-secondary {
	width: var(--hero-secondary-width, 155px); height: var(--hero-secondary-height, 336px);
	bottom: 50px; left: 40px; z-index: 1; animation: none; opacity: 0;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 18px rgba(59, 130, 246, 0.35), 0 8px 35px rgba(59, 130, 246, 0.15);
}
.hero-3d-image-secondary::after {
	background: #3B82F6;
	box-shadow: 0 0 15px 4px rgba(59, 130, 246, 0.7), 0 0 32px 10px rgba(59, 130, 246, 0.35), 0 0 55px 18px rgba(59, 130, 246, 0.12);
}
/* 三图 - 平板端 (居中偏右) */
.hero-3d-image-tertiary {
	width: var(--hero-tertiary-width, 200px); height: var(--hero-tertiary-height, 434px);
	top: 60%; right: -40px; transform: translateY(-50%); z-index: 3; animation: none; opacity: 0;
	box-shadow: 0 22px 65px rgba(0, 0, 0, 0.2), 0 4px 18px rgba(139, 92, 246, 0.35), 0 8px 38px rgba(139, 92, 246, 0.15);
}
.hero-3d-image-tertiary::after {
	background: #8B5CF6;
	box-shadow: 0 0 15px 4px rgba(139, 92, 246, 0.7), 0 0 32px 10px rgba(139, 92, 246, 0.35), 0 0 55px 18px rgba(139, 92, 246, 0.12);
}

/* 入场动画关键帧 */
@keyframes heroPrimaryEnter {
	0% { opacity: 0; transform: translateX(100px) translateY(-40px) rotateY(30deg) scale(0.8); }
	50% { opacity: 1; box-shadow: 0 35px 90px rgba(255,51,102,0.3); }
	100% { opacity: 1; transform: translateX(0) translateY(0) rotateY(0deg) scale(1); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2); }
}
@keyframes heroSecondaryEnter {
	0% { opacity: 0; transform: translateX(-80px) translateY(50px) rotateZ(-10deg) scale(0.82); }
	50% { opacity: 1; box-shadow: 0 35px 90px rgba(59,130,246,0.3); }
	100% { opacity: 1; transform: translateX(0) translateY(0) rotateZ(0deg) scale(1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); }
}
@keyframes heroTertiaryEnter {
	0% { opacity: 0; transform: translateY(-50%) translateY(60px) scaleX(0.85) rotateX(15deg); }
	50% { opacity: 1; box-shadow: 0 35px 90px rgba(139,92,246,0.3); }
	100% { opacity: 1; transform: translateY(-50%) translateY(0) scaleX(1) rotateX(0deg); box-shadow: 0 22px 65px rgba(0, 0, 0, 0.2), 0 4px 18px rgba(139, 92, 246, 0.35), 0 8px 38px rgba(139, 92, 246, 0.15); }
}

/* 待机浮动动画关键帧 */
@keyframes heroPrimaryFloat {
	0% { opacity: 1; transform: translate(0, 0) rotateY(0deg); }
	15% { opacity: 1; transform: translate(18px, -22px) rotateY(5deg); }
	30% { opacity: 1; transform: translate(-12px, -12px) rotateY(-4deg); }
	45% { opacity: 1; transform: translate(24px, 14px) rotateY(3deg); }
	60% { opacity: 1; transform: translate(-16px, 28px) rotateY(-5deg); }
	75% { opacity: 1; transform: translate(12px, -18px) rotateY(4deg); }
	90% { opacity: 1; transform: translate(-22px, 12px) rotateY(-3deg); }
	100% { opacity: 1; transform: translate(0, 0) rotateY(0deg); }
}
@keyframes heroSecondaryFloat {
	0% { opacity: 1; transform: translate(0, 0) rotateZ(0deg); }
	12% { opacity: 1; transform: translate(-15px, 20px) rotateZ(4deg); }
	25% { opacity: 1; transform: translate(22px, -16px) rotateZ(-5deg); }
	38% { opacity: 1; transform: translate(-26px, -26px) rotateZ(3deg); }
	50% { opacity: 1; transform: translate(16px, 18px) rotateZ(-4deg); }
	62% { opacity: 1; transform: translate(-18px, -12px) rotateZ(5deg); }
	75% { opacity: 1; transform: translate(28px, 24px) rotateZ(-3deg); }
	88% { opacity: 1; transform: translate(-12px, -21px) rotateZ(4deg); }
	100% { opacity: 1; transform: translate(0, 0) rotateZ(0deg); }
}
@keyframes heroTertiaryFloat {
	0% { opacity: 1; transform: translateY(-50%) translate(0, 0) rotateX(0deg); }
	14% { opacity: 1; transform: translateY(-50%) translate(-10px, 16px) rotateX(3deg); }
	28% { opacity: 1; transform: translateY(-50%) translate(18px, -12px) rotateX(-4deg); }
	42% { opacity: 1; transform: translateY(-50%) translate(-20px, -18px) rotateX(2.5deg); }
	57% { opacity: 1; transform: translateY(-50%) translate(14px, 22px) rotateX(-3.5deg); }
	71% { opacity: 1; transform: translateY(-50%) translate(-16px, -14px) rotateX(4deg); }
	85% { opacity: 1; transform: translateY(-50%) translate(22px, 10px) rotateX(-2.5deg); }
	100% { opacity: 1; transform: translateY(-50%) translate(0, 0) rotateX(0deg); }
}

/* ========== 野兽派独立按钮组 ========== */
.slider-wrapper { position: relative; width: 100%; max-width: 520px; margin: 0 0 48px 0; }
.slider-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.slider-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 18px 12px 16px; text-decoration: none; cursor: pointer;
	background: #FFFFFF; border: 3px solid #0A0A0A; box-shadow: 5px 5px 0 #E5E5E5;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
	transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); position: relative;
}
.slider-item:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #E5E5E5; background: #F8F8F8; }
.tab-label { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; display: block; font-family: var(--brutal-font-mono); color: #3a3a3a; transition: all 0.25s ease; }
.slider-item:hover .tab-label { color: var(--brutal-accent-red); }
.slider-item-active { background: #0A0A0A !important; transform: translate(-3px, -3px); box-shadow: 8px 8px 0 rgba(255,51,102,0.25); }
.slider-item-active .tab-label { color: #FFFFFF !important; font-weight: 900; }
.slider-item-active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--active-color, var(--brutal-accent-red)); }

.item-desc { font-family: var(--brutal-font-serif); font-size: clamp(32px, 4vw, 48px); font-weight: 900; margin-bottom: 18px; line-height: 1.15; color: #0A0A0A; letter-spacing: -0.02em; }
.app-name-highlight { color: var(--brutal-accent-red); font-weight: 900; }
.item-sub-desc { font-size: 16px; color: #5C5C5C; margin-bottom: 28px; line-height: 1.65; font-family: var(--brutal-font-sans); }

.join-button {
	display: inline-flex; padding: 14px 28px; background: #0A0A0A; color: #FFFFFF;
	border: 2px solid #0A0A0A; text-decoration: none; font-size: 15px; font-weight: 800;
	font-family: var(--brutal-font-sans); letter-spacing: 0.03em;
	transition: all 0.25s var(--brutal-transition);
	box-shadow: 4px 4px 0 #D0D0D0, 6px 6px 8px rgba(0,0,0,0.15);
}
.join-button:hover { background: var(--brutal-accent-red); border-color: var(--brutal-accent-red); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #BEBEBE, 9px 9px 12px rgba(0,0,0,0.2); }
.join-button:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #DCDCDC, 3px 3px 4px rgba(0,0,0,0.12); }
.join-button-outline { background: #FFFFFF !important; color: #0A0A0A !important; border: 2px solid #0A0A0A !important; box-shadow: 4px 4px 0 #D0D0D0, 6px 6px 8px rgba(0,0,0,0.15) !important; }
.join-button-outline:hover { background: #0A0A0A !important; color: #FFFFFF !important; box-shadow: 6px 6px 0 #BEBEBE, 9px 9px 12px rgba(0,0,0,0.2) !important; transform: translate(-2px, -2px); }
.join-button-outline:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #DCDCDC, 3px 3px 4px rgba(0,0,0,0.12) !important; }

/* 右侧装饰元素 */
.brutal-hero-decor { position: relative; }
.hero-graphic-element { position: relative; width: 380px; height: 380px; }
.graphic-circle { position: absolute; border: 2px solid #0A0A0A; border-radius: 50%; }
.graphic-circle-1 { width: 320px; height: 320px; top: 30px; left: 30px; border-color: rgba(10,10,10,0.15); }
.graphic-circle-2 { width: 240px; height: 240px; top: 70px; left: 70px; border: 3px solid var(--brutal-accent-red); border-style: dashed; }
.graphic-line { position: absolute; background: #0A0A0A; }
.graphic-line-1 { width: 120px; height: 2px; top: 140px; right: 0; transform: rotate(-25deg); }
.graphic-line-2 { width: 80px; height: 2px; bottom: 120px; left: 0; transform: rotate(15deg); background: var(--brutal-accent-red); }
.graphic-badge {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background: #0A0A0A; color: #FFF; padding: 24px 32px; text-align: center;
	border: 2px solid #0A0A0A; box-shadow: 8px 8px 0 #EDEDEC;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.badge-number { display: block; font-family: var(--brutal-font-serif); font-size: 56px; font-weight: 900; color: var(--brutal-accent-red); line-height: 1; }
.badge-text { display: block; font-family: var(--brutal-font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.15em; margin-top: 6px; text-transform: uppercase; }

@media (max-width: 992px) {
	.first-section { flex-direction: column; min-height: auto; padding: 40px 0 60px; }
	.home-first-left { max-width: 100%; padding-right: 0; text-align: center; }
	.slider-wrapper { margin: 0 auto 28px; }
	.slider-container { gap: 8px; }
	.slider-item { padding: 14px 8px 12px; }
	.item-desc { font-size: 32px; }
	.home-first-right { display: none; }
	.join-button { justify-content: center; }
}
@media (max-width: 768px) {
	.slider-wrapper { max-width: 100%; padding: 0 12px; }
	.slider-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tab-label { font-size: 13px; }
	.slider-item { padding: 16px 10px 14px; }
}