/* =============================================
   CSS 动画机器人 - Hero 区
   ============================================= */
.css-robot-wrap {
  background: linear-gradient(135deg, #020818 0%, #050d1f 50%, #020c1a 100%) !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden !important;
}

/* 整体容器 */
.css-robot {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* 背景光晕 */
.robot-glow {
  position: absolute;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0,120,255,0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: glowPulse 3s ease-in-out infinite;
  top: 50%; left: 50%; transform: translate(-50%, -55%);
}
@keyframes glowPulse {
  0%,100% { transform: translate(-50%,-55%) scale(1); opacity:0.6; }
  50%      { transform: translate(-50%,-55%) scale(1.2); opacity:1; }
}

/* 粒子 */
.robot-particles { position:absolute; inset:0; pointer-events:none; }
.robot-particles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #00c8ff;
  animation: floatParticle 4s ease-in-out infinite;
}
.robot-particles span:nth-child(1)  { left:10%; top:20%; animation-delay:0s;    animation-duration:3.5s; background:#00e5ff; }
.robot-particles span:nth-child(2)  { left:80%; top:15%; animation-delay:0.6s;  animation-duration:4s;   background:#7b2fff; }
.robot-particles span:nth-child(3)  { left:25%; top:70%; animation-delay:1.2s;  animation-duration:3s;   width:3px; height:3px; }
.robot-particles span:nth-child(4)  { left:70%; top:75%; animation-delay:0.4s;  animation-duration:4.5s; background:#00e5ff; }
.robot-particles span:nth-child(5)  { left:55%; top:10%; animation-delay:1.8s;  animation-duration:3.2s; background:#ff6b35; width:3px; height:3px; }
.robot-particles span:nth-child(6)  { left:5%;  top:55%; animation-delay:0.9s;  animation-duration:3.8s; background:#00ff9d; }
.robot-particles span:nth-child(7)  { left:88%; top:45%; animation-delay:2.1s;  animation-duration:4.2s; background:#00c8ff; width:3px; height:3px; }
.robot-particles span:nth-child(8)  { left:40%; top:85%; animation-delay:1.5s;  animation-duration:3.6s; background:#7b2fff; }
@keyframes floatParticle {
  0%,100% { transform: translateY(0) scale(1); opacity:0.3; }
  50%      { transform: translateY(-20px) scale(1.5); opacity:1; }
}

/* 机器人主体包裹 - 整体悬浮动画 */
.robot-body-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  animation: robotFloat 4s ease-in-out infinite;
  margin-top: 20px;
}
@keyframes robotFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* 天线 */
.robot-antenna {
  display: flex; flex-direction: column; align-items: center;
}
.antenna-pole {
  width: 4px; height: 28px;
  background: linear-gradient(to top, #1a5080, #00c8ff);
  border-radius: 2px;
}
.antenna-ball {
  width: 12px; height: 12px;
  background: #00e5ff;
  border-radius: 50%;
  box-shadow: 0 0 10px #00e5ff, 0 0 20px #00c8ff;
  animation: antennaBlink 1.5s ease-in-out infinite;
  margin-top: -6px;
}
@keyframes antennaBlink {
  0%,100% { box-shadow: 0 0 10px #00e5ff, 0 0 20px #00c8ff; opacity:1; }
  50%      { box-shadow: 0 0 3px #00e5ff; opacity:0.4; }
}

/* 头部 */
.robot-head {
  width: 100px; height: 80px;
  background: linear-gradient(145deg, #1a3a6e, #0d2650);
  border-radius: 20px;
  border: 1.5px solid rgba(0,200,255,0.4);
  box-shadow: 0 0 20px rgba(0,120,255,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; position: relative;
  margin-top: -8px;
}
.head-side-light {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 24px;
  background: linear-gradient(to bottom, transparent, #00c8ff, transparent);
  border-radius: 3px;
  animation: sideLightPulse 2s ease-in-out infinite;
}
.head-side-light.left  { left: -3px; }
.head-side-light.right { right: -3px; animation-delay: 0.3s; }
@keyframes sideLightPulse {
  0%,100% { opacity:0.3; } 50% { opacity:1; }
}

/* 眼睛 */
.robot-eyes { display: flex; gap: 18px; }
.robot-eye {
  width: 24px; height: 18px;
  background: #001833;
  border-radius: 6px;
  border: 1px solid #0080cc;
  position: relative; overflow: hidden;
}
.robot-eye::after {
  content: '';
  position: absolute;
  width: 14px; height: 12px;
  background: radial-gradient(circle, #00e5ff 30%, #0066ff 100%);
  border-radius: 4px;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  box-shadow: 0 0 8px #00e5ff;
  animation: eyeGlow 2s ease-in-out infinite;
}
.robot-eye.right::after { animation-delay: 0.4s; }
@keyframes eyeGlow {
  0%,100% { opacity:1; box-shadow: 0 0 8px #00e5ff; }
  50%      { opacity:0.5; box-shadow: 0 0 3px #00c8ff; }
}

/* 嘴巴LED */
.robot-mouth { display: flex; gap: 4px; }
.robot-mouth span {
  width: 9px; height: 5px;
  background: #00c8a0;
  border-radius: 2px;
  animation: mouthLed 1.2s ease-in-out infinite;
}
.robot-mouth span:nth-child(1) { animation-delay:0s; }
.robot-mouth span:nth-child(2) { animation-delay:0.15s; }
.robot-mouth span:nth-child(3) { animation-delay:0.3s; }
.robot-mouth span:nth-child(4) { animation-delay:0.15s; }
.robot-mouth span:nth-child(5) { animation-delay:0s; }
@keyframes mouthLed {
  0%,100% { opacity:0.3; transform:scaleY(0.6); }
  50%      { opacity:1;   transform:scaleY(1); }
}

/* 颈部 */
.robot-neck {
  width: 26px; height: 14px;
  background: linear-gradient(to bottom, #1a3a6e, #112d56);
  border-left: 1px solid rgba(0,150,200,0.3);
  border-right: 1px solid rgba(0,150,200,0.3);
}

/* 躯干 */
.robot-torso {
  width: 120px; height: 130px;
  background: linear-gradient(145deg, #1a3d70, #0d2550);
  border-radius: 14px;
  border: 1.5px solid rgba(0,180,255,0.3);
  box-shadow: 0 0 25px rgba(0,100,255,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

/* 胸口面板 */
.chest-panel {
  width: 66px; height: 78px;
  background: #050f26;
  border-radius: 8px;
  border: 1px solid rgba(0,200,255,0.5);
  box-shadow: 0 0 12px rgba(0,180,255,0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  padding: 8px;
}
.chest-line {
  width: 100%; height: 7px;
  background: linear-gradient(to right, #003060, #00c8ff, #003060);
  border-radius: 3px;
  animation: chestScan 2s ease-in-out infinite;
}
.chest-line:nth-child(2) { animation-delay: 0.4s; }
.chest-line:nth-child(3) { animation-delay: 0.8s; }
@keyframes chestScan {
  0%,100% { opacity:0.3; } 50% { opacity:1; }
}
.chest-orb {
  width: 18px; height: 18px;
  background: radial-gradient(circle, #00e5ff, #0055cc);
  border-radius: 50%;
  box-shadow: 0 0 12px #00c8ff;
  animation: orbPulse 1.8s ease-in-out infinite;
}
@keyframes orbPulse {
  0%,100% { transform:scale(1);   box-shadow: 0 0 12px #00c8ff; }
  50%      { transform:scale(1.25); box-shadow: 0 0 22px #00e5ff, 0 0 38px rgba(0,200,255,0.4); }
}

/* 手臂 */
.robot-arm {
  position: absolute; top: 10px;
  display: flex; flex-direction: column; align-items: center;
}
.robot-arm.left  { left: -34px; animation: armSwayL 4s ease-in-out infinite; transform-origin: top center; }
.robot-arm.right { right: -34px; animation: armSwayR 4s ease-in-out infinite; transform-origin: top center; }
@keyframes armSwayL {
  0%,100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@keyframes armSwayR {
  0%,100% { transform: rotate(5deg); }
  50%      { transform: rotate(-5deg); }
}
.arm-upper {
  width: 24px; height: 40px;
  background: linear-gradient(145deg, #1e4a80, #0d2a58);
  border-radius: 10px 10px 4px 4px;
  border: 1px solid rgba(0,160,220,0.3);
}
.arm-joint {
  width: 20px; height: 11px;
  background: #0d2245;
  border-radius: 4px;
  border: 1px solid rgba(0,180,255,0.4);
}
.arm-lower {
  width: 22px; height: 34px;
  background: linear-gradient(145deg, #183c6a, #0a2048);
  border-radius: 4px 4px 8px 8px;
  border: 1px solid rgba(0,140,200,0.3);
}
.arm-hand {
  width: 26px; height: 18px;
  background: radial-gradient(ellipse, #1a4070, #0d2448);
  border-radius: 6px;
  border: 1px solid rgba(0,200,255,0.4);
  box-shadow: 0 0 8px rgba(0,180,255,0.3);
}

/* 腰部 */
.robot-waist {
  width: 88px; height: 16px;
  background: linear-gradient(to right, #0d2040, #1a3a6e, #0d2040);
  border-radius: 4px;
  border: 1px solid rgba(0,150,200,0.3);
}

/* 腿部 */
.robot-legs { display: flex; gap: 10px; }
.robot-leg  { display: flex; flex-direction: column; align-items: center; }
.leg-upper {
  width: 34px; height: 46px;
  background: linear-gradient(145deg, #1a3d70, #0d2550);
  border-radius: 6px 6px 2px 2px;
  border: 1px solid rgba(0,160,220,0.25);
}
.leg-knee {
  width: 30px; height: 12px;
  background: #0d2040;
  border-radius: 4px;
  border: 1px solid rgba(0,180,255,0.35);
}
.leg-lower {
  width: 30px; height: 40px;
  background: linear-gradient(145deg, #162e58, #0a1e40);
  border-radius: 2px 2px 4px 4px;
  border: 1px solid rgba(0,140,200,0.25);
}
.leg-foot {
  width: 40px; height: 15px;
  background: linear-gradient(to right, #0d2245, #1a3a6e, #0d2245);
  border-radius: 4px 4px 7px 7px;
  border: 1px solid rgba(0,160,220,0.3);
  box-shadow: 0 4px 14px rgba(0,100,255,0.25);
}

/* 地面光圈 */
.robot-shadow {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 22px;
  background: radial-gradient(ellipse, rgba(0,150,255,0.28) 0%, transparent 70%);
  border-radius: 50%;
  animation: shadowPulse 4s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { opacity:0.5; transform:translateX(-50%) scaleX(1); }
  50%      { opacity:0.9; transform:translateX(-50%) scaleX(1.15); }
}

/* HUD 浮动标签 */
.hud-panel {
  position: absolute;
  background: rgba(0,20,60,0.85);
  border: 1px solid rgba(0,180,255,0.4);
  border-radius: 6px;
  padding: 5px 10px;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: #00c8ff;
  font-family: monospace; letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.hud-panel.top-left  { top: 20px; left: 16px; animation: hudFloat 3s ease-in-out infinite; }
.hud-panel.top-right { top: 20px; right: 16px; animation: hudFloat 3s ease-in-out infinite 1s; }
@keyframes hudFloat {
  0%,100% { transform:translateY(0); opacity:0.8; }
  50%      { transform:translateY(-5px); opacity:1; }
}
.hud-dot {
  width: 6px; height: 6px;
  background: #00ff9d;
  border-radius: 50%;
  box-shadow: 0 0 6px #00ff9d;
  animation: hudDotBlink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hudDotBlink {
  0%,100% { opacity:1; } 50% { opacity:0.2; }
}