/* ============================================
   炫酷 v3 首屏动感 · fx-v3.css
   解决"首屏太静"问题:加快节奏 + 加主体动效
   ============================================ */

/* 1. 加快 W1 多色渐变位移 (4.5s → 2.5s) */
.fx-shine-v2 {
  animation-duration: 2.5s !important;
  background-size: 280% 100% !important;
}
/* 副标题也加快 */
.fx-shine-soft {
  animation-duration: 3.5s !important;
}

/* 2. 加快 W3 极光 (12-16s → 4-6s) */
.fx-aurora::before {
  animation-duration: 4.5s !important;
}
.fx-aurora::after {
  animation-duration: 5.5s !important;
}

/* 3. 中央脉动光晕加强 (5s → 2.5s + 范围加大) */
.fx-aurora-glow {
  width: 1100px !important;
  height: 1100px !important;
  animation-duration: 2.5s !important;
  background: radial-gradient(circle,
    rgba(0, 180, 255, 0.18) 0%,
    rgba(0, 180, 255, 0.06) 30%,
    transparent 60%) !important;
}

/* 4. Hero 标题加"光标闪烁"指示器 */
.fx-shine-v2::after {
  content: '|';
  display: inline-block;
  margin-left: 4px;
  color: var(--accent);
  font-weight: 300;
  -webkit-text-fill-color: var(--accent);
  animation: cursorBlink 0.9s step-end infinite;
}
@keyframes cursorBlink {
  50% { opacity: 0; }
}

/* 5. Hero 副标题加"打字机"循环 */
.hero-lead {
  position: relative;
  display: inline-block;
  max-width: 720px;
}
.hero-lead::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 24px;
  background: var(--accent);
  animation: cursorBlink 0.9s step-end infinite;
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.60);
}

/* 6. 按钮加发光呼吸效果 */
.btn-primary {
  position: relative;
  overflow: visible;
  animation: btnBreathe 2.5s ease-in-out infinite;
}
@keyframes btnBreathe {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(0, 180, 255, 0.30),
      0 0 0 0 rgba(0, 180, 255, 0.50);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(0, 180, 255, 0.50),
      0 0 0 8px rgba(0, 180, 255, 0);
  }
}

/* 7. Stats 数字旁边加 ping 圈(红色波纹) */
.stat {
  position: relative;
}
.stat::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 20px;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(230, 0, 18, 0.6);
  animation: pingDot 1.5s ease-out infinite;
}
@keyframes pingDot {
  0% { box-shadow: 0 0 0 0 rgba(230, 0, 18, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(230, 0, 18, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 0, 18, 0); }
}

/* 8. Hero badge 加轻微入场闪烁(每 4s 一次) */
.hero-badge {
  animation: badgeFlash 4s ease-in-out infinite;
}
@keyframes badgeFlash {
  0%, 90%, 100% {
    box-shadow: 0 0 0 0 rgba(230, 0, 18, 0);
    border-color: var(--border);
  }
  45% {
    box-shadow: 0 0 20px 0 rgba(230, 0, 18, 0.20);
    border-color: rgba(230, 0, 18, 0.40);
  }
}

/* 9. Hero 标题入场(已移除 — 风险大于收益,如果浏览器中途截图会看到模糊) */

/* 10. Hero 背景加一个缓慢旋转的渐变环 */
.fx-aurora-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(0, 180, 255, 0.20) 25%,
    transparent 50%,
    rgba(230, 0, 18, 0.15) 75%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
  animation: ringRotate 8s linear infinite;
  filter: blur(40px);
  opacity: 0.7;
}
@keyframes ringRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 11. stats 数字加 0.6s 入场(配合 counter-up) */
.stat-num {
  animation: numGlow 2s ease-in-out infinite;
}
@keyframes numGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 20px rgba(0, 180, 255, 0.30); }
}

/* 12. Marquee 加快 (36s → 22s) */
.fx-marquee-track {
  animation-duration: 22s !important;
}

/* ============ 兼容 reduced-motion(fx-compat.js 已接管,这里删掉) ============ */
/* 旧的 reduced-motion 媒体查询已删除,统一由 fx-compat.js + body.fx-mode-* 控制 */

@media (max-width: 768px) {
  .fx-aurora-ring { display: none; }
  .stat::before { display: none; }  /* 移动端不显示 ping 圈 */
}