/* ========================================
   新贸科技 — 体验增强层 (Enhancements)
   叠加在品牌设计系统之上，纯增量、不覆盖既有内联样式
   ======================================== */

/* ===== 1. 顶部滚动进度条 ===== */
#xm-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 45%, var(--brand-accent) 100%);
  box-shadow: 0 0 12px rgba(27, 143, 212, 0.55);
  z-index: 9999;
  pointer-events: none;
  transition: transform 80ms linear;
  will-change: transform;
}

/* ===== 2. 光标跟随光晕 ===== */
#xm-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  margin-left: -180px;
  margin-top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 143, 212, 0.10) 0%, rgba(255, 193, 7, 0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
  mix-blend-mode: multiply;
}
@media (hover: hover) and (pointer: fine) {
  body:hover #xm-cursor-glow { opacity: 1; }
}

/* ===== 3. 磁吸按钮 ===== */
.xm-magnetic {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, background-color 220ms ease;
  will-change: transform;
}

/* ===== 4. 卡片辉光 ===== */
.xm-glow-card {
  position: relative;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease;
  will-change: transform;
}
.xm-glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(27, 143, 212, 0.6), transparent 45%, rgba(255, 193, 7, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.xm-glow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(27, 143, 212, 0.18), 0 6px 14px rgba(26, 26, 46, 0.08);
}
.xm-glow-card:hover::after { opacity: 1; }

/* ===== 5. 渐变流光文字 ===== */
.xm-shimmer {
  background: linear-gradient(100deg, var(--neutral-900) 30%, var(--brand-primary) 50%, var(--neutral-900) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: xm-shimmer-move 6s linear infinite;
}
@keyframes xm-shimmer-move {
  to { background-position: 200% center; }
}

/* ===== 6. 页脚二维码 ===== */
.xm-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.xm-qr-img {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  display: block;
}
.xm-qr-text {
  font-size: 0.8125rem;
  color: var(--neutral-500);
  line-height: 1.5;
}
.xm-qr-text strong {
  display: block;
  color: var(--neutral-200);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 2px;
}

/* ===== 7. 增强入场：轻微模糊到清晰 ===== */
.reveal { filter: blur(6px); }
.reveal.revealed { filter: blur(0); }

/* ===== 8. 数字计数器辉光 ===== */
.counter-number { text-shadow: 0 0 24px rgba(27, 143, 212, 0.18); }

/* ===== 9. 适配减少动画偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  #xm-cursor-glow { display: none; }
  .xm-shimmer { animation: none; }
  .reveal { filter: none; }
  .xm-glow-card:hover { transform: none; }
}