/* ============================================
   炫酷效果 v2 加码 · fx-v2.css
   W1 多色渐变位移(升级 V2)/ W3 极光(升级 V3)/ W4 霓虹边框 / W5 marquee
   ============================================ */

/* ============ W1 多色渐变位移 ============ */
.fx-shine-v2 {
  background: linear-gradient(
    90deg,
    #FFFFFF 0%,
    #00B4FF 18%,
    #FFFFFF 32%,
    #E60012 50%,
    #FFFFFF 68%,
    #00B4FF 82%,
    #FFFFFF 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fxShineV2 4.5s linear infinite;
}
@keyframes fxShineV2 {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

/* 副标题也来一段渐变 */
.fx-shine-soft {
  background: linear-gradient(
    90deg,
    #C9D0E0 0%,
    #FFFFFF 50%,
    #C9D0E0 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fxShineV2 6s linear infinite;
}

/* ============ W3 Hero 极光(aurora) ============ */
.fx-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.85;
}
.fx-aurora::before,
.fx-aurora::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  left: 0;
  filter: blur(60px);
}
.fx-aurora::before {
  background: linear-gradient(90deg,
    rgba(0, 180, 255, 0)   0%,
    rgba(0, 180, 255, 0.5) 25%,
    rgba(0, 180, 255, 0)   50%,
    rgba(140, 100, 220, 0) 55%,
    rgba(140, 100, 220, 0.35) 80%,
    rgba(140, 100, 220, 0)  100%);
  animation: auroraSlide 12s linear infinite;
}
.fx-aurora::after {
  background: linear-gradient(90deg,
    rgba(230, 0, 18, 0)    0%,
    rgba(230, 0, 18, 0.35) 18%,
    rgba(230, 0, 18, 0)    45%,
    rgba(0, 180, 255, 0)   55%,
    rgba(0, 180, 255, 0.4) 75%,
    rgba(0, 180, 255, 0)   100%);
  animation: auroraSlide 16s linear infinite reverse;
}
@keyframes auroraSlide {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* 中央脉动光晕(在 v1 fx-nebula 之上,加亮) */
.fx-aurora-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: auroraPulse 5s ease-in-out infinite;
}
@keyframes auroraPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* 隐藏 v1 老的 fx-nebula(被 aurora 取代) */
.fx-nebula { display: none; }

/* ============ W4 霓虹边框(neon border) ============ */
.fx-neon {
  position: relative;
  background: var(--grad-accent);
  color: #fff;
  z-index: 0;
  isolation: isolate;
}
.fx-neon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    #00B4FF 0deg,
    #E60012 90deg,
    #00FFC8 180deg,
    #FF9F1C 270deg,
    #00B4FF 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: neonSpin 3s linear infinite;
  z-index: -1;
  opacity: 0.8;
}
.fx-neon:hover::before {
  animation-duration: 1.4s;
  opacity: 1;
}
.fx-neon:hover {
  box-shadow: 0 0 32px rgba(0, 180, 255, 0.50), 0 0 64px rgba(0, 180, 255, 0.20);
}
@keyframes neonSpin {
  to { transform: rotate(360deg); }
}

/* ============ W5 客户案例 marquee ============ */
.fx-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  margin: 32px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.fx-marquee:hover .fx-marquee-track {
  animation-play-state: paused;
}
.fx-marquee-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: marqueeScroll 36s linear infinite;
}
.fx-marquee-item {
  flex: 0 0 auto;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.fx-marquee-item:hover {
  border-color: var(--border-accent);
  color: var(--text-1);
  background: var(--bg-card-hover);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

@media (max-width: 768px) {
  .fx-aurora { opacity: 0.5; }
  .fx-aurora-glow { display: none; }
  .fx-neon::before { display: none; }  /* 移动端不旋转边框,纯色 */
}