/* 
 * 加载相关样式（去重整合版）
 * - 通用矩形跳动 Loader（统一为 rect-1~rect-5 关键帧）
 * - 尺寸修饰：--sm(18px, 默认) / --lg(32px)
 * - 列表/全屏覆盖层
 * - 顶部进度条
 * - 页面 Loader（首页全屏）
 * - 全局动画 keyframes（spin / centerSpin / glow 等）
 */

/* ============================================================
   1) 通用加载动画：矩形跳动（默认 18px）
   ============================================================ */
.loading-spinner,
.ajax-loading-spinner,
.loader-rect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 18px;             /* 默认小号 */
  background: transparent;
  border: 0;
  padding: 0;
}

/* 条目通用外观（去掉基类 animation，统一交由 nth-child 指定） */
.loading-spinner > div,
.ajax-loading-spinner > div,
.loader-rect > div {
  width: 6px;
  height: 100%;
  border-radius: 2px;
  background: #002FA7;      /* 统一主题蓝 */
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform;
}

/* 保险：所有 loader 条目强制运行动画，防 reset/系统偏好意外暂停 */
.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) {
  .loading-spinner > div,
  .ajax-loading-spinner > div,
  .loader-rect > div,
  .loaderRectangle div {
    animation-duration: 1.2s !important;
  }
}

.loading-spinner > div:nth-child(1),
.ajax-loading-spinner > div:nth-child(1),
.loader-rect > div:nth-child(1),
.loaderRectangle div:nth-child(1) { animation: rect-1 .9s ease-in-out 0s infinite both; }

.loading-spinner > div:nth-child(2),
.ajax-loading-spinner > div:nth-child(2),
.loader-rect > div:nth-child(2),
.loaderRectangle div:nth-child(2) { animation: rect-2 .9s ease-in-out .05s infinite both; }

.loading-spinner > div:nth-child(3),
.ajax-loading-spinner > div:nth-child(3),
.loader-rect > div:nth-child(3),
.loaderRectangle div:nth-child(3) { animation: rect-3 .9s ease-in-out .10s infinite both; }

.loading-spinner > div:nth-child(4),
.ajax-loading-spinner > div:nth-child(4),
.loader-rect > div:nth-child(4),
.loaderRectangle div:nth-child(4) { animation: rect-4 .9s ease-in-out .15s infinite both; }

.loading-spinner > div:nth-child(5),
.ajax-loading-spinner > div:nth-child(5),
.loader-rect > div:nth-child(5),
.loaderRectangle div:nth-child(5) { animation: rect-5 .9s ease-in-out .20s infinite both; }

@keyframes rect-1 { 0%,100% { transform: scaleY(.9); } 40% { transform: scaleY(1.5); } }
@keyframes rect-2 { 0%,100% { transform: scaleY(.9); } 40% { transform: scaleY(1.8); } }
@keyframes rect-3 { 0%,100% { transform: scaleY(.9); } 40% { transform: scaleY(2.2); } }
@keyframes rect-4 { 0%,100% { transform: scaleY(.9); } 40% { transform: scaleY(1.8); } }
@keyframes rect-5 { 0%,100% { transform: scaleY(.9); } 40% { transform: scaleY(1.5); } }

[data-theme="dark"] .loading-spinner > div,
[data-theme="dark"] .ajax-loading-spinner > div,
[data-theme="dark"] .loader-rect > div { background: #002FA7; } /* 暗色也保持主题蓝 */

/* 可选：大号尺寸（32px 高） */
.loading-spinner--lg,
.ajax-loading-spinner--lg,
.loader-rect--lg { height: 32px; gap: 8px; }
.loading-spinner--lg > div,
.ajax-loading-spinner--lg > div,
.loader-rect--lg > div { width: 10px; border-radius: 3px; }

/* 视口居中修饰：需要固定在屏幕中心时给 loader 加 .is-fixed
   调整为约 30% 视口高度，确保更易见 */
.loading-spinner.is-fixed,
.ajax-loading-spinner.is-fixed,
.loader-rect.is-fixed {
  position: fixed;
  top: 30vh;                 /* 原 50% */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  pointer-events: none;
}

/* 当 Loader 直接挂在 body 下时，默认在视口约 30% 处显示 */
body > .loading-spinner,
body > .ajax-loading-spinner,
body > .loader-rect {
  position: fixed;
  top: 45vh;                 /* 原 50% */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  pointer-events: none;
}

/* 覆盖：列表/全屏遮罩内的 Loader 也遵循 30vh 规则（不再局限卡片中心） */
.ajax-loading-overlay > .loading-spinner,
.ajax-loading-overlay > .ajax-loading-spinner,
.ajax-loading-overlay > .loader-rect,
.ajax-loading-overlay > .loaderRectangle,
.posts-grid .grid-loading-overlay > .loading-spinner,
.posts-grid .grid-loading-overlay > .ajax-loading-spinner,
.posts-grid .grid-loading-overlay > .loader-rect,
.posts-grid .grid-loading-overlay > .loaderRectangle {
  position: fixed;
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10050;
  pointer-events: none;
}

/* 强化：列表遮罩内矩形 Loader 的动画总是运行 */
.posts-grid .grid-loading-overlay .loader-rect > div {
  animation-iteration-count: infinite !important;
  animation-timing-function: ease-in-out !important;
  animation-play-state: running !important;
  will-change: transform;
}

/* 明确指定每根条的动画名称与延迟，避免被其它规则覆盖 */
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(1) { animation-name: rect-1 !important; animation-duration: .9s !important; animation-delay: 0s !important; }
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(2) { animation-name: rect-2 !important; animation-duration: .9s !important; animation-delay: .05s !important; }
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(3) { animation-name: rect-3 !important; animation-duration: .9s !important; animation-delay: .10s !important; }
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(4) { animation-name: rect-4 !important; animation-duration: .9s !important; animation-delay: .15s !important; }
.posts-grid .grid-loading-overlay .loader-rect > div:nth-child(5) { animation-name: rect-5 !important; animation-duration: .9s !important; animation-delay: .20s !important; }

/* 若用户开启“减少动画”，仅放慢，不暂停 */
@media (prefers-reduced-motion: reduce) {
  .posts-grid .grid-loading-overlay .loader-rect > div {
    animation-duration: 1.4s !important;
    animation-play-state: running !important;
  }
}

/* 历史命名兼容 */
.loaderRectangle { display: inline-flex; align-items: center; justify-content: center; gap: 0 3px; }
.loaderRectangle div {
  width: 10px; height: 16px; border-radius: 2px;
  background: #002FA7; box-shadow: 0 0 20px rgba(0,47,167,.35);
  animation-duration: .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: .05s; }
.loaderRectangle div:nth-child(3) { animation-name: rectangleThreeAnim; animation-delay: .10s; }
.loaderRectangle div:nth-child(4) { animation-name: rectangleFourAnim;  animation-delay: .15s; }
.loaderRectangle div:nth-child(5) { animation-name: rectangleFiveAnim;  animation-delay: .20s; }

@keyframes rectangleOneAnim   { 0%,100% { height: 15px; } 40% { height: 30px; } }
@keyframes rectangleTwoAnim   { 0%,100% { height: 15px; } 40% { height: 40px; } }
@keyframes rectangleThreeAnim { 0%,100% { height: 15px; } 40% { height: 50px; } }
@keyframes rectangleFourAnim  { 0%,100% { height: 15px; } 40% { height: 40px; } }
@keyframes rectangleFiveAnim  { 0%,100% { height: 15px; } 40% { height: 30px; } }

/* ============================================================
   2) 全局动画 keyframes
   ============================================================ */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes centerSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes glow {
  0% { opacity: .7; }
  50% { opacity: .5; }
  100% { opacity: .7; }
}

/* 仅对图标/伪元素旋转；不再让 .loading-spinner 容器自转 */
.submit-btn .loading-icon,
.random-post .loading-indicator i,
.site-main.loading::before {
  animation: spin .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,.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,.65);
  z-index: 10;
}
[data-theme="dark"] .posts-grid .grid-loading-overlay { background: rgba(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,.65);
}
[data-theme="dark"] .posts-grid .grid-loading-overlay.viewport-center {
  background: rgba(0,0,0,.35);
}

/* 随机文章按钮加载指示 */
.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 .3s ease;
}
.loading .loading-indicator { opacity: 1; visibility: visible; }
.loading .fa-dice { opacity: 0; visibility: hidden; }
.loading-indicator i { color: var(--color-primary); }

/* 主内容区域加载态（改为随视口居中） */
.site-main.loading { position: relative; min-height: 200px; }
.site-main.loading::after {
  content: "";
  position: fixed;           /* 由 absolute 改为 fixed */
  inset: 0;
  background: rgba(255,255,255,.8);
  z-index: 1;
  pointer-events: none;
}
[data-theme="dark"] .site-main.loading::after { background: rgba(0,0,0,.5); }
.site-main.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.loading { position: relative; min-height: 200px; }
.posts-grid.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  z-index: 2;
}
[data-theme="dark"] .posts-grid.loading::before { background: rgba(0,0,0,.45); }

.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,.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 .8s linear infinite;
}
[data-theme="dark"] .loading-message { background: var(--color-background); border: 1px solid var(--color-border); }

/* ============================================================
   4) 顶部进度条
   ============================================================ */
.page-progress {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 22vw;
  max-width: 380px;
  min-width: 160px;
  z-index: 10001;
  pointer-events: none;
}
.page-progress .progress-container {
  position: relative;
  width: 100%;
  height: 14px;
  background: radial-gradient(circle, #1b2735, #090a0f);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(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 .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,.15), transparent);
  opacity: .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: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(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: .6;
  animation: 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(.5); opacity: .7; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes 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,.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: 99999;
  transition: opacity .3s ease, visibility .3s ease;
}
.loader {
  font-size: 10rem;
  color: #002FA7;
  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,.08);
  /* 原为 position: fixed; 改为相对容器的绝对定位，避免残影 */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;                 /* 不再使用负层级，跟随容器一起淡出 */
  transition: opacity .2s ease;
  user-select: none;
}
.page-loader.loaded .loader-progress { display: none !important; }

[data-theme="dark"] .loader-progress { color: rgba(255,255,255,.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,.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
[data-theme="dark"] .loader { color: #002FA7; }
[data-theme="dark"] .loader-progress { color: rgba(255,255,255,.08); }

/* ============================================================
   6) 其他：中心居中旧容器（如需）
   ============================================================ */
.circle-loader {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.loading-text {
  position: fixed;
  top: calc(50% + 35px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-light);
  font-size: .9rem;
  margin-top: 1rem;
}
[data-theme="dark"] .loading-text { color: var(--color-text-light, #999); }

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner > div,
  .ajax-loading-spinner > div,
  .loader-rect > div,
  .loaderRectangle div,
  .progress-bar::before,
  .progress-bar::after,
  .loading-indicator i,
  .site-main.loading::before {
    animation: none !important;
  }
}