/* ============ 适途官网 · 视觉特效增强层 ============ */
/* 依赖 js/effects.js 写入的 CSS 变量 --mx / --my 与 .fx-card 类 */

/* ---------- 1. 顶部滚动进度条 ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #00d4ff, #6e8eff 55%, #a86eff);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.65);
  transition: width 0.1s linear;
}

/* ---------- 2. 卡片：光标跟随高光 ---------- */
.fx-card { position: relative; }
.fx-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 212, 255, 0.16), rgba(110, 142, 255, 0.06) 40%, transparent 65%);
  transition: opacity 0.35s ease;
}
.fx-card:hover::after { opacity: 1; }
.client-logo-card.fx-card::after {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 212, 255, 0.12), transparent 62%);
}

/* ---------- 3. 新闻缩略图：斜向扫光 ---------- */
.news-thumb { position: relative; overflow: hidden; }
.news-thumb::after {
  content: ""; position: absolute; top: -60%; left: -80%;
  width: 45%; height: 220%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(22deg) translateX(-140%);
  transition: transform 0.75s cubic-bezier(0.25, 0.8, 0.3, 1);
}
.news-card:hover .news-thumb::after { transform: rotate(22deg) translateX(430%); }

/* ---------- 4. 内页大标题：流光渐变 ---------- */
.page-banner h1 {
  background: linear-gradient(90deg, #ffffff 0%, #8fe3ff 28%, #ffffff 52%, #c6b3ff 78%, #ffffff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fx-shine 8s linear infinite;
}
@keyframes fx-shine { to { background-position: -220% 0; } }

/* ---------- 5. 内页 banner：呼吸光晕 ---------- */
.page-banner { position: relative; overflow: hidden; }
.page-banner::before {
  content: ""; position: absolute; left: 50%; top: -40%;
  width: 900px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent 62%);
  pointer-events: none; animation: fx-breathe 7s ease-in-out infinite;
}
.page-banner > .container { position: relative; z-index: 1; }
@keyframes fx-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.12); }
}

/* ---------- 6. 客户 logo 卡：hover 微放大 ---------- */
.client-logo-card .logo-svg { transition: transform 0.35s ease; }
.client-logo-card:hover .logo-svg { transform: scale(1.07); }
.client-logo-card .client-logo-name { transform: translateY(2px); }
.client-logo-card:hover .client-logo-name { transform: translateY(0); }

/* ---------- 7. 区块小标题呼吸点 ---------- */
.kicker { position: relative; padding-left: 14px; }
.kicker::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--brand);
  animation: fx-pulse 2.4s ease-out infinite;
}
@keyframes fx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 212, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}

/* ---------- 8. 进场卡片：GPU 加速 ---------- */
.reveal { will-change: opacity, transform; }

/* ---------- 9. 尊重系统「减少动效」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
  .fx-card::after, .news-thumb::after { display: none; }
  .page-banner h1 {
    background: none; -webkit-text-fill-color: currentColor;
    color: inherit; animation: none;
  }
  .page-banner::before, .kicker::before { animation: none; }
  .client-logo-card:hover .logo-svg { transform: none; }
}