/* ============================================================================
   晓黎 FDE 演示站 —— 动效层
   ----------------------------------------------------------------------------
   设计判断（trust-first / 受监管行业 / B2B 决策者）：
     MOTION_INTENSITY = 3。
     动效只承担三件事：**层级**（注意力去哪）、**反馈**（操作被接住了）、
     **状态转移**（从 A 到 B 不是硬切）。不做装饰性循环动画。

   三条纪律：
     1. 全部走 transform / opacity，不碰 layout 属性（避免重排掉帧）；
     2. 时长 120–260ms，曲线统一 cubic-bezier(.2,.7,.3,1)；
     3. prefers-reduced-motion 下全部关掉——这是硬要求不是可选项。

   色值仍只消费晓黎 token。
   ========================================================================= */

:root {
  --xl-ease: cubic-bezier(.2, .7, .3, 1);
  --xl-dur-fast: 120ms;
  --xl-dur: 180ms;
  --xl-dur-slow: 260ms;
}

/* ══ 1. 侧栏条目：hover 轻微右移 + 选中条生长 ═════════════════════════════ */
.body-sidebar .standard-sidebar-item,
.body-sidebar .sidebar-item-container {
  transition: background-color var(--xl-dur) var(--xl-ease),
              transform var(--xl-dur) var(--xl-ease);
}
.body-sidebar .standard-sidebar-item:hover,
.body-sidebar .sidebar-item-container:hover {
  transform: translateX(2px);
}
.body-sidebar .standard-sidebar-item .sidebar-item-icon,
.body-sidebar .sidebar-item-container .sidebar-item-icon {
  transition: color var(--xl-dur) var(--xl-ease),
              transform var(--xl-dur) var(--xl-ease);
}
.body-sidebar .standard-sidebar-item:hover .sidebar-item-icon {
  transform: scale(1.08);
}

/* 选中态的琥珀左条：用 ::before 做生长动画，而不是硬出现 */
.body-sidebar .standard-sidebar-item {
  position: relative;
}
.body-sidebar .standard-sidebar-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--xl-amber);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height var(--xl-dur-slow) var(--xl-ease);
}
.body-sidebar .standard-sidebar-item.active-sidebar::before,
.body-sidebar .standard-sidebar-item.selected::before {
  height: 60%;
}

/* ══ 2. 主按钮：按压反馈 + 微妙抬升 ═══════════════════════════════════════ */
.btn-primary,
.btn.btn-primary,
.for-login .btn-login {
  transition: background-color var(--xl-dur) var(--xl-ease),
              box-shadow var(--xl-dur) var(--xl-ease),
              transform var(--xl-dur-fast) var(--xl-ease);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  box-shadow: 0 4px 14px -4px rgba(18, 59, 114, .38);
}
.btn-primary:active,
.btn.btn-primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* ══ 3. 工作台卡片：入场错峰 + hover 抬升 ═════════════════════════════════ */
.widget,
.shortcut-widget-box,
.dashboard-widget-box {
  transition: border-color var(--xl-dur) var(--xl-ease),
              box-shadow var(--xl-dur) var(--xl-ease),
              transform var(--xl-dur) var(--xl-ease);
}
.widget:hover,
.shortcut-widget-box:hover,
.dashboard-widget-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(18, 59, 114, .20);
  border-color: var(--xl-amber) !important;
}

/* 卡片入场：淡入 + 轻微上浮，错峰 40ms */
@keyframes xl-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.widget,
.shortcut-widget-box,
.dashboard-widget-box {
  animation: xl-rise var(--xl-dur-slow) var(--xl-ease) both;
}
.widget:nth-child(1) { animation-delay: 0ms; }
.widget:nth-child(2) { animation-delay: 40ms; }
.widget:nth-child(3) { animation-delay: 80ms; }
.widget:nth-child(4) { animation-delay: 120ms; }
.widget:nth-child(5) { animation-delay: 160ms; }
.widget:nth-child(6) { animation-delay: 200ms; }

/* ══ 4. 列表行：hover 时左侧琥珀提示 ═════════════════════════════════════ */
.list-row,
.grid-row {
  transition: background-color var(--xl-dur-fast) var(--xl-ease),
              box-shadow var(--xl-dur-fast) var(--xl-ease);
}
.list-row:hover,
.grid-row:hover {
  box-shadow: inset 3px 0 0 0 var(--xl-amber);
}

/* ══ 5. 表单控件：聚焦时边框过渡（不是硬切） ═════════════════════════════ */
.form-control,
.input-with-feedback {
  transition: border-color var(--xl-dur) var(--xl-ease),
              box-shadow var(--xl-dur) var(--xl-ease);
}

/* ══ 6. 标签页：下划线滑入 ═══════════════════════════════════════════════ */
.form-tabs .nav-link,
.nav-tabs .nav-link {
  transition: color var(--xl-dur) var(--xl-ease),
              border-color var(--xl-dur) var(--xl-ease);
}

/* ══ 7. 页面切换：内容淡入（避免整屏硬闪） ═══════════════════════════════ */
@keyframes xl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.layout-main-section,
.page-container {
  animation: xl-fade var(--xl-dur) var(--xl-ease) both;
}

/* ══ 8. AI 交接点页面：结果表格逐行浮现 ══════════════════════════════════ */
@keyframes xl-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fde-ai-table tbody tr {
  animation: xl-row-in var(--xl-dur-slow) var(--xl-ease) both;
}
.fde-ai-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.fde-ai-table tbody tr:nth-child(2) { animation-delay: 45ms; }
.fde-ai-table tbody tr:nth-child(3) { animation-delay: 90ms; }
.fde-ai-table tbody tr:nth-child(4) { animation-delay: 135ms; }
.fde-ai-table tbody tr:nth-child(5) { animation-delay: 180ms; }
.fde-ai-table tbody tr:nth-child(6) { animation-delay: 225ms; }

/* 「需人确认」行：琥珀左条呼吸一次，把注意力引过去 */
@keyframes xl-attn {
  0%   { box-shadow: inset 3px 0 0 0 rgba(246, 168, 0, 0); }
  40%  { box-shadow: inset 3px 0 0 0 rgba(246, 168, 0, .9); }
  100% { box-shadow: inset 3px 0 0 0 rgba(246, 168, 0, .55); }
}
.fde-ai-table tr.review {
  animation: xl-row-in var(--xl-dur-slow) var(--xl-ease) both,
             xl-attn 900ms var(--xl-ease) 300ms both;
}

/* ══ 9. 登录页：卡片入场 ═════════════════════════════════════════════════ */
@keyframes xl-login-in {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.for-login .page-card-head {
  animation: xl-rise var(--xl-dur-slow) var(--xl-ease) both;
}
.for-login .login-content.page-card {
  animation: xl-login-in 320ms var(--xl-ease) 60ms both;
}
.for-login .page-card-head .app-logo {
  animation: xl-rise 360ms var(--xl-ease) both;
}

/* ══ 10. 骨架屏：给异步加载用（AI 调用期间） ═════════════════════════════ */
@keyframes xl-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.fde-ai-busy {
  background: linear-gradient(90deg,
    rgba(238, 242, 240, 0) 0%,
    rgba(238, 242, 240, .9) 50%,
    rgba(238, 242, 240, 0) 100%);
  background-size: 200% 100%;
  animation: xl-shimmer 1.4s linear infinite;
  border-radius: 6px;
}

/* ══ 11. 尊重系统设置：关掉全部动效 ══════════════════════════════════════
   这条是硬要求。关掉后界面必须仍然完整可用（不能依赖动画才能看见内容）。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .widget,
  .shortcut-widget-box,
  .dashboard-widget-box,
  .fde-ai-table tbody tr,
  .for-login .login-content.page-card,
  .for-login .page-card-head {
    opacity: 1 !important;
    transform: none !important;
  }
}