/* =========================================================
 * 温州晟成科技 · 交互设计增强层（interactions）
 * 与 fx.css 协同，补齐"真正缺失的交互层"：
 *   ① 阅读进度条  ② 平滑锚点滚动  ③ 侧边目录 scrollspy
 *   ④ 按钮悬浮抬升+发光+按压  ⑤ 卡片 3D 倾斜( opt-in .fx-tilt )
 *   ⑥ 导航下划线动效  ⑦ 表单聚焦光环  ⑧ 页脚链接悬浮
 *   ⑨ CTA 脉冲发光  ⑩ 光标光晕(hero)
 *
 * 铁律：绝不覆盖 .hero-panel 定位；尊重 prefers-reduced-motion。
 * ========================================================= */

/* ---------- ① 阅读进度条（顶部细光带） ---------- */
.fx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-red));
  z-index: 2000;
  pointer-events: none;
  transition: width .12s linear;
}

/* ---------- ② 平滑滚动 ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- ②b 全站统一入场动画（覆盖"其他板块"） ---------- */
/* 站点自带 .animate-on-scroll 仅覆盖少数元素且动效偏弱；此处统一升级为更明显的
   上滑+轻微缩放入场，并供给 JS 自动标记的 .fx-ar（覆盖其余所有板块内容）。 */
@keyframes fxArIn {
  from { opacity: 0; transform: translateY(40px) scale(.955); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-on-scroll.animated,
.fx-ar.in {
  animation: fxArIn .92s cubic-bezier(.22, .61, .36, 1) both;
}
.fx-ar { opacity: 0; will-change: transform, opacity; }

/* ---------- ②c 板块标题 eyebrow 流动光效（持续动态） ---------- */
.section-eyebrow {
  position: relative;
  display: inline-block;
}
.section-eyebrow::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(201, 168, 76, 0));
  transform-origin: left center;
  animation: fxEyebrow 2.8s ease-in-out infinite alternate;
}
@keyframes fxEyebrow {
  from { transform: scaleX(.22); opacity: .35; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- ②d 全站板块流动背景光晕（持续动态，内容之下） ---------- */
.fx-section-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fx-section-aurora::before,
.fx-section-aurora::after {
  content: '';
  position: absolute;
  width: 56%; height: 56%;
  border-radius: 50%;
  filter: blur(48px);
  animation: fxSectionFloat 17s ease-in-out infinite;
}
.fx-section-aurora::before {
  top: -12%; left: -6%;
  background: radial-gradient(circle, rgba(201, 168, 76, .16), rgba(229, 57, 53, .07) 46%, transparent 72%);
}
.fx-section-aurora::after {
  bottom: -14%; right: -8%;
  animation-duration: 22s;
  animation-delay: -7s;
  background: radial-gradient(circle, rgba(229, 57, 53, .12), rgba(201, 168, 76, .06) 46%, transparent 72%);
}
@keyframes fxSectionFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(11%, -9%); }
}
/* 让板块内容浮在光晕之上（仅 section 直接子容器，安全，不影响布局） */
.section > .container { position: relative; z-index: 1; }

/* ---------- ④ 按钮：悬浮抬升 + 香槟金发光 + 按压回弹 ---------- */
.btn {
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              background var(--transition-base), color var(--transition-base);
  will-change: transform;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(201, 168, 76, .5);
}
.btn:active { transform: translateY(-1px) scale(.98); }

/* 磁吸（JS 设置 transform 时启用，opt-in .fx-magnetic） */
.fx-magnetic {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow var(--transition-base);
  will-change: transform;
}

/* ---------- ⑤ 卡片 3D 倾斜（opt-in，仅对显式标记的元素生效） ---------- */
.fx-tilt {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow var(--transition-base);
  will-change: transform;
}
.fx-tilt:hover { box-shadow: var(--shadow-xl); }

/* 通用内容卡片：悬浮抬升 + 香槟金光晕（叠加在 style.css 原生 hover 之上，
   不覆盖其红系边框色；图标/图片轻微放大已在下方保留）。 */
.service-card, .case-card, .advantage-card, .feature-item, .value-item,
.partner-item, .report-section, .news-card, .info-card, .contact-card,
.team-item, .city-card, .about-card, .client-card, .sub-service-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-card:hover, .case-card:hover, .advantage-card:hover, .feature-item:hover,
.value-item:hover, .partner-item:hover, .report-section:hover, .news-card:hover,
.info-card:hover, .contact-card:hover, .team-item:hover, .city-card:hover,
.about-card:hover, .client-card:hover, .sub-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px -14px rgba(201, 168, 76, .55), var(--shadow-lg);
}
/* 服务卡箭头：悬浮时右移，提示可点 */
.service-card-arrow { transition: transform var(--transition-base); }
.service-card:hover .service-card-arrow { transform: translateX(6px); }
/* 卡片内图标 / 图片轻微放大（新增微交互，叠加在 style.css 之上） */
.service-card:hover .service-card-icon,
.case-card:hover .case-card-img img,
.feature-item:hover .feature-icon,
.advantage-card:hover .advantage-icon {
  transform: scale(1.06);
}
.service-card-icon, .case-card-img img, .feature-icon, .advantage-icon {
  transition: transform var(--transition-base);
}

/* ---------- ⑥ 导航链接下划线动效 ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width .28s cubic-bezier(.22, .61, .36, 1);
}
.nav-link:hover::after, .nav-link.active::after { width: 56%; }

/* ---------- ⑦ 表单聚焦光环 ---------- */
input:focus, textarea:focus, select:focus, .form-input:focus {
  outline: none;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .18), var(--shadow-sm);
}

/* ---------- ⑧ 页脚 / 下拉链接悬浮 ---------- */
.footer-col a, .footer-links a, .dropdown-item {
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-col a:hover, .footer-links a:hover { color: var(--color-accent); transform: translateX(3px); }

/* ---------- ⑨ CTA 脉冲发光 ---------- */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 130% at 50% 0%, rgba(201, 168, 76, .28), transparent 62%);
  animation: fxCtaPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fxCtaPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- ⑩ 光标光晕（hero 深色区，跟随指针） ---------- */
.fx-cursor-glow {
  position: fixed;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, .18), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 25;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
}

/* ---------- ③ 侧边目录（法律页 / 报告页 scrollspy） ---------- */
.fx-toc {
  position: fixed;
  top: 50%; left: 24px;
  transform: translateY(-50%);
  z-index: 900;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  max-width: 224px;
  box-shadow: var(--shadow-md);
}
.fx-toc-title {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  letter-spacing: .08em;
}
.fx-toc a {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 5px 0 5px 10px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.fx-toc a:hover { color: var(--color-accent); }
.fx-toc a.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: 600;
}

/* 法律页分节：悬浮左侧香槟金指示条（inset，避免布局位移） */
.legal-section {
  transition: box-shadow var(--transition-base);
  border-radius: var(--radius-md);
}
.legal-section:hover { box-shadow: inset 4px 0 0 var(--color-accent); }

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-banner::before { animation: none; }
  .fx-tilt { transition: none; }
  .btn:hover { transform: none; }
  .animate-on-scroll.animated, .fx-ar.in { animation: none; }
  .fx-ar { opacity: 1; transform: none; }
  .section-eyebrow::after { animation: none; opacity: .6; }
  .fx-section-aurora::before, .fx-section-aurora::after { animation: none; }
  .service-card:hover, .case-card:hover, .advantage-card:hover, .feature-item:hover,
  .value-item:hover, .partner-item:hover, .report-section:hover, .news-card:hover,
  .info-card:hover, .contact-card:hover, .team-item:hover, .city-card:hover,
  .about-card:hover, .client-card:hover, .sub-service-card:hover { transform: none; }
}
@media (max-width: 1100px) {
  .fx-toc { display: none; }
}