/*!
 * 武汉恒诺创达 — 首页视觉增强模块（whhncd-fx）
 * --------------------------------------------------------------------------
 * 来源：参考模板 mobanwang 23144 的特效拆解（Splide 首屏轮播 / AOS 滚动入场 /
 *       卡片 hover 抬升 + 扫光 / 数字滚动 / 吸顶 fix / 回到顶部），
 *       去掉其 Bootstrap + jQuery + Splide + AOS 依赖，改用原生实现，
 *       只保留与本站品牌调性契合的部分，并接入本站 --hncd-* 设计令牌。
 *
 * 包含能力
 *   01 滚动入场（四方向 + 自动错峰）
 *   02 首屏视差层
 *   03 卡片悬浮（抬升 + 阴影 + 图片微缩放 + 扫光）
 *   04 回到顶部按钮
 *   05 顶部滚动进度条
 *
 * 参数集中位置
 *   · 时长 / 位移 / 缩放 / 错峰步长 / 阴影 → 本文件顶部 :root 变量区
 *   · 触发阈值 / 视差系数 / 按钮出现时机   → whhncd-fx.js 的 CONFIG
 *
 * 关闭方式（任选其一，见文档）
 *   1. 删掉首页 <head> 中本文件的 <link> 与底部 <script> 两行
 *   2. 给 <html> 加 class="fx-off"（CSS 立即降级，JS 不再初始化）
 *   3. 控制台执行 HNCD_FX.destroy()（运行时卸载）
 * --------------------------------------------------------------------------
 * 约束
 *   · 不改动任何文字颜色与背景色，不影响对比度
 *   · hover 效果在 @media (hover: hover) 内，触屏设备不残留
 *   · :focus-visible / :focus-within 与 hover 同款，键盘用户不丢失反馈
 *   · prefers-reduced-motion: reduce 下全部动效关闭，内容直接可见
 * ========================================================================== */

/* ==========================================================================
   00 参数区（改这里即可调整整体手感）
   ========================================================================== */
:root {
  /* —— 入场动画 —— */
  --fx-dur:        .7s;                              /* 入场时长 */
  --fx-ease:       cubic-bezier(.22, .61, .36, 1);   /* 缓动（与全站 --hncd-ease 一致） */
  --fx-rise:       26px;                             /* 上移距离（从下往上） */
  --fx-shift:      34px;                             /* 左右位移距离 */
  --fx-zoom:       .96;                              /* 缩放入场的起始比例 */
  --fx-stagger:    80ms;                             /* 同组元素错峰步长（JS 会写 --fx-delay） */

  /* —— 卡片悬浮 —— */
  --fx-card-lift:  6px;                              /* 悬浮抬升距离 */
  --fx-card-scale: 1.03;                             /* 图片放大比例 */
  --fx-card-dur:   .36s;                             /* 卡片过渡时长 */
  --fx-sheen-dur:  .9s;                              /* 扫光划过时长 */
  --fx-sheen:      rgba(255, 255, 255, .55);         /* 扫光颜色 */
  --fx-shadow-hover: 0 18px 40px rgba(16, 24, 40, .14);  /* 悬浮阴影 */

  /* —— 视差 —— */
  --fx-parallax-max: 80px;                           /* 视差最大位移（防止滚动过头） */

  /* —— 回到顶部 / 进度条 —— */
  --fx-fab-size:   46px;
  --fx-progress-h: 3px;
}


/* ==========================================================================
   01 滚动入场
   用法：<div data-fx-reveal="up|left|right|zoom">
        父容器加 data-fx-stagger 时，子元素自动错峰出现
   ========================================================================== */
[data-fx-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--fx-dur) var(--fx-ease) var(--fx-delay, 0ms),
    transform var(--fx-dur) var(--fx-ease) var(--fx-delay, 0ms);
}
[data-fx-reveal="up"]    { transform: translate3d(0, var(--fx-rise), 0); }
[data-fx-reveal="left"]  { transform: translate3d(calc(var(--fx-shift) * -1), 0, 0); }
[data-fx-reveal="right"] { transform: translate3d(var(--fx-shift), 0, 0); }
[data-fx-reveal="zoom"]  { transform: scale(var(--fx-zoom)); }

[data-fx-reveal].is-visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   02 首屏视差层
   用法：<div class="hero__grid" data-fx-parallax="-0.08">
        属性值 = 视差系数（正：随滚动同向下移；负：反向上移），建议 ±0.05 ~ ±0.15
        JS 只写 --fx-py 变量，最大位移受 --fx-parallax-max 约束
   ========================================================================== */
[data-fx-parallax] {
  transform: translate3d(0, var(--fx-py, 0px), 0);
  will-change: transform;
}


/* ==========================================================================
   03 卡片悬浮
   用法：给现有卡片再加一个 class="fx-card"（不改动原有类名与内容）
   ========================================================================== */
.fx-card {
  position: relative;
  overflow: hidden;                 /* 包裹扫光，避免溢出到卡片外 */
  transition:
    transform   var(--fx-card-dur) var(--fx-ease),
    box-shadow  var(--fx-card-dur) var(--fx-ease);
}

/* 扫光层：默认停在左侧不可见处，hover 时从左划到右 */
.fx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;             /* 不拦截卡片上的链接点击 */
  background: linear-gradient(
    105deg,
    transparent 30%,
    var(--fx-sheen) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform var(--fx-sheen-dur) var(--fx-ease);
}

.fx-card > img,
.fx-card img {
  transition: transform var(--fx-dur) var(--fx-ease);
}

/* 仅在支持真实悬停的设备上启用（触屏不会出现"点一下卡住"的残留态） */
@media (hover: hover) {
  .fx-card:hover,
  .fx-card:focus-within {
    transform: translateY(calc(var(--fx-card-lift) * -1));
    box-shadow: var(--fx-shadow-hover);
  }
  .fx-card:hover::after,
  .fx-card:focus-within::after {
    transform: translateX(120%);
  }
  .fx-card:hover img,
  .fx-card:focus-within img {
    transform: scale(var(--fx-card-scale));
  }
}

/* 键盘可达：卡片内链接获得焦点时给出与 hover 一致的轮廓（不依赖 hover） */
.fx-card:focus-within {
  outline: none;
}
.fx-card a:focus-visible {
  outline: 2px solid var(--hncd-primary, #0046d3);
  outline-offset: 3px;
}


/* ==========================================================================
   04 回到顶部按钮（由 JS 自动创建，无需改 HTML）
   ========================================================================== */
.fx-totop {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 1100;
  width: var(--fx-fab-size);
  height: var(--fx-fab-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hncd-primary, #0046d3);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 70, 211, .32);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity   var(--fx-card-dur) var(--fx-ease),
    transform var(--fx-card-dur) var(--fx-ease),
    visibility var(--fx-card-dur) linear,
    background-color var(--fx-card-dur) var(--fx-ease);
}
.fx-totop.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fx-totop:hover { background: var(--hncd-primary-dark, #00349e); }
.fx-totop:focus-visible {
  outline: 2px solid var(--hncd-primary, #0046d3);
  outline-offset: 3px;
}
.fx-totop svg { width: 20px; height: 20px; }


/* ==========================================================================
   05 顶部滚动进度条（由 JS 自动创建）
   ========================================================================== */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;                    /* 高于页头，保证在最上层 */
  width: 100%;
  height: var(--fx-progress-h);
  background: linear-gradient(90deg, #0046d3, #00a3ff);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}


/* ==========================================================================
   06 降级一：移动端（≤768px）
   位移收紧、时长缩短、关闭视差与扫光，保证不拖慢首屏
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --fx-dur:        .5s;
    --fx-rise:       16px;
    --fx-shift:      18px;
    --fx-stagger:    50ms;
    --fx-card-lift:  3px;
    --fx-fab-size:   42px;
  }
  [data-fx-parallax] { transform: none !important; }
  .fx-card::after    { display: none; }             /* 触屏无悬停，扫光无意义 */
}


/* ==========================================================================
   07 降级二：尊重系统"减少动态效果"
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-fx-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-fx-parallax] { transform: none !important; }
  .fx-card,
  .fx-card img,
  .fx-card::after { transition: none !important; }
  .fx-card:hover,
  .fx-card:focus-within {
    transform: none;
    box-shadow: var(--hncd-shadow, 0 4px 16px rgba(16, 24, 40, .07));
  }
  .fx-totop { transition: opacity .2s linear, visibility .2s linear; }
}


/* ==========================================================================
   08 总开关：<html class="fx-off"> 时整体失效（无需删文件）
   ========================================================================== */
html.fx-off [data-fx-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.fx-off [data-fx-parallax] { transform: none !important; }
html.fx-off .fx-card::after    { display: none; }
html.fx-off .fx-progress       { display: none; }
