/* ============================================================================
 * 07-motion.css — 页面转场与加载特效（独立组件包）
 * 前缀约定：所有类名 / keyframes 均以 fx-motion- 开头，零依赖、纯原生 CSS。
 * 配套 JS：07-motion.js（负责自动挂类；本 CSS 单独引入也可手动加类使用）
 *
 * 提供的类：
 *   .fx-motion-page-enter  页面切换进入动画（淡入 + 轻微上移），加在容器上
 *   .fx-motion-intro       大屏开场动画总开关，加在 #stage 上（stagger 入场）
 *   .fx-motion-shine       标题扫光（一次性），加在 .sc-title 上
 *   .fx-motion-lift        hover 微浮起，可加在任意元素上（opt-in）
 *   body.fx-motion-enhanced 全局增强开关（由 JS 自动加）：button/.card/
 *                          .sc-kpi/.sc-panel/.sc-row 自动获得 hover 微浮起
 * ========================================================================== */

/* ---------- ① 页面切换进入动画：淡入 + 轻微上移 ---------- */
@keyframes fx-motion-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fx-motion-page-enter {
  animation: fx-motion-page-in .35s ease-out both;
}

/* ---------- ② 大屏开场动画（stagger 依次浮现） ---------- */
/* 单元素升起动画，供 intro 内部各卡片复用 */
@keyframes fx-motion-rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 头部先整体落下 */
.fx-motion-intro .sc-header {
  animation: fx-motion-rise-in .45s ease-out both;
}
/* KPI 四卡：依次浮现（stagger 90ms） */
.fx-motion-intro .sc-kpi {
  animation: fx-motion-rise-in .5s ease-out both;
}
.fx-motion-intro .sc-kpi:nth-child(1) { animation-delay: .20s; }
.fx-motion-intro .sc-kpi:nth-child(2) { animation-delay: .29s; }
.fx-motion-intro .sc-kpi:nth-child(3) { animation-delay: .38s; }
.fx-motion-intro .sc-kpi:nth-child(4) { animation-delay: .47s; }
/* 三列面板：按列从左到右、列内从上到下依次浮现 */
.fx-motion-intro .sc-panel {
  animation: fx-motion-rise-in .55s ease-out both;
}
.fx-motion-intro .sc-col:nth-child(1) .sc-panel:nth-of-type(1) { animation-delay: .55s; }
.fx-motion-intro .sc-col:nth-child(1) .sc-panel:nth-of-type(2) { animation-delay: .65s; }
.fx-motion-intro .sc-col:nth-child(2) .sc-panel:nth-of-type(1) { animation-delay: .70s; }
.fx-motion-intro .sc-col:nth-child(2) .sc-panel:nth-of-type(2) { animation-delay: .80s; }
.fx-motion-intro .sc-col:nth-child(3) .sc-panel:nth-of-type(1) { animation-delay: .85s; }
.fx-motion-intro .sc-col:nth-child(3) .sc-panel:nth-of-type(2) { animation-delay: .95s; }
.fx-motion-intro .sc-col:nth-child(3) .sc-panel:nth-of-type(3) { animation-delay: 1.05s; }

/* ---------- ②b 标题扫光（一次性渐变扫过文字） ----------
 * 原理：background-clip:text + 渐变位移；动画期间关闭原 text-shadow，
 * 否则透明填充的文字会透出阴影发虚。动画结束后由 JS 移除本类恢复原样。 */
@keyframes fx-motion-shine-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.fx-motion-shine {
  background-image: linear-gradient(110deg,
    #e8f6ff 38%, #ffffff 48%, #9df1ff 52%, #e8f6ff 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important; /* 见上方注释：防止阴影透出 */
  animation: fx-motion-shine-sweep 1.2s ease-out .15s both;
}

/* ---------- ③ hover 微浮起 ---------- */
/* opt-in：任意元素加 .fx-motion-lift 即可获得 */
.fx-motion-lift {
  transition: transform .18s ease, box-shadow .18s ease;
}
.fx-motion-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* 全局增强（body.fx-motion-enhanced 由 07-motion.js 自动添加） */
body.fx-motion-enhanced button,
body.fx-motion-enhanced .card,
body.fx-motion-enhanced .sc-kpi,
body.fx-motion-enhanced .sc-panel,
body.fx-motion-enhanced .sc-row {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.fx-motion-enhanced button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
}
body.fx-motion-enhanced .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
}
body.fx-motion-enhanced .sc-kpi:hover,
body.fx-motion-enhanced .sc-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, .6);
  box-shadow: inset 0 0 24px rgba(0, 229, 255, .14), 0 8px 20px rgba(0, 16, 36, .5);
}
body.fx-motion-enhanced .sc-panel.danger:hover {
  border-color: rgba(255, 91, 106, .65);
  box-shadow: inset 0 0 24px rgba(255, 91, 106, .14), 0 8px 20px rgba(0, 16, 36, .5);
}
body.fx-motion-enhanced .sc-row:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, .45);
}

/* ---------- 无障碍：用户系统开启"减弱动态效果"时全部停用 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-motion-page-enter,
  .fx-motion-intro .sc-header,
  .fx-motion-intro .sc-kpi,
  .fx-motion-intro .sc-panel,
  .fx-motion-shine {
    animation: none !important;
  }
  .fx-motion-lift,
  body.fx-motion-enhanced button,
  body.fx-motion-enhanced .card,
  body.fx-motion-enhanced .sc-kpi,
  body.fx-motion-enhanced .sc-panel,
  body.fx-motion-enhanced .sc-row {
    transition: none !important;
  }
  .fx-motion-lift:hover,
  body.fx-motion-enhanced button:hover,
  body.fx-motion-enhanced .card:hover,
  body.fx-motion-enhanced .sc-kpi:hover,
  body.fx-motion-enhanced .sc-panel:hover,
  body.fx-motion-enhanced .sc-row:hover {
    transform: none !important;
  }
}