/* ============================================================================
   page_fluidity.css
   页面流畅性增强：全局过渡 / 滚动性能 / 微交互 / 性能守卫 / 减少动画兜底
   站点：gugu8858.icu（Vue3 + Ant Design Vue）
   作用域：html body:has(.brand-lockup) —— 仅在品牌布局页面生效
   说明：过渡属性无需 !important；仅 prefers-reduced-motion 兜底处使用
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 全局平滑过渡（精确枚举交互元素，避免全元素 transition 的性能开销）
   -------------------------------------------------------------------------- */
html body:has(.brand-lockup) .ant-btn,
html body:has(.brand-lockup) .ant-input,
html body:has(.brand-lockup) .ant-input-affix-wrapper,
html body:has(.brand-lockup) .ant-select-selector,
html body:has(.brand-lockup) .ant-picker,
html body:has(.brand-lockup) .ant-tabs-tab,
html body:has(.brand-lockup) .ctrl-tab,
html body:has(.brand-lockup) .inj-pill,
html body:has(.brand-lockup) .ant-menu-item,
html body:has(.brand-lockup) .ant-menu-submenu-title,
html body:has(.brand-lockup) .ant-pagination-item,
html body:has(.brand-lockup) .ant-pagination-prev,
html body:has(.brand-lockup) .ant-pagination-next,
html body:has(.brand-lockup) .ant-tag,
html body:has(.brand-lockup) .ant-switch,
html body:has(.brand-lockup) .ant-segmented-item,
html body:has(.brand-lockup) .ant-dropdown-menu-item,
html body:has(.brand-lockup) .ant-card,
html body:has(.brand-lockup) .ctrl-card,
html body:has(.brand-lockup) a {
  transition: background-color .16s ease,
              border-color .16s ease,
              box-shadow .16s ease,
              transform .16s ease,
              color .16s ease;
}

/* --------------------------------------------------------------------------
   2. 滚动性能：主滚动区平滑滚动 + 滚动链隔离 + 滚动条细化增强
   -------------------------------------------------------------------------- */
html body:has(.brand-lockup) {
  
}

html body:has(.brand-lockup) .ant-layout-content,
html body:has(.brand-lockup) .ctrl-screen-area,
html body:has(.brand-lockup) .inj-table-area,
html body:has(.brand-lockup) .inj-table,
html body:has(.brand-lockup) .ant-table-body,
html body:has(.brand-lockup) .ant-table-content,
html body:has(.brand-lockup) .ant-modal-body,
html body:has(.brand-lockup) .ant-drawer-body {
  
  overscroll-behavior: contain; /* 滚动到边界不回弹牵连父级，减少联动抖动 */
}

/* Webkit 滚动条：8px、半透明、hover 提亮（在主题基础滚动条上细化） */
html body:has(.brand-lockup) .ant-layout-content::-webkit-scrollbar,
html body:has(.brand-lockup) .ctrl-screen-area::-webkit-scrollbar,
html body:has(.brand-lockup) .inj-table-area::-webkit-scrollbar,
html body:has(.brand-lockup) .inj-table::-webkit-scrollbar,
html body:has(.brand-lockup) .ant-table-body::-webkit-scrollbar,
html body:has(.brand-lockup) .ant-table-content::-webkit-scrollbar,
html body:has(.brand-lockup) .ant-modal-body::-webkit-scrollbar,
html body:has(.brand-lockup) .ant-drawer-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body:has(.brand-lockup) .ant-layout-content::-webkit-scrollbar-track,
html body:has(.brand-lockup) .ctrl-screen-area::-webkit-scrollbar-track,
html body:has(.brand-lockup) .inj-table-area::-webkit-scrollbar-track,
html body:has(.brand-lockup) .inj-table::-webkit-scrollbar-track,
html body:has(.brand-lockup) .ant-table-body::-webkit-scrollbar-track,
html body:has(.brand-lockup) .ant-table-content::-webkit-scrollbar-track,
html body:has(.brand-lockup) .ant-modal-body::-webkit-scrollbar-track,
html body:has(.brand-lockup) .ant-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}

html body:has(.brand-lockup) .ant-layout-content::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .ctrl-screen-area::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .inj-table-area::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .inj-table::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .ant-table-body::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .ant-table-content::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .ant-modal-body::-webkit-scrollbar-thumb,
html body:has(.brand-lockup) .ant-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, .28);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

html body:has(.brand-lockup) .ant-layout-content::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .ctrl-screen-area::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .inj-table-area::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .inj-table::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .ant-table-body::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .ant-table-content::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .ant-modal-body::-webkit-scrollbar-thumb:hover,
html body:has(.brand-lockup) .ant-drawer-body::-webkit-scrollbar-thumb:hover {
  background: rgba(127, 127, 127, .5);
  border: 2px solid transparent;
  background-clip: padding-box;
}

html body:has(.brand-lockup) .ant-layout-content::-webkit-scrollbar-corner,
html body:has(.brand-lockup) .ant-table-body::-webkit-scrollbar-corner,
html body:has(.brand-lockup) .ant-table-content::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox 滚动条细化 */
html body:has(.brand-lockup) .ant-layout-content,
html body:has(.brand-lockup) .ctrl-screen-area,
html body:has(.brand-lockup) .inj-table-area,
html body:has(.brand-lockup) .inj-table,
html body:has(.brand-lockup) .ant-table-body,
html body:has(.brand-lockup) .ant-table-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 127, 127, .35) transparent;
}

/* --------------------------------------------------------------------------
   3. 微交互：按钮悬浮抬升 / 按压缩放、卡片悬浮加深、菜单项平滑
   -------------------------------------------------------------------------- */
html body:has(.brand-lockup) .ant-btn:hover {
  transform: translateY(-1px);
}

html body:has(.brand-lockup) .ant-btn:active {
  transform: translateY(0) scale(.985);
}

html body:has(.brand-lockup) .ant-btn[disabled]:hover,
html body:has(.brand-lockup) .ant-btn[disabled]:active {
  transform: none; /* 禁用态不做位移反馈 */
}

html body:has(.brand-lockup) .ctrl-tab:hover,
html body:has(.brand-lockup) .inj-pill:hover,
html body:has(.brand-lockup) .ant-tabs-tab:hover {
  transform: translateY(-1px);
}

html body:has(.brand-lockup) .ant-card:hover,
html body:has(.brand-lockup) .ctrl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

html body:has(.brand-lockup) .ant-menu-item {
  border-radius: 6px; /* 配合背景过渡，悬浮态更柔和 */
}

/* --------------------------------------------------------------------------
   4. 性能守卫：高频重复元素禁用昂贵过渡；粘性头部谨慎提示合成层
   仅使用 transform / opacity / shadow 类 GPU 友好属性，不动 width/height
   -------------------------------------------------------------------------- */
html body:has(.brand-lockup) .ant-table-tbody > tr,
html body:has(.brand-lockup) .ant-table-tbody > tr > td,
html body:has(.brand-lockup) .ant-table-tbody > tr > th,
html body:has(.brand-lockup) .ant-list-item,
html body:has(.brand-lockup) .ant-tree-treenode,
html body:has(.brand-lockup) .ant-select-item {
  transition: none; /* 行级 hover 即时反馈，避免整表重绘卡顿 */
}

html body:has(.brand-lockup) .ant-table-header,
html body:has(.brand-lockup) .ant-table-cell-fix-left,
html body:has(.brand-lockup) .ant-table-cell-fix-right {
  will-change: transform; /* 仅固定/粘性区域，避免全页提升合成层 */
}

/* --------------------------------------------------------------------------
   5. prefers-reduced-motion 兜底：系统开启减少动画时禁用全部过渡/平滑滚动
   （无障碍覆盖，此处使用 !important 属必要）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body:has(.brand-lockup),
  html body:has(.brand-lockup) *,
  html body:has(.brand-lockup) *::before,
  html body:has(.brand-lockup) *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 图标兜底修复：.anticon svg 在 flex 容器中 width:1em 解析成 0 的问题 ---- */
html body:has(.brand-lockup) .anticon,
html body:has(.brand-lockup) .anticon svg {
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:has(.brand-lockup) .anticon svg {
  width: 1em !important;
  height: 1em !important;
  fill: currentColor !important;
}