/* =====================================================================
   余烬模板 · 动效层 v2（叠加在 fd-ink.css 之后，零依赖）
   语态取自 scaffold-master/scaffold-vue/src/composables/motion.ts：
     蓄 Charge        —— 按压下沉
     放 Discharge     —— 涟漪化开、弹层从触发点生长
     导 Conduct       —— 读数推进、路由进度、滚动进度
     结 Crystallize   —— 进场级联落位、表格逐行、状态回弹
     停摆 Halt        —— 取消回正、切后台直达终态

   安全约束：
     · 初始隐藏态全部挂在 html.fdm-ready 下，该类由 JS 添加，
       脚本未加载 / 报错时页面与改动前完全一致。
     · 隐藏态只作用于 opacity / transform，不改布局尺寸。
     · 缓动曲线与 motion.ts 一一对应（见文件末尾对照表）。
   ===================================================================== */

/* ── 令牌 ───────────────────────────────────────────────────────────── */
.fdm-ready{
  --fdm-reveal:cubic-bezier(.16,1,.3,1);      /* expo.out       显现 */
  --fdm-glide:cubic-bezier(.25,1,.5,1);       /* power4.out     滑行 */
  --fdm-exit:cubic-bezier(.55,0,1,.45);       /* power2.in      退场 */
  --fdm-swap:cubic-bezier(.65,0,.35,1);       /* power2.inOut   交接 */
  --fdm-settle:cubic-bezier(.34,1.56,.64,1);  /* back.out(1.6)  落定 */
}

/* ── 1. 进场级联 ────────────────────────────────────────────────────── */
.fdm-ready [data-fdm]{
  opacity:0;
  transform:translateY(10px);
  will-change:opacity,transform;
}
.fdm-ready [data-fdm].fdm-in{
  opacity:1;
  transform:translateY(0);
  transition:opacity .52s var(--fdm-reveal) var(--fdm-d,0ms),
             transform .62s var(--fdm-reveal) var(--fdm-d,0ms);
}

/* 并列卡片：从中间向两侧展开（stagger from center） */
.fdm-ready [data-fdm="card"]{
  transform:translateY(16px) scale(.992);
}

/* ── 2. 按压 → 回弹（两条通道：hover 写 --fdm-lift，press 写 --fdm-press） ── */
.fdm-ready .btn,
.fdm-ready .layui-btn,
.fdm-ready .fd-more,
.fdm-ready .fd-chip,
.fdm-ready .fd-quick a,
.fdm-ready .layui-layer-btn a,
.fdm-ready .fd-seg button{
  --fdm-lift:0px;
  --fdm-press:1;
  transform:translateY(var(--fdm-lift)) scale(var(--fdm-press));
  transition:transform .46s var(--fdm-settle),
             box-shadow .26s var(--fdm-glide),
             filter .2s ease;
  will-change:transform;
}
/* 悬停抬起只在真正有指针的设备上给，触屏不留粘滞态 */
@media (hover:hover) and (pointer:fine){
  .fdm-ready .btn:hover,
  .fdm-ready .layui-btn:hover,
  .fdm-ready .fd-more:hover,
  .fdm-ready .fd-quick a:hover,
  .fdm-ready .layui-layer-btn a:hover{
    --fdm-lift:-1px;
    transition-duration:.34s;
  }
}
/* 按下：0.955，140ms 落下，松手由上面的 .46s + back.out 弹回
   注意 --fdm-press 必须用 !important：上方按控件类型写的规则（.fdm-ready .fd-seg button 等）
   优先级高于 .fdm-ready .fdm-pressing，不加会被重置回 1 */
.fdm-ready .fdm-pressing{
  --fdm-press:.955 !important;
  transition-duration:.14s !important;
  transition-timing-function:cubic-bezier(.4,0,.6,1) !important;
}

/* ── 3. 涟漪：从真正被点到的位置化开，半径按最远角算 ───────────────── */
.fdm-rippling{overflow:hidden}
.fdm-dot{
  position:absolute;
  width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;
  background:currentColor;
  pointer-events:none;z-index:0;
  opacity:.18;
  transform:scale(0);
  animation:fdmDot .62s var(--fdm-reveal) forwards;
}
@keyframes fdmDot{
  0%  {transform:scale(0);   opacity:.22}
  30% {                      opacity:.15}
  100%{transform:scale(var(--fdm-r,12)); opacity:0}
}

/* ── 4. 卡片：抬起 + 指针光晕 ──────────────────────────────────────── */
.fdm-ready .fd-stat-card,
.fdm-ready .fd-sec{
  --fdm-lift:0px;
  position:relative;
  transform:translateY(var(--fdm-lift));
  transition:transform .34s var(--fdm-glide),
             box-shadow .34s var(--fdm-glide),
             border-color .3s ease;
}
.fdm-ready .fd-stat-card::after,
.fdm-ready .fd-sec::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(280px 220px at var(--fdm-mx,50%) var(--fdm-my,0%),rgba(255,90,54,.10),transparent 70%);
}
@media (hover:hover) and (pointer:fine){
  .fdm-ready .fd-stat-card:hover{--fdm-lift:-3px}
  .fdm-ready .fd-sec:hover{--fdm-lift:-2px;border-color:rgba(255,90,54,.28)}
  .fdm-ready .fd-stat-card:hover::after,
  .fdm-ready .fd-sec:hover::after{opacity:1}
}

/* ── 5. 侧栏：滑条跟随当前项，hover 预览 ───────────────────────────── */
.fdm-ready .lyear-layout-sidebar .nav-drawer a{position:relative}
.fdm-ready .lyear-layout-sidebar .nav-drawer a::before{
  content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  background:var(--ember,#FF5A36);transform:translateY(-50%);
  transition:height .24s var(--fdm-glide),opacity .22s;
  opacity:0;
}
@media (hover:hover){
  .fdm-ready .lyear-layout-sidebar .nav-drawer a:hover::before{height:14px;opacity:.85}
}
.fdm-ready .lyear-layout-sidebar .nav-drawer>li>a>i{
  transition:transform .26s var(--fdm-glide),color .24s;
}
.fdm-ready .lyear-layout-sidebar .nav-drawer>li>a:hover>i,
.fdm-ready .lyear-layout-sidebar .nav-drawer>li.active>a>i{transform:translateX(2px)}

.fdm-nav-ink{
  position:absolute;left:0;top:0;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,rgba(255,90,54,0),var(--ember,#FF5A36) 22%,var(--ember,#FF5A36) 78%,rgba(255,90,54,0));
  box-shadow:0 0 12px rgba(255,90,54,.55);
  pointer-events:none;opacity:0;
  transition:transform .46s var(--fdm-glide),height .42s var(--fdm-glide),opacity .25s;
}

/* ── 6. 表单聚焦 ───────────────────────────────────────────────────── */
.fdm-ready .layui-input:focus,
.fdm-ready .form-control:focus,
.fdm-ready input[type=text]:focus,
.fdm-ready input[type=password]:focus,
.fdm-ready input[type=number]:focus,
.fdm-ready select:focus,
.fdm-ready textarea:focus{
  border-color:rgba(255,90,54,.62)!important;
  box-shadow:0 0 0 3px rgba(255,90,54,.11),0 4px 18px -10px rgba(255,90,54,.6)!important;
  transition:border-color .2s ease,box-shadow .26s var(--fdm-glide);
}

/* ── 7. 表格：行落位 + hover 左缘点亮 ─────────────────────────────── */
.fdm-ready .layui-table-body tbody tr,
.fdm-ready .table tbody tr{
  transition:background .18s ease,box-shadow .18s ease;
}
.fdm-ready .layui-table-body tbody tr.fdm-row-in{
  animation:fdmRowIn .5s var(--fdm-reveal) both;
  animation-delay:var(--fdm-d,0ms);
}
@keyframes fdmRowIn{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}
@media (hover:hover){
  .fdm-ready .layui-table-body tbody tr:hover{box-shadow:inset 3px 0 0 rgba(255,90,54,.85)}
}

/* ── 8. 弹层：从触发点生长（放 Discharge） ─────────────────────────── */
.layui-layer.fdm-grow{
  transform-origin:var(--fdm-ox,50%) var(--fdm-oy,50%);
  animation:fdmGrow .44s var(--fdm-reveal) both;
}
@keyframes fdmGrow{
  from{opacity:0;transform:scale(.86)}
  to  {opacity:1;transform:scale(1)}
}
.layui-layer-shade{animation:fdmFadeIn .22s ease}
@keyframes fdmFadeIn{from{opacity:0}to{opacity:1}}

/* ── 9. 路由 / 滚动进度 ────────────────────────────────────────────── */
.fdm-progress{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:9999;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,90,54,.2),var(--ember,#FF5A36));
  box-shadow:0 0 10px rgba(255,90,54,.55);
  opacity:0;transition:opacity .2s ease,transform .32s var(--fdm-glide);
}
.fdm-progress.on{opacity:1}
.fdm-progress.done{transition:transform .24s var(--fdm-exit),opacity .3s ease .1s}

/* ── 10. 换页：旧内容退纵深，新内容推进 ────────────────────────────── */
.fdm-ready.fdm-swapping #iframe-content{
  opacity:.35;
  transform:scale(.996);
  transition:opacity .18s var(--fdm-exit),transform .18s var(--fdm-exit);
}
.fdm-ready #iframe-content{
  transition:opacity .42s var(--fdm-reveal),transform .42s var(--fdm-reveal);
}
.fdm-ready #iframe-content iframe{transition:opacity .3s ease}

.fdm-ready .multitabs-nav .nav-link,
.fdm-ready .multitabs-nav a{transition:color .2s ease,background .2s ease}

/* ── 11. 减少动态效果：全部直达终态 ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fdm-ready [data-fdm],
  .fdm-ready [data-fdm="card"]{opacity:1!important;transform:none!important;transition:none!important}
  .fdm-dot{display:none}
  .fdm-nav-ink,.fdm-progress{display:none}
  .layui-layer.fdm-grow{animation:none}
  .fdm-ready .btn,.fdm-ready .layui-btn,.fdm-ready .fd-stat-card,.fdm-ready .fd-sec{
    transition:none!important;transform:none!important;
  }
  .fdm-ready .layui-table-body tbody tr.fdm-row-in{animation:none}
}

/* ─────────────────────────────────────────────────────────────────────
   曲线对照（motion.ts 的 GSAP 名 → 此处 CSS 值）
     expo.out        → cubic-bezier(.16,1,.3,1)      显现
     power4.out      → cubic-bezier(.25,1,.5,1)      滑行
     power2.in       → cubic-bezier(.55,0,1,.45)     退场
     power2.inOut    → cubic-bezier(.65,0,.35,1)     交接
     back.out(1.6)   → cubic-bezier(.34,1.56,.64,1)  落定
   时长对照
     press .14s / release .46s / hoverIn .34s / pageIn .62s / pageOut .18s
   ───────────────────────────────────────────────────────────────────── */