/* =============================================================
   视觉增强层 fx.css（2026-10-14）
   -------------------------------------------------------------
   在 pulse.css / theme.css 之上做「惊艳但简练」的叠加层：
     1) 3D 倾斜卡片 + 跟随高光（景深）
     2) 磁性主按钮（吸附指针）
     3) 标题模糊上浮入场（逐行 stagger）
     4) 关键卡片流光边框（conic 渐变旋转描边）
     5) 点击涟漪、滚动视差、进度条发光等微交互
   整层可摘：后台「主题皮肤 → 视觉增强层」关掉后 layout 不再
   加载本文件与 fx.js，界面即刻回到旧版，无任何残留样式。
   系统「减弱动效」时 fx.js 不初始化，下方动画也整体不生效。
   ============================================================= */

/* conic 渐变边框要转起来，角度必须注册成可动画属性（不支持的浏览器退化为静态渐变描边，不影响观感） */
@property --fxa {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 页面入场：整页淡入已取消（2026-10-19 定稿） ----------
     站长连报多轮「硬刷新时整块闪一下空白」。冷加载逐帧抓拍实锤：84ms 时
     整页 opacity:0（一片空白），到 ~500ms 才淡入完成。而渠道合作页要现场
     解析 three.js + three-globe（约 2MB）并构建三万枚六边形（~1.1s 长任务），
     淡入进行到一半主线程被占满 → 淡入「卡住」，恢复时又突然跳到位，
     肉眼就是「空白停一下、内容猛地出现」。
     整页淡入在重负载页上是负资产，直接取消：首帧即 100% 呈现，
     和源站 shouqianba.com 一样「秒出」。fxBoot 定义保留（无害），不再挂到 body。 */
  @keyframes fxBoot { from { opacity: 0 } }

  /* ---------- 标题入场：模糊 + 上浮，JS 进入视口时加 .fx-in ---------- */
  .fx-rise { opacity: 0; transform: translateY(24px); filter: blur(10px) }
  .fx-rise.fx-in {
    opacity: 1; transform: none; filter: blur(0);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
    transition-delay: var(--fxd, 0s);
  }

  /* ---------- 3D 倾斜卡片 ----------
     JS 只写 --fx-rx/--fx-ry/--mx/--my 四个变量，transform 全部在这里合成，
     悬停上浮（-5px）与倾斜是一体的，不会再和 pulse.css 的 hover 位移打架 */
  @media (hover: hover) and (pointer: fine) {
    .fx-tilt { will-change: transform; transform-style: preserve-3d }
    .fx-tilt.fx-live {
      transform: perspective(900px) translateY(-5px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
      transition: transform .12s ease-out;
    }
    .fx-tilt:not(.fx-live) { transition: transform .5s var(--ease-out) }
    /* 跟随高光：贴着指针的一层柔光，隔着玻璃看灯箱的感觉 */
    .fx-tilt::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 4;
      background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .18), transparent 46%);
      opacity: 0; transition: opacity .35s; pointer-events: none;
    }
    .fx-tilt.fx-live::before { opacity: 1 }
  }

  /* ---------- 磁性按钮：JS 写 --fx-bx/--fx-by，回弹曲线带一点弹性 ---------- */
  @media (hover: hover) and (pointer: fine) {
    .fx-magnet { will-change: transform; transition: transform .18s ease-out }
    .fx-magnet.fx-free { transition: transform .45s cubic-bezier(.2, .9, .25, 1.35) }
  }

  /* ---------- 流光边框：hover 时一条光沿卡片边缘巡航 ----------
     用 JS 注入的 <i class="fx-ring"> 而不是伪元素 —— .casecard::after 已被
     渐变遮罩占用，元素方案不跟任何既有样式抢位置 */
  @keyframes fxSpin { to { --fxa: 360deg } }
  .fx-frame { position: relative }
  .fx-ring {
    position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--fxa),
      transparent 0turn, transparent .62turn,
      var(--brand) .74turn, var(--brand-3) .82turn, #e0509a .88turn, transparent .96turn);
    -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 .4s; pointer-events: none; z-index: 5;
    animation: fxSpin 3.4s linear infinite;
  }
  .fx-frame:hover > .fx-ring { opacity: 1 }

  /* 点击涟漪（.fx-ripple / fxRipple）已删 —— 2026-10-17 九批站长要求
     「删除全站鼠标点击特效」，fx.js 里的 bindRipple 一并移除 */

  /* ---------- 滚动视差（JS 写 --fx-py） ---------- */
  .fx-para { will-change: transform; transform: translate3d(0, var(--fx-py, 0px), 0) }

  /* ---------- 顶部滚动进度条发光 ---------- */
  .progress { box-shadow: 0 0 14px var(--brand), 0 0 4px var(--brand-3) }

  /* ---------- 文章正文链接：下划线流光 ---------- */
  .article a:not(.attach) {
    background-image: linear-gradient(100deg, var(--brand), var(--brand-3));
    background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
    transition: background-size .35s var(--ease-out); padding-bottom: 1px;
  }
  .article a:not(.attach):hover { background-size: 100% 2px }

  /* ---------- 主按钮微光晕呼吸（很克制，只主按钮） ---------- */
  @keyframes fxBtnHalo {
    0%, 100% { box-shadow: 0 16px 34px -16px rgba(43, 107, 255, .75) }
    50% { box-shadow: 0 18px 40px -14px rgba(111, 91, 255, .85) }
  }
  .hero .btn--primary, .portal .btn--primary { animation: fxBtnHalo 3.6s ease-in-out infinite }

  /* ---------- 首图加载：模糊聚焦 ----------
     只作用带 loading=lazy 的内容图，进场时从轻微失焦到清晰 */
  @keyframes fxFocus { from { filter: blur(6px); opacity: .4 } to { filter: blur(0); opacity: 1 } }
  .casecard__bg, .sector__media img { animation: fxFocus 1.1s var(--ease-out) both }
}

/* =============================================================
   （功能性样式不放这层：附件卡片 .attach 与论坛搜索条 .fmsearch
   在 pulse.css 末尾 —— 它们是与动效无关的实体功能，fx 关闭也必须在。）
   ============================================================= */