/* ============================================================
   fx.css — 原生复刻 UI 特效层（libraries.dev 效果移植版）
   1) .fx-beam   边框流光（border-beam）
   2) .fx-orbs   思考球组（thinking-orbs）
   3) .fx-metal  金属流光文字（metal-fx 的 CSS 平替）
   4) .fx-skel   骨架微光（img-fx 加载占位）
   全部尊重 prefers-reduced-motion；@supports 降级
   ============================================================ */

/* ---------- 1) 边框流光 ---------- */
@property --fx-ba{ syntax:"<angle>"; initial:0deg; inherits:false; }
.fx-beam{ position:relative; isolation:isolate; }
.fx-beam::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--fx-ba),
      transparent 0%, transparent 62%,
      var(--fx-beam-c,#e9c98f) 78%, #fff6e6 86%, var(--fx-beam-c,#e9c98f) 94%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fx-beam-spin 2.6s linear infinite; pointer-events:none; z-index:1;
}
@keyframes fx-beam-spin{ to{ --fx-ba:360deg; } }
/* 激活式：默认静止，加 .on 才转（跟随 loading 状态） */
.fx-beam[data-mode="active"]::before{ animation-play-state:paused; opacity:0; transition:opacity .25s; }
.fx-beam[data-mode="active"].on::before{ animation-play-state:running; opacity:1; }
/* 呼吸式（常驻，慢脉冲） */
.fx-beam[data-mode="pulse"]::before{ animation:fx-beam-spin 3.6s linear infinite, fx-beam-breath 2.4s ease-in-out infinite; }
@keyframes fx-beam-breath{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
/* 降级：不支持 @property 的浏览器 → 静态金边 */
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .fx-beam::before{ background:var(--fx-beam-c,#e9c98f); animation:none; opacity:.55; }
}

/* ---------- 2) 思考球组 ---------- */
.fx-orbs{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.fx-orbs i{
  width:7px; height:7px; border-radius:50%; display:block;
  background:var(--fx-orb-c,#e9c98f);
  box-shadow:0 0 8px 1px var(--fx-orb-glow,rgba(233,201,143,.55));
  animation:fx-orb-float 1.5s ease-in-out infinite;
}
.fx-orbs i:nth-child(2){ animation-delay:.18s; }
.fx-orbs i:nth-child(3){ animation-delay:.36s; }
.fx-orbs i:nth-child(4){ animation-delay:.54s; }
@keyframes fx-orb-float{
  0%,100%{ transform:translateY(0) scale(.82); opacity:.55; }
  50%{ transform:translateY(-5px) scale(1.12); opacity:1; }
}

/* ---------- 3) 金属流光文字 ---------- */
.fx-metal{
  background:linear-gradient(100deg,
      #b9bcc2 0%, #f2f4f7 18%, #8f959e 32%, #ffffff 44%,
      #c8ccd4 56%, #9aa0a9 70%, #f4f6f9 86%, #b3b8c0 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:fx-metal-flow 6s linear infinite;
}
@keyframes fx-metal-flow{ to{ background-position:-220% 0; } }
/* 金色变体（暖金属） */
.fx-metal--gold{
  background:linear-gradient(100deg,
      #a9803f 0%, #f2d9a8 16%, #c39c5e 30%, #fff3d8 44%,
      #d8b478 56%, #b28a4c 70%, #f7e3bb 86%, #a9803f 100%);
  background-size:220% 100%;
}

/* ---------- 4) 骨架微光（2026-10-20：改浅色版——原白色微光在米白纸感背景上不可见） ---------- */
.fx-skel{
  border-radius:8px; color:transparent !important;
  background:linear-gradient(100deg,
      #f0ede4 30%, #e6dfcd 50%, #f0ede4 70%) ,
      #f0ede4;
  background-size:220% 100%, 100% 100%;
  animation:fx-skel-shine 1.6s linear infinite;
  user-select:none;
}
@keyframes fx-skel-shine{ to{ background-position:-220% 0, 0 0; } }

/* ---------- 动效安全：系统偏好减少动画时全部静止 ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-beam::before, .fx-orbs i, .fx-metal, .fx-skel{ animation:none; }
  .fx-beam::before{ opacity:.5; }
}