/**
 * 全站「进入页面」加载动画 —— 四色圆点（与旧站 cpgzs 同款），带淡出
 *
 * 结构：<div id="pageLoading" class="page-loader-overlay page-loading"><div class="loading"></div></div>
 *
 * 状态拆分：
 *   .page-loader-overlay            遮罩本体（常驻 DOM，负责定位/底色/淡出过渡）
 *   .page-loader-overlay.page-loading   「显示中」，撤掉这个类就是淡出
 *
 * 所以站内所有撤除逻辑（static/utils/index.js 的 closeLoader()、index.php、
 * query/index.php、reg.php、pledge_admin.php）都不用改，它们 remove 的就是 .page-loading。
 */

.page-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bs-body-bg, #fff);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 隐藏时把 visibility 的切换推到过渡结束，才看得到淡出 */
  transition: opacity .5s ease, visibility 0s linear .5s;
}

.page-loader-overlay.page-loading {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .5s ease, visibility 0s linear 0s;
}

/* 锁定期：页面还在加载，强制保持可见，挡住各处提前移除 .page-loading */
.page-loader-overlay.page-loader-hold {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.page-loader-overlay .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%) rotate(75deg);
}

.page-loader-overlay .loading::before,
.page-loader-overlay .loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  transform: translate(-50%, -50%);
  animation: page-loading-dots 1.5s infinite linear;
}

.page-loader-overlay .loading::before {
  box-shadow: 15px 15px #e77f67, -15px -15px #778beb;
}

.page-loader-overlay .loading::after {
  box-shadow: 15px 15px #f8a5c2, -15px -15px #f5cd79;
  transform: translate(-50%, -50%) rotate(90deg);
}

@keyframes page-loading-dots {
  50% {
    height: 45px;
  }
}

/* 尊重系统「减少动态效果」：四个点保留，停掉脉冲与淡出 */
@media (prefers-reduced-motion: reduce) {
  .page-loader-overlay {
    transition: none;
  }

  .page-loader-overlay .loading::before,
  .page-loader-overlay .loading::after {
    animation: none;
    height: 45px;
  }
}

/* 自定义滚动条整体样式 */
::-webkit-scrollbar {
  width: 6px; /* 设置滚动条宽度 */
  background-color: #f9f9f9; /* 滚动条背景色 */
}

/* 自定义滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #bdbdbd; /* 滑块背景色 */
}

/* 自定义滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道背景色 */
}