/* ============================================================
   fx.css —— 站内特效样式（Radar / 线波 / 电光标 / 像素拖尾）
   全部黑白、极低对比，贴合暖白纸底 + 纯黑线的设计语言
   ============================================================ */

/* ---------- 1. Hero 雷达底纹 ---------- */
.fx-radar{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:0;
  transition:opacity 1.4s ease;
  mix-blend-mode:multiply;
}
.fx-radar.is-on{ opacity:.5; }
.hero-body, .hero-foot{ position:relative; z-index:1; }

/* ---------- 2. 服务器卡片里的线波 ---------- */
.art-wave svg path{
  stroke-dasharray:1200;
  stroke-dashoffset:0;
  opacity:.85;
  transition:opacity .3s ease;
}
.fx-waves .art-wave svg path{
  animation:fx-wave-drift 9s ease-in-out infinite alternate;
}
.fx-waves .art-wave svg path:nth-child(2){ animation-duration:12s; animation-delay:-2s; opacity:.5; }
.fx-waves .art-wave svg path:nth-child(3){ animation-duration:7s;  animation-delay:-4s; opacity:.28; }
@keyframes fx-wave-drift{
  from{ transform:translateX(-14px) scaleY(1); stroke-dashoffset:0; }
  to  { transform:translateX(14px)  scaleY(1.04); stroke-dashoffset:-90; }
}

/* ---------- 3. 品牌方块的电光描边 ---------- */
.brand-mark{ position:relative; }
.brand-mark::after{
  content:""; position:absolute; inset:-4px;
  border:1px solid var(--ink);
  opacity:0; pointer-events:none;
}
.fx-spark .brand-mark::after{ animation:fx-spark 1.05s steps(1,end) 1; }
@keyframes fx-spark{
  0%{opacity:0; transform:scale(.94)}
  9%{opacity:1; transform:scale(1)}
  16%{opacity:0}
  22%{opacity:.9}
  30%{opacity:0}
  46%{opacity:1; transform:scale(1.06)}
  58%{opacity:0}
  74%{opacity:.7; transform:scale(1)}
  86%{opacity:0}
  100%{opacity:0}
}

/* ---------- 4. 像素拖尾画布 ---------- */
.fx-trail{
  position:fixed; inset:0; z-index:60;
  pointer-events:none;
  width:100%; height:100%;
}

/* 减少动效偏好：一律关掉 */
@media (prefers-reduced-motion: reduce){
  .fx-radar{ display:none; }
  .fx-waves .art-wave svg path{ animation:none; }
  .fx-spark .brand-mark::after{ animation:none; }
  .fx-trail{ display:none; }
}