/* 
 * 加载相关样式（去重整合版）
 * - 通用矩形跳动 Loader（统一为 rect-1~rect-5 关键帧）
 * - 尺寸修饰：--sm(18px, 默认) / --lg(32px)
 * - 列表/全屏覆盖层
 * - 顶部进度条
 * - 页面 Loader（首页全屏）
 * - 全局动画 keyframes（spin / centerSpin / glow 等）
 */

/* ------------------------------------------------------------
   wl- 前缀结构类别名 (桥接阶段)
   说明：原有 .loading-spinner / -indicator / -message / -text / -overlay
     将逐步迁移到 wl-loading-* 前缀，避免与状态类或三方冲突。
     当前阶段：提供无侵入别名，复用既有样式。
   移除策略：
  1. 代码层改为仅输出 wl- 前缀
  2. 统计确认无模板/JS 直接引用旧类
  3. 删除下面别名组合
------------------------------------------------------------ */
/* 别名不单独声明样式，完全依赖后续现有选择器，通过追加选择器方式逐步迁移；
  由于当前未追加到各块组合，这里仅文档化，后续阶段再批量合并：
  .loading-spinner > div, .wl-loading-spinner > div { ... } 等。
*/

/* ============================================================
  1) 通用加载动画：矩形跳动（改进版）
  ============================================================ */
.ajax-loading-spinner,
.loader-rect,
.wl-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px; /* 增加间距 */
  height: auto; /* 改为自适应高度 */
  background: transparent;
  border: 0;
  padding: 0;
}

/* 条目通用外观（改进尺寸和样式） */
.wl-loading-spinner > div,
.ajax-loading-spinner > div,
.loader-rect > div {
  width: 10px; /* 增加宽度 */
  height: 16px; /* 设置基础高度 */
  border-radius: 3px; /* 增加圆角 */
  background: var(--color-primary); /* 主题主色 */
  /* 增加 RGB 回退，防止 --color-primary-rgb 未定义时报错 */
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 0, 47, 167), 0.3); /* 添加阴影效果 */
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: height; /* 改为 height 变化 */
}

/* 保险：所有 loader 条目强制运行动画，防 reset/系统偏好意外暂停 */
.wl-loading-spinner > div,
.ajax-loading-spinner > div,
.loader-rect > div,
.loaderRectangle div {
  animation-play-state: running !important;
}

/* 可选：当容器带 .wl-force-anim 时，进一步加固 */
.wl-force-anim > div,
.wl-force-anim div {
  animation-play-state: running !important;
}

/* 若系统偏好减少动画：放慢而不是禁用（避免"完全不动"） */
@media (prefers-reduced-motion: reduce) {
  .wl-loading-spinner > div,
  .ajax-loading-spinner > div,
  .loader-rect > div,
  .loaderRectangle div {
    animation-duration: 1.2s !important;
  }
}

/* 修改动画：使用高度变化而非缩放 */
.wl-loading-spinner > div:nth-child(1),
.ajax-loading-spinner > div:nth-child(1),
.loader-rect > div:nth-child(1) {
  animation: rect-1 0.9s ease-in-out 0s infinite;
}

.wl-loading-spinner > div:nth-child(2),
.ajax-loading-spinner > div:nth-child(2),
.loader-rect > div:nth-child(2) {
  animation: rect-2 0.9s ease-in-out 0.1s infinite;
}

.wl-loading-spinner > div:nth-child(3),
.ajax-loading-spinner > div:nth-child(3),
.loader-rect > div:nth-child(3) {
  animation: rect-3 0.9s ease-in-out 0.2s infinite;
}

.wl-loading-spinner > div:nth-child(4),
.ajax-loading-spinner > div:nth-child(4),
.loader-rect > div:nth-child(4) {
  animation: rect-4 0.9s ease-in-out 0.3s infinite;
}

.wl-loading-spinner > div:nth-child(5),
.ajax-loading-spinner > div:nth-child(5),
.loader-rect > div:nth-child(5) {
  animation: rect-5 0.9s ease-in-out 0.4s infinite;
}

/* 改进的关键帧动画：使用高度变化 */
@keyframes rect-1 {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 32px;
  }
}
@keyframes rect-2 {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 42px;
  }
}
@keyframes rect-3 {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 52px;
  }
}
@keyframes rect-4 {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 42px;
  }
}
@keyframes rect-5 {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 32px;
  }
}

[data-theme="dark"] .wl-loading-spinner > div,
[data-theme="dark"] .ajax-loading-spinner > div,
[data-theme="dark"] .loader-rect > div {
  background: var(--color-primary);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb, 0, 102, 204), 0.4); /* 暗色模式下稍微增强阴影，带回退 */
}

/* 可选：大号尺寸（40px 高） */
.ajax-loading-spinner--lg,
.loader-rect--lg,
.wl-loading-spinner--lg {
  gap: 6px;
}
.ajax-loading-spinner--lg > div,
.loader-rect--lg > div,
.wl-loading-spinner--lg > div {
  width: 14px;
  height: 24px;
  border-radius: 4px;
}

/* 大号版本的动画 */
.ajax-loading-spinner--lg > div:nth-child(1),
.loader-rect--lg > div:nth-child(1) {
  animation: rect-lg-1 0.9s ease-in-out 0s infinite;
}

.ajax-loading-spinner--lg > div:nth-child(2),
.loader-rect--lg > div:nth-child(2) {
  animation: rect-lg-2 0.9s ease-in-out 0.1s infinite;
}

.ajax-loading-spinner--lg > div:nth-child(3),
.loader-rect--lg > div:nth-child(3) {
  animation: rect-lg-3 0.9s ease-in-out 0.2s infinite;
}

.ajax-loading-spinner--lg > div:nth-child(4),
.loader-rect--lg > div:nth-child(4) {
  animation: rect-lg-4 0.9s ease-in-out 0.3s infinite;
}

.ajax-loading-spinner--lg > div:nth-child(5),
.loader-rect--lg > div:nth-child(5) {
  animation: rect-lg-5 0.9s ease-in-out 0.4s infinite;
}

@keyframes rect-lg-1 {
  0%,
  100% {
    height: 24px;
  }
  40% {
    height: 48px;
  }
}
@keyframes rect-lg-2 {
  0%,
  100% {
    height: 24px;
  }
  40% {
    height: 64px;
  }
}
@keyframes rect-lg-3 {
  0%,
  100% {
    height: 24px;
  }
  40% {
    height: 80px;
  }
}
@keyframes rect-lg-4 {
  0%,
  100% {
    height: 24px;
  }
  40% {
    height: 64px;
  }
}
@keyframes rect-lg-5 {
  0%,
  100% {
    height: 24px;
  }
  40% {
    height: 48px;
  }
}

/* 视口居中修饰：需要固定在屏幕中心时给 loader 加 .is-fixed
   调整为约 30% 视口高度，确保更易见 */
.ajax-loading-spinner.is-fixed,
.loader-rect.is-fixed {
  position: fixed;
  top: 30vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001; /* 系统层：loading */
  pointer-events: none;
}

/* 当 Loader 直接挂在 body 下时，默认在视口约 30% 处显示 */
body > .ajax-loading-spinner,
body > .loader-rect {
  position: fixed;
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001; /* 系统层：loading */
  pointer-events: none;
}

/* 覆盖：列表/全屏遮罩内的 Loader 也遵循 30vh 规则（不再局限卡片中心） */
.ajax-loading-overlay > .ajax-loading-spinner,
.ajax-loading-overlay > .loader-rect,
.ajax-loading-overlay > .loaderRectangle,
.ajax-loading-overlay > .wl-loading-spinner,
.posts-grid .grid-loading-overlay > .ajax-loading-spinner,
.posts-grid .grid-loading-overlay > .loader-rect,
.posts-grid .grid-loading-overlay > .loaderRectangle,
.posts-grid .grid-loading-overlay > .wl-loading-spinner {
  position: fixed;
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001; /* 系统层：loading */
  pointer-events: none;
}

/* 强化：列表遮罩内矩形 Loader 的动画总是运行 */
.posts-grid .grid-loading-overlay .loader-rect > div,
.posts-grid .grid-loading-overlay .wl-loading-spinner > div {
  animation-iteration-count: infinite !important;
  animation-timing-function: ease-in-out !important;
  animation-play-state: running !important;
  will-change: height;
}

/* 明确指定每根条的动画名称与延迟，避免被其它规则覆盖 */
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(1),
.posts-grid .grid-loading-overlay .wl-loading-spinner > div:nth-child(1) {
  animation-name: rect-1 !important;
  animation-duration: 0.9s !important;
  animation-delay: 0s !important;
}
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(2),
.posts-grid .grid-loading-overlay .wl-loading-spinner > div:nth-child(2) {
  animation-name: rect-2 !important;
  animation-duration: 0.9s !important;
  animation-delay: 0.1s !important;
}
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(3),
.posts-grid .grid-loading-overlay .wl-loading-spinner > div:nth-child(3) {
  animation-name: rect-3 !important;
  animation-duration: 0.9s !important;
  animation-delay: 0.2s !important;
}
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(4),
.posts-grid .grid-loading-overlay .wl-loading-spinner > div:nth-child(4) {
  animation-name: rect-4 !important;
  animation-duration: 0.9s !important;
  animation-delay: 0.3s !important;
}
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(5),
.posts-grid .grid-loading-overlay .wl-loading-spinner > div:nth-child(5) {
  animation-name: rect-5 !important;
  animation-duration: 0.9s !important;
  animation-delay: 0.4s !important;
}

/* 若用户开启"减少动画"，仅放慢，不暂停 */
@media (prefers-reduced-motion: reduce) {
  .posts-grid .grid-loading-overlay .loader-rect > div,
  .posts-grid .grid-loading-overlay .wl-loading-spinner > div {
    animation-duration: 1.4s !important;
    animation-play-state: running !important;
  }
}

/* 历史命名兼容 - 更新为新样式 */
.loaderRectangle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.loaderRectangle div {
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: var(--color-primary);
  box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: height;
}
.loaderRectangle div:nth-child(1) {
  animation-name: rectangleOneAnim;
  animation-delay: 0s;
}
.loaderRectangle div:nth-child(2) {
  animation-name: rectangleTwoAnim;
  animation-delay: 0.1s;
}
.loaderRectangle div:nth-child(3) {
  animation-name: rectangleThreeAnim;
  animation-delay: 0.2s;
}
.loaderRectangle div:nth-child(4) {
  animation-name: rectangleFourAnim;
  animation-delay: 0.3s;
}
.loaderRectangle div:nth-child(5) {
  animation-name: rectangleFiveAnim;
  animation-delay: 0.4s;
}

@keyframes rectangleOneAnim {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 32px;
  }
}
@keyframes rectangleTwoAnim {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 42px;
  }
}
@keyframes rectangleThreeAnim {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 52px;
  }
}
@keyframes rectangleFourAnim {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 42px;
  }
}
@keyframes rectangleFiveAnim {
  0%,
  100% {
    height: 16px;
  }
  40% {
    height: 32px;
  }
}

/* ============================================================
   2) 全局动画 keyframes
   ============================================================ */
@keyframes centerSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes glow {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    /* Skeleton 颜色/渐变（灰色版本） */
    --lazy-skel-base: #ececec;
    --lazy-skel-edge: #ffffff;
    --lazy-skel-dark-base: #1a1a1a;
    --lazy-skel-dark-edge: #111;
    opacity: 0.7;
  }
}

/* 仅对图标/伪元素旋转；不再让 .loading-spinner 容器自转 */
.submit-btn .loading-icon,
.random-post .loading-indicator i,
.site-main.u-loading::before {
  animation: spin 0.8s linear infinite;
}

/* ============================================================
   3) AJAX/列表覆盖层
   ============================================================ */

/* 通用 AJAX 覆盖层（默认透明、点击穿透） */
.ajax-loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  z-index: 2000;
}

/* 阻塞态修饰（需要遮罩与拦截点击时添加 .blocking） */
.ajax-loading-overlay.blocking {
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  z-index: 10000; /* 系统层：遮罩 */
}

/* 列表局部覆盖层（posts-grid 内部） */
.posts-grid {
  position: relative;
}
.posts-grid .grid-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  z-index: 10;
}
[data-theme="dark"] .posts-grid .grid-loading-overlay {
  background: rgba(0, 0, 0, 0.35);
}

/* 变体：让列表遮罩也随视口居中（给遮罩加 .viewport-center） */
.posts-grid .grid-loading-overlay.viewport-center {
  position: fixed; /* 改为固定定位，覆盖整个视口 */
  inset: 0;
  z-index: 10000; /* 系统层：遮罩 */
  background: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .posts-grid .grid-loading-overlay.viewport-center {
  background: rgba(0, 0, 0, 0.35);
}

/* 随机文章按钮加载指示 */
.wl-loading-indicator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.u-loading .wl-loading-indicator {
  opacity: 1;
  visibility: visible;
}
.u-loading .fa-dice {
  /* unchanged */
  opacity: 0;
  visibility: hidden;
}
.wl-loading-indicator i {
  color: var(--color-primary);
}

/* 主内容区域加载态（改为随视口居中） */
.site-main.u-loading {
  position: relative;
  min-height: 200px;
}
.site-main.u-loading::after {
  content: "";
  position: fixed; /* 由 absolute 改为 fixed */
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  pointer-events: none;
}
[data-theme="dark"] .site-main.u-loading::after {
  background: rgba(0, 0, 0, 0.5);
}
.site-main.u-loading::before {
  content: "";
  position: fixed; /* 由 absolute 改为 fixed */
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #eee;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

/* 列表加载遮罩 + 提示卡片 */
.posts-grid.u-loading {
  position: relative;
  min-height: 200px;
}
.posts-grid.u-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 2;
}
[data-theme="dark"] .posts-grid.u-loading::before {
  background: rgba(0, 0, 0, 0.45);
}

.wl-loading-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}
.loading-message::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #eee;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
[data-theme="dark"] .wl-loading-message {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

/* ============================================================
   4) 顶部进度条
   ============================================================ */
.page-progress {
  position: absolute; /* 相对 .header-content */
  left: 0;
  right: 0;
  /* 进度条容器高度（参与垂直居中计算） */
  --progress-height: 10px;
  /* 将进度条下边缘定位在 header 内容底部向下 (gap/2 + 高度/2)，实现空隙垂直居中 */
  bottom: calc(
    -1 * (var(--header-content-gap, 16px) / 2 + var(--progress-height) / 2)
  );
  margin: 0 auto;
  z-index: 1001; /* 高于头部背景，低于全屏遮罩 */
  pointer-events: none;
  display: flex;
  justify-content: center; /* 水平居中 */
}
.page-progress .progress-container {
  position: relative;
  width: min(300px, 36vw); /* 宽度缩小一点 */
  height: var(--progress-height); /* 高度受控于变量，确保居中计算一致 */
  background: radial-gradient(
    circle,
    #1b2735,
    #090a0f
  ); /* 保留彩色风格的底色 */
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  border: 1px solid #313131;
}
.page-progress .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f260, #0575e6); /* 还原彩色渐变 */
  border-radius: 28px;
  box-shadow: 0 0 15px #00f260, 0 0 30px #0575e6; /* 还原发光效果 */
  transition: width 0.25s ease;
}
.page-progress .progress-bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0.5;
  animation: ripple 3s infinite;
}
.page-progress .progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: glow 1s ease-in-out infinite;
}
.page-progress .progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中到条内部 */
  font-size: 9px; /* 比之前略小 */
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--color-text-inverse);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.page-progress .particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page-progress .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.6;
  animation: loading-float 5s infinite ease-in-out;
}
.page-progress .particle:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
}
.page-progress .particle:nth-child(2) {
  top: 30%;
  left: 70%;
  animation-delay: 1s;
}
.page-progress .particle:nth-child(3) {
  top: 50%;
  left: 50%;
  animation-delay: 2s;
}
.page-progress .particle:nth-child(4) {
  top: 80%;
  left: 40%;
  animation-delay: 1.5s;
}
.page-progress .particle:nth-child(5) {
  top: 90%;
  left: 60%;
  animation-delay: 2.5s;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}
@keyframes loading-float {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

[data-theme="dark"] .page-progress .progress-container {
  background: radial-gradient(circle, #0e141b, #06080b); /* 还原暗色底色 */
  border-color: #2a2a2a;
}

/* ============================================================
   5) 页面全屏 Loader（首页）
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 10002; /* 系统层：全屏loading */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loader {
  font-size: 10rem;
  color: var(--color-primary);
  animation: spin_412 5s infinite;
}
.loader-progress {
  font-size: 25vw;
  font-weight: 300;
  font-family: "Ubuntu", system-ui, -apple-system, sans-serif;
  color: rgba(0, 0, 0, 0.08);
  /* 原为 position: fixed; 改为相对容器的绝对定位，避免残影 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; /* 不再使用负层级，跟随容器一起淡出 */
  transition: opacity 0.2s ease;
  user-select: none;
}
.page-loader.loaded .loader-progress {
  display: none !important;
}

[data-theme="dark"] .loader-progress {
  color: rgba(255, 255, 255, 0.08);
}

@keyframes spin_412 {
  0% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(1.3) rotate(720deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}
/* 新增：loaded 状态下停止并隐藏旋转图标，避免动画在后台运行 */
.page-loader.loaded .loader {
  animation: none !important;
  display: none !important;
}

[data-theme="dark"] .page-loader {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .loader {
  color: var(--color-primary);
}
[data-theme="dark"] .loader-progress {
  color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   6) 其他：中心居中旧容器（如需）
   ============================================================ */
.circle-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.wl-loading-text {
  position: fixed;
  top: calc(50% + 35px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-top: 1rem;
}
[data-theme="dark"] .wl-loading-text {
  color: var(--color-text-light, #999);
}

/* 新增：统一黑幕缓慢加载（.lazy-mask） */
.lazy-mask {
  position: relative;
  display: inline-block;
  overflow: hidden;
  --lazy-mask-bg: #000;
  --lazy-filter-start: 12px;
  --lazy-filter-mid: 4px;
  --lazy-duration: 1.1s;
  --lazy-duration-filter: 0.9s;
  --lazy-ease: cubic-bezier(0.22, 0.55, 0.25, 1);
  background: var(--lazy-mask-bg);
}

/* ============================================================
  首页列表缩略图（无遮罩版本）淡入 + 轻缩放 + 可选模糊
  目标：简单优雅，不出现黑块。依赖 lazysizes 在加载完成后添加的 .lazyloaded 类。
============================================================ */
.posts-list .post-thumbnail-img.lazyload {
  /* 初始化状态 */
  opacity: 0;
  transform: scale(1.02);
  filter: blur(4px);
  transition: opacity 0.5s ease, transform 0.6s ease, filter 0.7s ease;
  will-change: opacity, transform, filter;
}
.posts-list .post-thumbnail-img.lazyloaded {
  /* 已加载 */
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
/* 首个 LCP 图（可能 eager）仍然有 lazyload 类，快速出现即可 */
.posts-list .post-thumbnail:first-child .post-thumbnail-img {
  transition-duration: 0.35s, 0.45s, 0.55s;
}

@media (prefers-reduced-motion: reduce) {
  .posts-list .post-thumbnail-img.lazyload {
    transform: none;
    filter: none;
  }
  .posts-list .post-thumbnail-img.lazyloaded {
    transform: none;
    filter: none;
  }
  .posts-list .post-thumbnail-img {
    transition: opacity 0.4s linear;
  }
}
.lazy-mask > img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  filter: blur(var(--lazy-filter-start)) saturate(0.85);
  transform: scale(1.02);
  transition: opacity 0.4s ease,
    filter var(--lazy-duration-filter) var(--lazy-ease);
}
.lazy-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  transform: scale(1);
  opacity: 1;
  transition: transform var(--lazy-duration) var(--lazy-ease),
    opacity 0.6s ease var(--lazy-duration);
  will-change: transform, opacity;
}
.lazy-mask.is-loaded > img {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
}
.lazy-mask.is-loaded::after {
  transform: scale(0);
  opacity: 0;
}
/* 外扩散变体（延迟进入视口逻辑配合 JS）：
   1. 初始进入视口先保持磨砂（blur+dark+scale）且不播放动画
   2. 1.5s 计时结束 -> JS 添加 .reveal 类，触发 clip-path 扩散与图片延迟清晰
*/
/* 全新点到面扩散（加载后才开始）： */
.lazy-mask.lazy-mask--outward {
  --outward-reveal-duration: 0.9s; /* 扩散总时长 */
  --outward-blur: 14px;
  --outward-scale: 1.04;
  --outward-backdrop-blur: 6px;
  position: relative;
  background: #000;
  overflow: hidden;
}
.lazy-mask.lazy-mask--outward > img {
  opacity: 0;
  filter: blur(var(--outward-blur)) brightness(0.65) saturate(0.85);
  transform: scale(var(--outward-scale));
  transition: opacity 0.45s ease, filter 0.75s ease, transform 0.75s ease;
}
.lazy-mask.lazy-mask--outward.is-loaded > img {
  opacity: 1;
  filter: blur(0) brightness(1) saturate(1);
  transform: scale(1);
  transition-delay: 0.05s; /* 稍后于遮罩淡出，使得更顺滑 */
}
.lazy-mask.lazy-mask--outward::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.82) 45%,
    rgba(0, 0, 0, 0.78) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  /* 使用 scale 结合 clip-path 保证圆形起点不出现方块 */
  clip-path: circle(3px at 50% 50%);
  transform: translateZ(0) scale(1);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  will-change: clip-path, opacity;
}
.lazy-mask.lazy-mask--outward.reveal.is-loaded::after {
  animation: outwardMaskDotExpand var(--outward-reveal-duration)
    cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes outwardMaskDotExpand {
  0% {
    clip-path: circle(3px at 50% 50%);
    opacity: 1;
  }
  60% {
    clip-path: circle(140% at 50% 50%);
    opacity: 1;
  }
  100% {
    clip-path: circle(160% at 50% 50%);
    opacity: 0;
  }
}
/* 首页/相关文章 缩略图像素化显现 */
.thumb-pixelate {
  filter: blur(10px) grayscale(100%) brightness(0.4);
  /* 移除默认立即触发动画，改由添加 .run 时触发，避免首屏等待 observer 期间保持透明 */
}
@keyframes thumbPixelate {
  0% {
    filter: blur(20px) grayscale(100%) brightness(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    filter: blur(10px) grayscale(50%) brightness(0.5);
  }
  100% {
    filter: blur(0) grayscale(0) brightness(1);
    opacity: 1;
  }
}
/* 初始不强制透明：避免首屏除第一张外的图片在 observer 触发前不可见 */
.thumb-pixelate {
  opacity: 1;
}
.thumb-pixelate.lazyload:not(.run) {
  opacity: 0;
}
.thumb-pixelate.run {
  animation: thumbPixelate 1.2s forwards;
}
/* 对 eager 图片直接运行更短动画 */
.thumb-pixelate.is-eager {
  opacity: 1;
  animation: thumbPixelate 0.9s forwards;
}
/* 头像全局淡入效果 */
.avatar-fade,
img.avatar.avatar-fade {
  opacity: 0;
  animation: avatarFadeIn 0.9s ease forwards;
}
.avatar-fade {
  opacity: 0;
  transform: translateY(2px);
  filter: blur(2px);
}
.avatar-fade.is-in,
img.avatar.avatar-fade.is-in {
  animation: avatarFadeIn 0.9s ease forwards;
}
@keyframes avatarFadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lazy-mask.lazy-mask--outward > img {
    filter: none;
    transform: none;
  }
  .lazy-mask.lazy-mask--outward::after {
    animation: none;
    opacity: 0;
    clip-path: none;
  }
  .lazy-mask.lazy-mask--outward.is-loaded > img {
    opacity: 1;
    transition-delay: 0s;
  }
}
/* 统一缩略图比例容器（list / related 场景） */
.thumb-ratio {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--thumb-bg, #111);
}
.thumb-ratio-16x9 {
  aspect-ratio: 16 / 9;
}
.thumb-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 内容图片懒加载容器 */
.wl-img-outer {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden; /* 防止圆角内部元素溢出 */
}
.wl-img-outer.lazy-mask {
  overflow: hidden;
}
.wl-img-outer > img.wl-content-img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wl-img-outer.is-loaded > img.wl-content-img {
  opacity: 1;
}
.wl-img-outer.mosaic-wrapper {
  position: relative;
  overflow: hidden; /* 确保马赛克层跟随圆角裁切 */
}
.mosaic-layer {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}
/* 拼图遮罩 (4x4) */
.puzzle-wrapper {
  position: relative;
  overflow: hidden;
}
.puzzle-layer {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
}
.puzzle-piece {
  /* 更浅的磨砂半透明，避免整体发黑 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.35) 100%
  );
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation: puzzleReveal 0.9s forwards;
  opacity: 1;
}
.puzzle-wrapper.is-loaded .puzzle-piece {
  animation-delay: calc(var(--delay) * 70ms);
}
@keyframes puzzleReveal {
  60% {
    opacity: 1;
  }
  100% {
    background: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
    opacity: 0;
  }
}
.mosaic-layer.mosaic-cols-10 {
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}
.mosaic-pixel {
  background: rgba(0, 0, 0, 0.6); /* 降低初始不透明度 */
  border-radius: inherit; /* 防止单元块在圆角边缘出现直角黑边 */
}
.mosaic-wrapper.is-loaded .mosaic-pixel {
  animation: mosaicReveal 0.6s forwards;
}
.mosaic-pixel {
  animation-delay: calc(var(--d) * 20ms);
}
@keyframes mosaicReveal {
  to {
    background: rgba(0, 0, 0, 0);
  }
}
.wl-img-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.35); /* 浅色磨砂 */
  backdrop-filter: blur(5px) saturate(140%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  z-index: 2; /* 高于遮罩 */
  transition: background 0.3s ease;
}
.wl-img-loader::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--color-primary, #3182ce);
  animation: wl-spin 0.9s linear infinite;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
}
@keyframes wl-spin {
  to {
    transform: rotate(360deg);
  }
}
.wl-img-outer.is-loaded > .wl-img-loader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0.05s, visibility 0s linear 0.4s;
}
.wl-img-outer.is-error > .wl-img-loader {
  opacity: 0;
  visibility: hidden;
}
.wl-img-outer.is-error::after {
  content: "加载失败";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
  background: #f5f5f5;
}
/* 径向 Mask 变体：使用 CSS mask/radial-reveal */
.lazy-mask.lazy-mask--radial {
  background-color: var(--black, #121212);
  --radial-bg: var(--black, #121212);
  --radial-duration: 1.2s;
  --radial-ease: cubic-bezier(0.22, 0.55, 0.25, 1);
}
.lazy-mask.lazy-mask--radial::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--radial-bg);
  -webkit-mask: radial-gradient(
    circle at center,
    #000 0%,
    #000 0%,
    transparent 0%
  );
  mask: radial-gradient(circle at center, #000 0%, #000 0%, transparent 0%);
  animation: radialMaskHold var(--radial-duration) var(--radial-ease) forwards;
}
.lazy-mask.lazy-mask--radial.is-loaded::after {
  animation: radialMaskOut var(--radial-duration) var(--radial-ease) forwards;
}
@keyframes radialMaskHold {
  0% {
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
  }
  100% {
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
  }
}
@keyframes radialMaskOut {
  0% {
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    -webkit-mask-size: 220% 220%;
    mask-size: 220% 220%;
    opacity: 0;
  }
}
/* 降级：不支持 mask 的浏览器仍然看到 scale 版本; prefers-reduced-motion 仍禁用 */
/* 首图更慢（LCP），通过 data-lcp 标记 */
.lazy-mask[data-lcp] {
  --lazy-duration: 1.8s;
  --lazy-duration-filter: 1.4s;
}
.lazy-mask[data-lcp]::after {
  transition-duration: var(--lazy-duration);
}
@media (prefers-reduced-motion: reduce) {
  .lazy-mask > img,
  .lazy-mask::after {
    transition: none !important;
    animation: none !important;
  }
  .lazy-mask > img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .lazy-mask::after {
    display: none !important;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .ajax-loading-spinner > div,
  .loader-rect > div,
  .loaderRectangle div,
  .progress-bar::before,
  .progress-bar::after,
  .wl-loading-indicator i,
  .site-main.loading::before {
    animation: none !important;
  }
}
