/**
 * ============================================================
 *  enhance.css · 四核心页通用微交互（仅动效与质感，不改布局）
 * ============================================================
 */

/* ---------- 1. Hero / Banner 氛围 ---------- */
.future-hero .hero-media {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.page-banner {
  transition: background-position .35s cubic-bezier(.22, 1, .36, 1);
}

.future-hero .hero-content > *,
.page-banner .inner > * {
  will-change: transform, opacity;
}

/* 关键字高亮更克制：淡入下划线 */
.hero-kicker {
  position: relative;
}

/* ---------- 2. 按钮 / 链接反馈 ---------- */
.btn,
.btn-primary,
.btn-outline,
.text-link,
.btn-submit,
.btn-cta {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .3s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn:active,
.btn-primary:active,
.btn-outline:active,
.btn-submit:active {
  transform: translateY(1px) scale(.99);
}

/* 文字链接箭头滑动 */
.text-link {
  gap: 10px;
}
.text-link::after {
  transition: transform .3s ease;
}
.text-link:hover::after {
  transform: translateX(4px);
}

/* ---------- 3. 卡片通用质感 ---------- */
.wx-type-card,
.web-type-card,
.sec-service-card,
.wx-feature-card,
.home-article-item,
.case-card-new,
.product-panel {
  will-change: transform, box-shadow;
}

/* 鼠标跟随光晕（JS 加 .has-pointer-glow） */
.float-glow {
  position: absolute;
  pointer-events: none;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 94, 239, .1), transparent 70%);
  filter: blur(18px);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}

.has-pointer-glow {
  position: relative;
  overflow: hidden;
}

.has-pointer-glow:hover .float-glow {
  opacity: 1;
}

/* ---------- 4. 图标微动 ---------- */
.wx-type-icon,
.wx-adv-icon,
.web-type-icon,
.sec-service-icon,
.wx-feature-icon,
.product-panel iconify-icon {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .3s ease, background-color .3s ease, border-color .3s ease;
}

.wx-type-card:hover .wx-type-icon,
.web-type-card:hover .web-type-icon,
.sec-service-card:hover .sec-service-icon,
.wx-feature-card:hover .wx-feature-icon {
  transform: translateY(-4px) rotate(-4deg) scale(1.04);
}

.wx-adv-item:hover .wx-adv-icon,
.web-adv-item:hover .web-adv-icon {
  transform: translateY(-3px);
  color: #0f5bff;
}

/* ---------- 5. 错峰滚动显现已在 common.js 处理 ---------- */

/* ---------- 6. 列表项更细腻的反馈 ---------- */
.home-article-item {
  position: relative;
}

.home-article-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #155eef;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.home-article-item:hover::before {
  transform: scaleY(1);
}

/* ---------- 7. 多端平台画廊 ---------- */
.platform-gallery {
  scroll-behavior: smooth;
}

.platform-panel {
  will-change: transform;
}

/* ---------- 8. 信任数据 ---------- */
.trust-item strong {
  transition: color .3s ease, transform .3s ease;
}

.trust-item:hover strong {
  color: #155eef;
  transform: translateY(-2px);
}

/* ---------- 9. CTA 区 ---------- */
.cta-band {
  position: relative;
}

.cta-band .btn {
  transition: transform .3s ease, box-shadow .35s ease;
}

.cta-band:hover .btn-outline {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 34px rgba(21, 94, 239, .22);
}

/* ---------- 10. 降低重复感：卡片 hover 加深层次 ---------- */
.wx-type-card:hover,
.web-type-card:hover,
.sec-service-card:hover,
.wx-feature-card:hover,
.home-article-item:hover {
  box-shadow: 0 20px 52px rgba(21, 48, 87, .1);
}

/* 兼容 tilt 卡片：JS 写 transform 时 CSS hover 不抢 */
.tilt-card:hover {
  box-shadow: 0 24px 60px rgba(21, 48, 87, .14);
}

@media (prefers-reduced-motion: reduce) {
  .future-hero .hero-media,
  .page-banner,
  .wx-type-icon,
  .wx-adv-icon,
  .web-type-icon,
  .sec-service-icon,
  .wx-feature-icon,
  .trust-item strong,
  .text-link::after,
  .home-article-item::before {
    transition: none;
  }
}