/* === ZG Motion — emilkowalski 风格打磨 + GSAP 驱动 ===
   原则：入口用 ease-out + scale(0.95~0.97) 起手（绝不用 scale(0)）；
   stagger 30-80ms；UI 动画 <300ms；只动 transform/opacity（GPU）；
   尊重 prefers-reduced-motion；hover 效果限定精确指针设备。
   绝不在此文件里用 opacity:0 隐藏元素——隐藏交给 GSAP，
   这样 JS 失败时界面仍正常可见。 */

:root {
  /* 统一缓动令牌（全站复用，避免各文件各写各的 ease/linear） */
  --zg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* 强 ease-out（入场/离场） */
  --zg-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* 屏内位移/变形 */
  --zg-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* 抽屉/弹出（iOS 风） */
  --zg-ease: var(--zg-ease-out);                     /* 兼容别名 */
  --zg-dur-fast: 140ms;
  --zg-dur-mid: 220ms;
  --zg-dur-slow: 300ms;
}

/* 登录主按钮：transform 完全交给 GSAP（磁吸 + 按压），
   因此这里取消 CSS 的 hover 位移，避免与 GSAP 内联 transform 打架 */
.zg-btn-login { will-change: transform; }
.zg-btn-login:hover { transform: none; }

/* 通用可点击元素：按压反馈（CSS 即可，<160ms，Emil: 按钮必须"听得见"）
   只列精确属性，绝不用 transition:all；transform 用于 :active 缩放 */
.btn, .btn-primary, .btn-outline, .btn-secondary, .btn-ghost,
.zg-modal-actions button, .zg-forgot,
.sub-tab, .nav-item, .kb-modal-close, .detail-close,
.chat-suggestion, .knowledge-card, .kb-cat-item, .kb-cat-sub,
.kb-course-card, .kb-path-card, .kb-tag-cloud-item, .alert-card,
.logout-btn, .hamburger, .zg-tag {
  transition: transform var(--zg-dur-fast) var(--zg-ease-out),
              background-color var(--zg-dur-mid) ease,
              color var(--zg-dur-mid) ease,
              border-color var(--zg-dur-mid) ease,
              box-shadow var(--zg-dur-mid) var(--zg-ease-out),
              opacity var(--zg-dur-mid) ease;
}
.btn:active, .btn-primary:active, .btn-outline:active, .btn-secondary:active, .btn-ghost:active,
.zg-modal-actions button:active, .zg-forgot:active,
.sub-tab:active, .nav-item:active, .kb-modal-close:active, .detail-close:active,
.chat-suggestion:active, .knowledge-card:active, .kb-cat-item:active, .kb-cat-sub:active,
.kb-course-card:active, .kb-path-card:active, .kb-tag-cloud-item:active, .alert-card:active,
.logout-btn:active, .hamburger:active, .zg-tag:active {
  transform: scale(0.97);
}

/* 卡片悬浮微抬升：仅在精确指针设备（触摸设备不触发假 hover） */
@media (hover: hover) and (pointer: fine) {
  .kpi-card, .card, .detail-section, .section {
    transition: transform var(--zg-dur-mid) var(--zg-ease-out),
                box-shadow var(--zg-dur-mid) var(--zg-ease-out);
  }
  .kpi-card:hover, .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.10);
  }
  /* 侧栏导航：背景/文字平滑 + 按压缩放（transform 一并过渡，避免瞬移） */
  .nav-item { transition: transform var(--zg-dur-fast) var(--zg-ease-out),
                          background-color 150ms ease, color 150ms ease; }
  /* 数据表格行悬浮柔和反馈 */
  .data-table tbody tr { transition: background-color 120ms ease; }
}

/* 侧栏激活项指示平滑 */
.nav-item.active { transition: background-color 200ms var(--zg-ease-out), color 200ms var(--zg-ease-out); }

/* ========== 卡片滚动进入视口 Reveal ========== */
.zg-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--zg-ease-out), transform .6s var(--zg-ease-out);
}
.zg-reveal.zg-reveal-in { opacity: 1; transform: none; }

/* 模态遮罩：淡入时轻微模糊，掩过渡瑕疵（Emil: blur 弥合 imperfect crossfade） */
.zg-modal-mask { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ========== 通用详情弹窗（Detail Modal）退出动画 ==========
   入场沿用 main.css 的 dmFadeIn/dmSlideUp（已升级缓动），此处仅补对称的退出。 */
.detail-overlay.zg-closing { animation: dmFadeOut var(--zg-dur-fast) var(--zg-ease-out) forwards; }
.detail-overlay.zg-closing .detail-modal { animation: dmSlideDown var(--zg-dur-fast) var(--zg-ease-out) forwards; }
@keyframes dmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes dmSlideDown {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(8px) scale(0.97); opacity: 0; }
}

/* ========== 知识库弹窗（kbModal）入场 + 退出 ========== */
.kb-modal-overlay.zg-anim-in { animation: kbFadeIn var(--zg-dur-mid) var(--zg-ease-out); }
.kb-modal-overlay.zg-anim-in .kb-modal { animation: kbPopIn var(--zg-dur-slow) var(--zg-ease-out); }
.kb-modal-overlay.zg-closing { animation: dmFadeOut var(--zg-dur-fast) var(--zg-ease-out) forwards; }
.kb-modal-overlay.zg-closing .kb-modal { animation: dmSlideDown var(--zg-dur-fast) var(--zg-ease-out) forwards; }
@keyframes kbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kbPopIn {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* 减少动效偏好：保留必要淡入，移除位移、缩放与悬浮抬升、无限装饰
   （Emil：reduced-motion = 更少更柔，不是全无；保留 opacity/color 过渡） */
@media (prefers-reduced-motion: reduce) {
  .kpi-card:hover, .card:hover { transform: none !important; }
  .zg-btn-login:hover { transform: none !important; }
  .zg-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .detail-overlay, .detail-modal,
  .kb-modal-overlay, .kb-modal { animation-duration: 0.18s !important; }
  .detail-overlay.zg-closing, .kb-modal-overlay.zg-closing,
  .detail-overlay.zg-closing .detail-modal,
  .kb-modal-overlay.zg-closing .kb-modal { animation: none !important; }
  * { scroll-behavior: auto !important; }
}