/* ============================================================================
 * perf-smooth.css —— 前端流畅度优化覆盖层
 *
 * 加载顺序：必须在所有业务 CSS 之后（index.html 的最后一个 <link>）
 * 设计原则：只改「渲染管线行为」，不改视觉设计。带 !important 的地方
 *           都是必须压过 Element Plus / 业务样式的属性。
 *
 * 三大优化：
 *   ① 合成层提升 —— 让滚动/动画元素走 GPU 合成，不触发重绘
 *   ② backdrop-filter 降级 —— blur 半径与 GPU 开销近似平方相关
 *   ③ transition:all → 具体属性 —— 避免浏览器监听 layout 属性
 * ========================================================================== */

/* ═══ ① 合成层提升 ═══════════════════════════════════════════════════════
 * 为什么关键：backdrop-filter 挂在 position:sticky 上时，滚动过程中
 * 每一帧都要对「元素背后的全部内容」重新做一次高斯模糊。
 * 提升为独立合成层后，浏览器只需把已有图层合成，不需要重绘。
 */
.light-header,
.pickup-header,
.nav-bar,
.admin-header,
.bottom-bar,
.order-action-bar,
.flow-page .flow-fixed-bar,
.modal-layer,
.drawer-layer {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* 只在「可能动画」的元素上常驻 will-change —— 滥用会吃显存 */
.el-overlay,
.el-dialog,
.el-drawer,
.el-message,
.el-notification {
  will-change: opacity, transform;
}

/* ═══ ② backdrop-filter 降级 ════════════════════════════════════════════
 * 桌面端保留完整质感；移动端/触摸设备降半径。
 * blur(18px) → blur(9px) 的 GPU 开销约降到 1/4，视觉差异极小。
 */
@media (max-width: 900px), (pointer: coarse) {
  .light-header, .pickup-header {
    -webkit-backdrop-filter: blur(9px) !important;
    backdrop-filter: blur(9px) !important;
  }
  .pickup-header {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  .nav-bar {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  .admin-header {
    -webkit-backdrop-filter: blur(7px) !important;
    backdrop-filter: blur(7px) !important;
  }
  .bottom-bar, .flow-page .flow-fixed-bar {
    -webkit-backdrop-filter: blur(9px) !important;
    backdrop-filter: blur(9px) !important;
  }
  .icon-button {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  .modal-layer {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }
  .stage-four-root .modal-layer,
  .stage-four-root .drawer-layer {
    -webkit-backdrop-filter: blur(6px) saturate(112%) !important;
    backdrop-filter: blur(6px) saturate(112%) !important;
  }
  .flow-page .flow-back, .flow-page .flow-icon-button,
  .flow-page .order-stepper,
  .flow-page .flow-detail-card, .flow-page .flow-cart-card,
  .flow-page .flow-checkout-card {
    -webkit-backdrop-filter: blur(9px) !important;
    backdrop-filter: blur(9px) !important;
  }
  .order-action-bar {
    -webkit-backdrop-filter: blur(10px) saturate(118%) !important;
    backdrop-filter: blur(10px) saturate(118%) !important;
  }
}

/* 极低端设备（4 核以下 / 省电模式）：直接关模糊。
 * 视觉损失很小（背后本来就是接近不透明的浅色底），帧率提升非常明显。 */
@media (max-width: 480px) {
  .nav-bar, .admin-header, .icon-button {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ═══ ③ transition: all → 具体属性 ══════════════════════════════════════
 * `all` 会让浏览器对「所有可动画属性」建立监听，其中包含 width/height/
 * margin/padding 这类 layout 属性 —— 一旦命中就要整棵子树重排。
 * 这些过渡实际只动 opacity/transform，改具体属性后可以完全走合成器线程。
 */
.el-fade-in-enter-active, .el-fade-in-leave-active,
.el-fade-in-linear-enter-active, .el-fade-in-linear-leave-active,
.el-zoom-in-center-enter-active, .el-zoom-in-center-leave-active,
.el-zoom-in-top-enter-active, .el-zoom-in-top-leave-active,
.el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-leave-active,
.el-zoom-in-left-enter-active, .el-zoom-in-left-leave-active {
  transition: opacity var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1),
              transform var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1) !important;
}

.el-list-enter-active, .el-list-leave-active {
  transition: opacity .28s cubic-bezier(.55, 0, .1, 1),
              transform .28s cubic-bezier(.55, 0, .1, 1) !important;
}

.el-upload-list__item {
  transition: opacity .3s cubic-bezier(.55, 0, .1, 1),
              transform .3s cubic-bezier(.55, 0, .1, 1) !important;
}

/* 业务自写的过渡：只保留合成友好属性 */
.progress-label {
  transition: opacity .3s ease, transform .3s ease !important;
}
.progress-line {
  transition: transform .4s ease, background-color .4s ease !important;
  transform-origin: left center;
  will-change: transform;
}

/* ═══ ④ 滚动 / 触摸行为 ═════════════════════════════════════════════════
 * overscroll-behavior: contain —— 阻止滚动链（内层滚到底后带动整页滚，
 * 是「滑一下停不下来」的常见来源）
 */
.el-scrollbar__wrap,
.el-table__body-wrapper,
.el-select-dropdown__wrap,
.flow-page,
.pickup-page {
  overscroll-behavior: contain;
}

/* 去掉移动端点击的 300ms 延迟判定 */
button, a, [role="button"], .el-button, .icon-button, .nav-item {
  touch-action: manipulation;
}

/* 表格/列表滚动：明确告诉浏览器这块可独立滚动 */
.el-table__body-wrapper,
.el-scrollbar__wrap {
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* ═══ ⑤ 长列表/大表：隔离重绘范围 ═══════════════════════════════════════
 * contain: paint 让元素的绘制结果被裁剪在自身盒内，
 * 内部变化不会导致父级/兄弟节点重绘。
 */
.el-table__body tr,
.el-table__header tr {
  contain: paint;
}

/* 卡片类容器：布局+绘制双重隔离 */
.el-card, .el-dialog__body, .el-drawer__body {
  contain: layout paint style;
}

/* ═══ ⑥ 阴影动画降本 ════════════════════════════════════════════════════
 * box-shadow 动画会触发绘制（paint）。对 hover 态改成更廉价的方案：
 * 用 transform 轻微上浮来传达同样的「浮起」语义。
 */
.el-button, .el-card, .icon-button {
  transition-property: color, background-color, border-color, opacity, transform, box-shadow;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ═══ ⑦ 无障碍 / 省电模式 ═══════════════════════════════════════════════
 * 用户在系统里开了「减弱动态效果」时，尊重它并顺带省电。
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .light-header, .pickup-header, .nav-bar, .admin-header,
  .bottom-bar, .flow-page .flow-fixed-bar, .modal-layer, .drawer-layer,
  .order-action-bar, .icon-button {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ═══ ⑧ 渲染质量微调 ════════════════════════════════════════════════════ */
html {
  /* 避免「平滑滚动」在长页面上拖慢合成 */
  scroll-behavior: auto;
  /* 限制字体连字/字距计算，长文本列表下有小幅收益 */
  text-rendering: optimizeSpeed;
}
html, body {
  /* 明确主滚动容器，帮助浏览器选择正确的滚动策略 */
  overscroll-behavior-y: none;
}