/* ==========================================================================
   wave-progress.css
   1. 隐藏窗口滚动条
   2. 导航下沿的水面阅读进度条（形状由 wave-progress.js 写入，颜色全在这里）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 隐藏窗口滚动条
   主题用 * 通配定义滚动条，这里只精确命中视口这一条，TOC、代码块等内部滚动条不受影响。
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: none; /* Firefox、新版 Chromium/Safari */
  -ms-overflow-style: none; /* 旧 Edge */
}
html::-webkit-scrollbar { display: none; }
/* 不支持 scrollbar-width 的浏览器（Safari < 18.2、Chromium < 121）取视口滚动条样式时先看 body，
   而主题的 * 通配也命中 body，只写 html 那条不生效。这条仍是窗口滚动条本身，不影响内部滚动条。 */
body::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   2. 水面进度条
   -------------------------------------------------------------------------- */

/* 注册颜色变量，深浅色切换时才能跟随全站 0.3s 渐变；不支持的浏览器直接切换 */
@property --wp-source { syntax: '<color>'; inherits: true; initial-value: #2474b5; }
@property --wp-water  { syntax: '<color>'; inherits: true; initial-value: #3d8bf2; }
@property --wp-front  { syntax: '<color>'; inherits: true; initial-value: #2a93c7; }
@property --wp-haze   { syntax: '<color>'; inherits: true; initial-value: rgba(92, 161, 255, .34); }
@property --wp-film   { syntax: '<color>'; inherits: true; initial-value: rgba(92, 161, 255, .22); }
@property --wp-rim    { syntax: '<color>'; inherits: true; initial-value: rgba(168, 212, 255, .9); }
@property --wp-glint  { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .95); }

#wave-progress {
  /* 水的颜色固定写死，不用 --anzhiyu-main：它深色下是半透明白，文章页还可能被主色调功能改成封面色 */
  --wp-source: #2474b5; /* 上游，左端 */
  --wp-water: #3d8bf2;
  --wp-front: #2a93c7; /* 下游，右端 */
  --wp-haze: rgba(92, 161, 255, .34); /* 后层水 */
  --wp-film: rgba(92, 161, 255, .22); /* 湿痕 */
  --wp-rim: rgba(168, 212, 255, .9); /* 水面线 */
  --wp-glint: rgba(255, 255, 255, .95); /* 水面线上流动的亮光 */

  position: fixed;
  top: 60px; /* 导航下沿 */
  left: 0;
  z-index: 90;
  width: 100%;
  height: 15px;
  pointer-events: none;
  contain: strict;
  will-change: transform; /* 自成合成层，逐帧重绘不牵连页面 */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 8.5px, transparent 14px);
  mask-image: linear-gradient(180deg, #000 0, #000 8.5px, transparent 14px); /* 水底淡出，没有硬边 */
  transition: --wp-source .3s, --wp-water .3s, --wp-front .3s, --wp-haze .3s, --wp-film .3s, --wp-rim .3s, --wp-glint .3s;
}

[data-theme="dark"] #wave-progress {
  --wp-source: #2f7fd6;
  --wp-water: var(--anzhiyu-blue, #5ca1ff);
  --wp-front: #7fd4f5;
  --wp-haze: rgba(92, 161, 255, .3);
  --wp-film: rgba(127, 212, 245, .16);
  --wp-rim: rgba(176, 216, 255, .55);
  --wp-glint: rgba(230, 245, 255, .98);
}

#wave-progress > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 这些层每帧改形状，不能被任何全局 transition 拖慢 */
#wave-progress .wp-film,
#wave-progress .wp-back,
#wave-progress .wp-rim,
#wave-progress .wp-body { transition: none !important; }

/* 实体导航时用卡片底色填住水面上方，正文从水后经过时不会从缝里露出来。
   避开最上面 1px，不压导航的描边；头图态导航透明，这层隐藏。 */
#wave-progress .wp-air {
  top: 1px;
  right: auto;
  width: calc(100% + 48px);
  background: linear-gradient(90deg, var(--anzhiyu-card-bg, #fff) calc(100% - 48px), transparent);
  opacity: 0;
  transition: opacity .3s !important;
}
html:has(#page-header.nav-fixed) #wave-progress .wp-air { opacity: 1; }

#wave-progress .wp-film {
  top: 3px;
  right: auto;
  width: calc(100% + 96px);
  background: linear-gradient(180deg, transparent, var(--wp-film) 55%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 128px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 128px), transparent);
}

#wave-progress .wp-back { background: var(--wp-haze); }

#wave-progress .wp-rim {
  background-color: var(--wp-rim);
  background-image: repeating-linear-gradient(90deg,
    transparent 0, var(--wp-glint) 90px, transparent 210px,
    transparent 300px, var(--wp-glint) 340px, transparent 400px, transparent 520px);
}

#wave-progress .wp-body {
  transform: translateY(1.1px); /* 比 rim 低一点，rim 只露出上沿那条高光 */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, 0) 7px),
    linear-gradient(90deg, var(--wp-source), var(--wp-water) 55%, var(--wp-front));
}

@media (prefers-reduced-motion: reduce) {
  #wave-progress,
  #wave-progress .wp-air { transition: none !important; }
}

@media print {
  #wave-progress { display: none; }
}