/* ============================================================
   animations.css — 恒帆科技主题动画
   ============================================================ */

/* ---------- 机器人容器：浮动 ---------- */
.robot-container {
  animation: robotFloat 3.5s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.25));
}
@keyframes robotFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

/* ---------- 天线尖端闪烁 ---------- */
.robot-antenna-tip {
  animation: antennaBlink 1.8s ease-in-out infinite;
}
@keyframes antennaBlink {
  0%, 45%, 55%, 100% { fill: #00d4ff; filter: drop-shadow(0 0 6px #00d4ff); }
  50%                { fill: #7c3aed; filter: drop-shadow(0 0 10px #7c3aed); }
}

/* ---------- 眼睛发光脉冲 ---------- */
.robot-eye-glow {
  animation: eyeGlow 2.2s ease-in-out infinite;
}
@keyframes eyeGlow {
  0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 4px #00d4ff); }
  50%       { opacity: 1;   filter: drop-shadow(0 0 12px #00d4ff) drop-shadow(0 0 24px rgba(0,212,255,0.5)); }
}

/* ---------- 左臂摆动 ---------- */
.robot-arm-left {
  transform-origin: 32px 138px;
  animation: armLeft 4s ease-in-out infinite;
}
@keyframes armLeft {
  0%, 100% { transform: rotate(-6deg); }
  50%       { transform: rotate(6deg); }
}

/* ---------- 右臂摆动（反相） ---------- */
.robot-arm-right {
  transform-origin: 168px 138px;
  animation: armRight 4s ease-in-out infinite;
}
@keyframes armRight {
  0%, 100% { transform: rotate(6deg); }
  50%       { transform: rotate(-6deg); }
}

/* ---------- 胸口能量核心 ---------- */
.robot-core {
  animation: coreBreath 2.8s ease-in-out infinite;
}
@keyframes coreBreath {
  0%, 100% { fill: #00d4ff; filter: drop-shadow(0 0 6px #00d4ff); r: 14; }
  50%       { fill: #7c3aed; filter: drop-shadow(0 0 16px #7c3aed); r: 17; }
}

/* ---------- 胸口小灯点闪烁 ---------- */
.robot-light-1 { animation: lightBlink 1.1s ease-in-out infinite alternate; }
.robot-light-2 { animation: lightBlink 1.4s ease-in-out 0.3s infinite alternate; }
.robot-light-3 { animation: lightBlink 0.9s ease-in-out 0.6s infinite alternate; }
@keyframes lightBlink {
  from { opacity: 0.3; fill: #00d4ff; }
  to   { opacity: 1;   fill: #7c3aed; }
}

/* ---------- 头部光环旋转 ---------- */
.robot-halo {
  transform-origin: 100px 90px;
  animation: haloSpin 12s linear infinite;
}
@keyframes haloSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- 打字光标闪烁 ---------- */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: #00d4ff;
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursorBlink 0.9s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---------- 首页元素淡入上浮 ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.25s; }
.fade-up-3 { animation-delay: 0.4s; }
.fade-up-4 { animation-delay: 0.55s; }
.fade-up-5 { animation-delay: 0.7s; }

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

/* ---------- 卡片滚动入场（Intersection Observer 触发） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 渐变边框卡片 ---------- */
.card-gradient-border {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2px;
  background-clip: padding-box;
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,212,255,0.4), rgba(124,58,237,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- 光束扫过动画（用于数字/统计区） ---------- */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: shimmerMove 2.5s ease-in-out infinite;
}
@keyframes shimmerMove {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* ---------- 脉冲圆环（用于 CTA/联系按钮） ---------- */
.pulse-ring {
  position: relative;
  display: inline-flex;
}
.pulse-ring::before, .pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid var(--color-primary);
  animation: pulseRing 2s ease-out infinite;
  pointer-events: none;
}
.pulse-ring::after { animation-delay: 1s; }
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- 首页英雄区渐变 ---------- */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-glow-1 {
  width: 500px; height: 500px;
  background: rgba(0, 212, 255, 0.06);
  top: -100px; left: -150px;
  animation: glowDrift1 8s ease-in-out infinite;
}
.hero-glow-2 {
  width: 400px; height: 400px;
  background: rgba(124, 58, 237, 0.07);
  bottom: -80px; right: -100px;
  animation: glowDrift2 10s ease-in-out infinite;
}
@keyframes glowDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(30px, 20px); }
}
@keyframes glowDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-25px, -15px); }
}

/* ---------- 首页滚动提示箭头 ---------- */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: scrollHint 2s ease-in-out infinite;
  color: var(--color-muted);
  font-size: 0.8rem;
}
.scroll-hint-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  animation: scrollArrow 1.5s ease-in-out infinite;
}
@keyframes scrollArrow {
  0%, 100% { opacity: 0.3; transform: rotate(45deg) translateY(-3px); }
  50%       { opacity: 1;   transform: rotate(45deg) translateY(3px); }
}