/* ==========================================================================
   fx.css — 全局特效层（全局特效工程师）
   ① 路由斜切擦除转场覆盖层 #route-wipe（由 js/components/fx.js 注入与驱动）
   主运动只用 transform/opacity，统一缓动 cubic-bezier(.22,1,.36,1)。
   覆盖层本身 pointer-events:none，不拦截任何交互。
   ========================================================================== */

/* ---------- ① 路由斜切擦除转场（明日方舟式锐利斜边扫入/扫出） ---------- */

#route-wipe {
  position: fixed;
  inset: 0;
  z-index: 90;              /* 高于 sidebar(20) 与 body 噪点(80) */
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
#route-wipe.is-active { visibility: visible; }

/* 斜切色块：三块错峰扫过——深底 / 面板色 / 电光青细线 */
#route-wipe .wipe-bar {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: -8%;
  width: 116%;
  transform: translateX(-112%) skewX(-9deg); /* 斜切前缘（锐利斜边） */
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
#route-wipe .wipe-bar--back {
  background: var(--panel);
  transition-delay: 0ms;
}
#route-wipe .wipe-bar--front {
  background: var(--bg-0);
  transition-delay: 45ms;
}
#route-wipe .wipe-bar--line {
  /* 细线实现为全宽色块右缘的 3px 光刃，保证 translateX 按全屏行程运动 */
  background: linear-gradient(90deg, transparent calc(100% - 3px), var(--accent-cyan) calc(100% - 3px));
  transition-delay: 80ms;
}

/* 阶段类由 fx.js 切换：cover 扫入覆盖 → reveal 扫出揭示 */
#route-wipe.is-cover .wipe-bar  { transform: translateX(0) skewX(-9deg); }
#route-wipe.is-reveal .wipe-bar { transform: translateX(112%) skewX(-9deg); }

/* 复位阶段：禁用过渡，瞬间归位到屏外起点，避免回放 */
#route-wipe.wipe-idle .wipe-bar { transition: none; }

/* 降低动态偏好：转场动画整体禁用（fx.js 同步跳过 JS 时间线，双保险） */
@media (prefers-reduced-motion: reduce) {
  #route-wipe { display: none; }
}