/* ==========================================================================
   FinLearn 动态增强层（Motion+）
   --------------------------------------------------------------------------
   用户反馈"动态属性也不够"。审计确认此前只有：
     · 入场淡入（一次性）
     · hover 抬起
     · 滚动进度条
   缺少：持续型动效、数据进入视口的动画、渐变流动、骨架微动、图表绘制动画。

   本层补齐 8 类动效，全部遵循：
     · 只动 transform / opacity / background-position（GPU 友好，不重排）
     · 统一 --dur-* 与 --ease-* 令牌
     · prefers-reduced-motion 下全部关闭
   ========================================================================== */

/* ==========================================================================
   1. 渐变流动（首屏/数据带背景缓慢移动）
   ========================================================================== */
@keyframes fl-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero {
    background-size: 180% 180% !important;
    animation: fl-gradient-shift 22s ease-in-out infinite;
  }

  .stat-band {
    background-size: 170% 170% !important;
    animation: fl-gradient-shift 26s ease-in-out infinite reverse;
  }
}

/* ==========================================================================
   2. 首屏光斑缓慢漂浮（三个不同周期，形成层次）
   ========================================================================== */
@keyframes fl-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-24px, 18px, 0) scale(1.06); }
}
@keyframes fl-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(20px, -16px, 0) scale(1.04); }
}
@keyframes fl-float-c {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .55; }
  50%      { transform: translate3d(12px, 22px, 0); opacity: .8; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero__glow--a { animation: fl-float-a 18s ease-in-out infinite; }
  .home-hero__glow--b { animation: fl-float-b 24s ease-in-out infinite; }
  .home-hero__grid    { animation: fl-float-c 30s ease-in-out infinite; }
}

/* ==========================================================================
   3. 网格底纹缓慢平移（科技感）
   ========================================================================== */
@keyframes fl-grid-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 56px 56px, 56px 56px; }
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero__grid,
  .stat-band__grid {
    animation: fl-grid-drift 40s linear infinite;
  }
}

/* ==========================================================================
   4. 条形图进入视口时从 0 展开
   ========================================================================== */
.fl-bar__fill { transform: scaleX(0); }
.fl-bar.is-in .fl-bar__fill { transform: scaleX(1); }

/* 进度条同样处理（用 CSS 自定义属性控制目标宽度） */
@keyframes fl-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.page-body .progress-bar[data-grow],
.page-body .sla-bar__fill[data-grow] {
  transform-origin: left center;
  animation: fl-grow-x 900ms var(--ease-out) both;
}

/* ==========================================================================
   5. 卡片交错入场（同排卡片依次浮现，而不是整块一起）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .fl-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  .fl-stagger.is-in > * { opacity: 1; transform: none; }
  .fl-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
  .fl-stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
  .fl-stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
  .fl-stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
  .fl-stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
  .fl-stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }
  .fl-stagger.is-in > *:nth-child(7) { transition-delay: 360ms; }
  .fl-stagger.is-in > *:nth-child(8) { transition-delay: 420ms; }
}

/* ==========================================================================
   6. 数字滚动的视觉强化（尾数闪烁高亮）
   ========================================================================== */
@keyframes fl-pulse-once {
  0%   { color: var(--cat-blue); }
  100% { color: inherit; }
}

.fl-counted { animation: fl-pulse-once 700ms var(--ease-out) both; }

/* 数据带里的数字：滚动时轻微放大 */
@keyframes fl-count-pop {
  0%   { transform: scale(.92); opacity: .4; }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

.fl-counting { animation: fl-count-pop 800ms var(--ease-spring) both; display: inline-block; }

/* ==========================================================================
   7. 加载骨架：流动微光（已有 shimmer，这里补齐卡片与表格行）
   ========================================================================== */
@keyframes fl-shimmer-move {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton,
.skeleton--card,
.skeleton--row {
  background: linear-gradient(90deg, #eef2f7 8%, #f8fbfe 22%, #eef2f7 36%);
  background-size: 200% 100%;
  animation: fl-shimmer-move 1.6s linear infinite;
  border-radius: var(--rd-md);
}

.skeleton--row { height: 20px; margin: var(--sp-2) 0; }

/* ==========================================================================
   8. 状态点的呼吸动画（数据实时 / 进行中 / 超时）
   ========================================================================== */
@keyframes fl-breathe {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); opacity: .82; }
}

.fl-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.fl-dot--live    { color: var(--cat-emerald); }
.fl-dot--busy    { color: var(--cat-blue); }
.fl-dot--overdue { color: var(--cat-rose); }

@media (prefers-reduced-motion: no-preference) {
  .fl-dot--live    { animation: fl-breathe 2.2s ease-in-out infinite; }
  .fl-dot--busy    { animation: fl-breathe 1.6s ease-in-out infinite; }
  .fl-dot--overdue { animation: fl-breathe 1.1s ease-in-out infinite; }
}

/* 顶栏「数据实时」徽标加个呼吸点 */
.page-wrapper > .navbar .badge.bg-green-lt::before,
.page-wrapper > .navbar .badge.bg-blue-lt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .page-wrapper > .navbar .badge.bg-green-lt::before { animation: fl-breathe 2.2s ease-in-out infinite; }
}

/* ==========================================================================
   9. 表格新行高亮（数据刷新时）
   ========================================================================== */
@keyframes fl-row-in {
  0%   { background: #e8f1fb; }
  100% { background: transparent; }
}

.page-body tr.fl-row-new td { animation: fl-row-in 1400ms var(--ease-out) both; }

/* ==========================================================================
   10. 侧栏当前项的指示条脉冲
   ========================================================================== */
@keyframes fl-indicator-in {
  0%   { height: 0; opacity: 0; }
  100% { height: 18px; opacity: 1; }
}

.navbar-vertical .nav-link.active::before {
  animation: fl-indicator-in 260ms var(--ease-out) both;
}

/* ==========================================================================
   11. 横向导航下划线滑入
   ========================================================================== */
.fl-tabs__item { position: relative; }

.fl-tabs__item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cat-blue);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-out);
}

.fl-tabs__item:hover::after { width: 60%; }
.fl-tabs__item[aria-current="page"]::after { width: 0; }

/* ==========================================================================
   12. 卡片光标跟随光斑（用 CSS 变量，JS 只写变量）
   ========================================================================== */
.page-body .card,
.page-body .tool,
.page-body .viz {
  background-image: radial-gradient(
    220px circle at var(--mx, -999px) var(--my, -999px),
    color-mix(in srgb, var(--fl-accent, var(--cat-blue)) 7%, transparent),
    transparent 70%
  );
}

/* ==========================================================================
   13. 图表卡 hover 时的轻微放大（ApexCharts 容器）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .page-body .viz:hover .apexcharts-canvas { transform: scale(1.012); transition: transform var(--dur-base) var(--ease-out); }
}

/* ==========================================================================
   14. 全站降级
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .home-hero,
  .stat-band,
  .home-hero__glow--a,
  .home-hero__glow--b,
  .home-hero__grid,
  .stat-band__grid,
  .skeleton,
  .fl-dot,
  .navbar-vertical .nav-link.active::before {
    animation: none !important;
  }

  .fl-bar__fill { transform: scaleX(1) !important; }
  .fl-stagger > * { opacity: 1 !important; transform: none !important; }

  .page-body .card,
  .page-body .tool,
  .page-body .viz { background-image: none; }
}