/* ========== Hero 科技感动画装饰（由 hero-visual.js 注入）========== */
:root {
	--tc: #0090ff;
	--tc-light: #40a9ff;
	--tc-rgb: 0, 144, 255;
}

.hero-visual {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* 首页：靠右对齐 */
.hero-section .hero-visual {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	transform: translateX(4%);
}

.hero-section .hv-grid {
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
}

.hero-section .hv-orbit-outer .hv-panel-pos { --radius: 170px; }
.hero-section .hv-orbit-mid   .hv-panel-pos { --radius: 120px; }
.hero-section .hv-orbit-inner .hv-panel-pos { --radius: 75px; }

.hero-section .hv-corner-tr { top: 20px; right: 12px; }
.hero-section .hv-corner-br { bottom: 20px; right: 12px; }

/* ==== 网格点阵背景（带光波扫过效果） ==== */
.hv-grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(var(--tc-rgb), .4) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	opacity: .55;
	-webkit-mask-image: radial-gradient(circle at 65% 50%, #000 0%, transparent 68%);
	mask-image: radial-gradient(circle at 65% 50%, #000 0%, transparent 68%);
}
.hv-grid::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 0% 50%, rgba(var(--tc-rgb), .35) 0%, transparent 25%);
	animation: hvGridWave 6s ease-in-out infinite;
}
@keyframes hvGridWave {
	0%, 100% { transform: translateX(-40%); opacity: .5; }
	50% { transform: translateX(140%); opacity: .9; }
}

/* ==== 脉冲波纹（从中心扩散） ==== */
.hv-pulse {
	position: absolute;
	top: 50%; left: 50%;
	width: 60px; height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	border: 1.5px solid rgba(var(--tc-rgb), .6);
	animation: hvPulseWave 4s ease-out infinite;
}
.hv-pulse-2 { animation-delay: 1.3s; }
.hv-pulse-3 { animation-delay: 2.6s; }
@keyframes hvPulseWave {
	0% {
		transform: scale(1);
		opacity: .9;
		border-width: 2px;
	}
	100% {
		transform: scale(7.5);
		opacity: 0;
		border-width: .5px;
	}
}

/* ==== 中心六边形核心（玻璃质感） ==== */
.hv-core {
	position: absolute;
	top: 50%; left: 50%;
	width: 160px; height: 160px;
	margin: -80px 0 0 -80px;
}
/* 外层光晕 */
.hv-core-aura {
	position: absolute;
	inset: -60px;
	background: radial-gradient(circle,
		rgba(var(--tc-rgb), .45) 0%,
		rgba(var(--tc-rgb), .22) 35%,
		rgba(var(--tc-rgb), .06) 60%,
		transparent 80%);
	border-radius: 50%;
	filter: blur(2px);
	animation: hvAuraBreathe 4s ease-in-out infinite;
}
@keyframes hvAuraBreathe {
	0%, 100% { transform: scale(.92); opacity: .7; }
	50%      { transform: scale(1.08); opacity: 1; }
}
/* 六边形主体 */
.hv-core-hex {
	position: absolute;
	inset: 18px;
	background: linear-gradient(145deg,
		rgba(var(--tc-rgb), .95) 0%,
		rgba(var(--tc-rgb), .78) 50%,
		rgba(var(--tc-rgb), .95) 100%);
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	box-shadow: 0 0 40px rgba(var(--tc-rgb), .7),
	            0 0 80px rgba(var(--tc-rgb), .4),
	            inset 0 0 30px rgba(255,255,255,.25);
	animation: hvHexFloat 5s ease-in-out infinite;
}
/* 六边形高光层 */
.hv-core-hex::before {
	content: '';
	position: absolute;
	inset: 3px;
	background: linear-gradient(160deg,
		rgba(255,255,255,.45) 0%,
		rgba(255,255,255,.05) 35%,
		transparent 60%);
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
/* 六边形边框旋转环 */
.hv-core-border {
	position: absolute;
	inset: 6px;
	border: 1.5px dashed rgba(255,255,255,.65);
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	animation: hvHexSpin 14s linear infinite;
}
@keyframes hvHexFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes hvHexSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
/* 中心内核发光点 */
.hv-core-dot {
	position: absolute;
	top: 50%; left: 50%;
	width: 46px; height: 46px;
	margin: -23px 0 0 -23px;
	background: radial-gradient(circle at 35% 30%,
		#fff 0%,
		var(--tc-light) 40%,
		var(--tc) 85%);
	border-radius: 50%;
	box-shadow: 0 0 22px rgba(255,255,255,.9),
	            0 0 40px rgba(var(--tc-rgb), .95),
	            0 0 70px rgba(var(--tc-rgb), .6);
	animation: hvCorePulse 2.8s ease-in-out infinite;
}
.hv-core-dot::after {
	content: '';
	position: absolute;
	inset: -4px;
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 50%;
	border-top-color: transparent;
	border-right-color: transparent;
	animation: hvSpin 3s linear infinite;
}
@keyframes hvCorePulse {
	0%, 100% { transform: scale(.88); opacity: .9; }
	50%      { transform: scale(1.12); opacity: 1; }
}

/* ==== 环绕轨道面板卡片（数据卡片围绕核心旋转） ==== */
.hv-orbit {
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
}

/* 面板定位层（由 JS rAF 驱动公转） */
.hv-panel-pos {
	position: absolute;
	top: 0; left: 0;
	width: 0; height: 0;
}

.hv-panel {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	min-width: 108px;
	padding: 8px 12px;
	background: rgba(255,255,255,.09);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 10px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 30px rgba(0,0,0,.18),
	            inset 0 1px 0 rgba(255,255,255,.15);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hv-panel .pv-label {
	font-size: 11px;
	color: rgba(255,255,255,.6);
	letter-spacing: .4px;
}
.hv-panel .pv-value {
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 10px rgba(var(--tc-rgb), .6);
	line-height: 1.2;
}
.hv-panel .pv-bar {
	width: 100%;
	height: 4px;
	background: rgba(255,255,255,.12);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 3px;
}
.hv-panel .pv-bar::after {
	content: '';
	display: block;
	height: 100%;
	width: var(--bar, 70%);
	background: linear-gradient(90deg, var(--tc-light), #fff);
	border-radius: 2px;
	box-shadow: 0 0 6px rgba(var(--tc-rgb), .8);
}

/* 轨道半径变量（JS 读取用于随机定位） */
.hv-orbit-outer .hv-panel-pos { --radius: 170px; }
.hv-orbit-mid   .hv-panel-pos { --radius: 120px; }
.hv-orbit-inner .hv-panel-pos { --radius: 75px; }

/* ==== SVG 数据连接线 ==== */
.hv-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hv-lines line {
	stroke: rgba(var(--tc-rgb), .45);
	stroke-width: 1;
	stroke-dasharray: 4 6;
	animation: hvDashFlow 3s linear infinite;
}
@keyframes hvDashFlow {
	to { stroke-dashoffset: -20; }
}

/* ==== 浮动装饰粒子（多样形状） ==== */
.hv-particle {
	position: absolute;
	pointer-events: none;
}
.hv-p-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(var(--tc-rgb), .85);
	box-shadow: 0 0 10px rgba(var(--tc-rgb), .9);
	animation: hvParticleFloat 7s ease-in-out infinite;
}
/* 浮动与旋转拆到不同层，避免 transform 互相覆盖（p2/p5 六边形、p3/p6 方框） */
.hv-p-hex {
	width: 12px; height: 12px;
	background: transparent;
	animation: hvParticleFloat 8s ease-in-out infinite;
}
.hv-p-hex::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(var(--tc-rgb), .7);
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	animation: hvSpin 18s linear infinite;
}
.hv-p-square {
	width: 10px; height: 10px;
	border: none;
	background: transparent;
	animation: hvParticleFloat 6s ease-in-out infinite;
}
.hv-p-square::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border: 1.5px solid rgba(var(--tc-rgb), .85);
	box-sizing: border-box;
	animation: hvSquareSpin 12s linear infinite;
}
@keyframes hvSquareSpin {
	from { transform: rotate(45deg); }
	to { transform: rotate(405deg); }
}
@keyframes hvParticleFloat {
	0%, 100% { transform: translateY(0) translateX(0); opacity: .5; }
	25%      { transform: translateY(-14px) translateX(6px); opacity: 1; }
	50%      { transform: translateY(-4px) translateX(-4px); opacity: .7; }
	75%      { transform: translateY(-20px) translateX(3px); opacity: 1; }
}

.hv-particle.p1 { top: 14%; left: 18%; animation-delay: 0s; }
.hv-particle.p2 { top: 78%; left: 24%; animation-delay: .8s; }
.hv-particle.p3 { top: 22%; left: 78%; animation-delay: 1.6s; }
.hv-particle.p4 { top: 72%; left: 82%; animation-delay: 2.4s; }
.hv-particle.p5 { top: 48%; left: 10%; animation-delay: 3.2s; }
.hv-particle.p6 { top: 10%; left: 54%; animation-delay: 4s; }
.hv-particle.p7 { top: 88%; left: 52%; animation-delay: 4.8s; }

/* ==== HUD 右侧角框装饰 ==== */
.hv-corner {
	position: absolute;
	width: 44px; height: 44px;
	border: 1.5px solid rgba(var(--tc-rgb), .8);
	transition: all .3s;
}

.hv-corner-br {
	bottom: 20px; right: 20px;
	border-left: none; border-top: none;
}
.hv-corner-br::before { top: -4px; right: 100%; width: 6px; height: 1.5px; margin-right: 4px; }
.hv-corner-br::after  { bottom: 100%; right: 0; width: 1.5px; height: 6px; margin-bottom: 4px; }

.hv-corner-tr {
	top: 20px; right: 20px;
	border-left: none; border-bottom: none;
}
.hv-corner-tr::before { top: 0; right: 100%; width: 6px; height: 1.5px; margin-right: 4px; }
.hv-corner-tr::after  { top: 100%; right: 0; width: 1.5px; height: 6px; margin-top: 4px; }

/* ==== 独立浮动光点 ==== */
.hv-glow {
	position: absolute;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--tc-light);
	box-shadow: 0 0 10px var(--tc-light), 0 0 20px rgba(var(--tc-rgb), .6);
	opacity: .6;
}
.hv-glow-1 { top: 15%; left: 20%; }
.hv-glow-2 { top: 70%; left: 30%; }
.hv-glow-3 { top: 25%; left: 75%; }
.hv-glow-4 { top: 80%; left: 70%; }
.hv-glow-5 { top: 45%; left: 85%; }

/* ==== 通用旋转动画 ==== */
@keyframes hvSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@media (max-width: 1280px) {
	.hero-visual { display: none; }
	.hero-section .hero-right { display: none; }
	.hero-section .hero-left {
		width: 100%;
		max-width: 640px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-visual * { animation: none !important; }
	.hv-panel, .hv-orbit, .hv-orbit *, .hv-core-border { animation: none !important; }
}