/* stylelint-disable selector-class-pattern */
/* ============================================================
   smooth-scroll.css —— 全站虚拟平滑滚动（js/smooth-scroll.js 配套）
   原理：禁用原生滚动，固定视口 + JS 缓动平移内容层。
   使用：页面结构 .smooth-view（固定视口）> .smooth-body（内容层），
        并引入 js/smooth-scroll.js（须在 common.js / index.js 之后）。
   注意：未引入本文件的页面保持原生滚动，互不影响。
   ============================================================ */
html,
body {
  overflow: hidden;
  height: 100%;
}

/* 固定视口 */
.smooth-view {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* 被平移的内容层 */
.smooth-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ================= 子页面 banner 视差 ================= */
/* 背景图上探 30% 作为慢速下移余量，滚动时不露白边 */
.page-banner__img {
  position: relative;
  top: -30%;
  height: 130%;
  will-change: transform;
}

/* 标语文字：垂直居中改用独立 translate 属性，
   避免 JS 覆写 transform 时丢失居中 */
.page-banner__word {
  transform: none;
  translate: 0 -50%;
  will-change: transform, opacity, filter;
}

/* 触摸设备：banner 文字不为 blur 分配合成资源，降低 GPU 负载 */
@media (hover: none) {
  .page-banner__word {
    will-change: transform, opacity;
  }
}

/* ================= 自定义滚动条（项目主色） ================= */
.smooth-scrollbar {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  width: 8px;
  height: 100vh;
  background: rgba(15, 23, 42, 0.06);
}

.smooth-scrollbar__thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 55px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.78), rgba(var(--color-primary-rgb), 0.55));
  box-shadow: 0 10px 25px rgba(var(--color-primary-rgb), 0.22);
  cursor: grab;
}

.smooth-scrollbar__thumb:active {
  cursor: grabbing;
}

@media (max-width: 768px) {
  .smooth-scrollbar {
    width: 4px;
  }
}