/**
 * 优化版滑动阻尼效果样式
 */

/* 1. 基础容器设置 */
body.smooth-scroll-enabled {
  /* 优化滚动行为，防止触摸冲突 */
  overscroll-behavior-y: none;
  /* 隐藏系统滚动条，但保留滚动位置计算功能 */
  scrollbar-width: thin; /* Firefox 设为细滚动条 */
}

/* Chrome/Safari 滚动条优化：不完全隐藏，而是透明或极细，提升体验 */
body.smooth-scroll-enabled::-webkit-scrollbar {
  width: 6px;
}
body.smooth-scroll-enabled::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* 2. 视图容器 - 这一层是静止的视口 */
.smooth-scroll-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* 根据主题调整，确保在背景层之上 */
  pointer-events: none; /* 自身不响应点击，穿透给内容 */
}

/* 3. 滚动容器 - 这一层是被 JS 驱动位移的 */
.smooth-scroll-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  will-change: transform; /* 关键：告知浏览器开启 GPU 加速，但仅针对本层 */
  pointer-events: auto; /* 恢复点击响应 */
  /* 基础变换，防止抖动 */
  transform: translate3d(0, 0, 0); 
}

/* 4. 【核心修复】性能优化 - 严禁使用 * 全选开启强制 3D */
/* 仅针对大型滚动块开启加速，不要针对所有小元素 */
.smooth-scroll-box img,
.smooth-scroll-box iframe,
.smooth-scroll-box video {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 5. 解决内容闪烁 */
.smooth-scroll-enabled #main,
.smooth-scroll-enabled .main-content {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 6. 处理 Stellar 主题中的固定元素 */
/* 因为父容器有了 transform，内部元素的 position: fixed 会退化为 absolute */
/* 我们需要确保诸如“返回顶部”等按钮在容器外，或者强制调整 */
.smooth-scroll-box .fixed,
.smooth-scroll-box [data-fixed="true"] {
  /* 提示：建议这类元素放在 #main 之外的 body 层级 */
}

/* 7. 移动端回退 - 彻底重置 */
@media (max-width: 767px) {
  body.smooth-scroll-enabled {
    scrollbar-width: auto;
    overscroll-behavior-y: auto;
  }
  
  body.smooth-scroll-enabled::-webkit-scrollbar {
    width: auto;
    display: block;
  }

  .smooth-scroll-view {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  .smooth-scroll-box {
    position: relative !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* 8. 处理覆盖层 - 例如 Stellar 的搜索弹窗、大图预览 */
/* 确保这些组件的 z-index 能盖过视图容器 */
#search,
#photoswipe,
.fancybox-container {
  z-index: 9999 !important;
}