/* ------------------------------------------------------------
 * 博客入场"拉幕"加载动画
 * 原理：两片 50% 宽的背景色 + 中间 spinner
 *       load 完成后加 .loaded class → 左片左滑出、右片右滑出
 * ------------------------------------------------------------ */

/* 莫兰迪色系的幕布 & spinner 配色 */
:root {
  --preloader-bg: #EFEAE2;         /* 幕布色：米白 */
  --preloader-color: #8E9AAF;      /* 文字色：雾蓝 */
  --preloader-square-a: #A8B5A0;   /* 方块 1：雾绿 */
  --preloader-square-b: #C8B6A6;   /* 方块 2：米驼 */
}

/* dark mode：同样走莫兰迪风，但用更深一阶的灰紫底 + 保留彩度的方块 */
[data-theme="dark"] {
  --preloader-bg: #3E3B45;         /* 幕布：深莫兰迪灰紫（像夜里的雾） */
  --preloader-color: #D7CFC0;      /* 文字：米白 */
  --preloader-square-a: #9FAE9A;   /* 方块 1：带灰的雾绿（比 light mode 更暗一点） */
  --preloader-square-b: #C9A8A1;   /* 方块 2：豆沙粉 */
}

/* 两片背景：左 50% + 右 50% */
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 50%;
  height: 100%;
  background-color: var(--preloader-bg);
}
#loading-box .loading-left-bg  { left: 0; }
#loading-box .loading-right-bg { right: 0; }

/* 中间 spinner 容器（占满全屏、内容居中） */
#loading-box .spinner-box {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 两个旋转方块 */
#loading-box .spinner-box .configure-border-1,
#loading-box .spinner-box .configure-border-2 {
  position: absolute;
  padding: 3px;
  width: 115px;
  height: 115px;
}
#loading-box .spinner-box .configure-border-1 {
  background: var(--preloader-square-a);
  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}
#loading-box .spinner-box .configure-border-2 {
  left: -115px;
  background: var(--preloader-square-b);
  transform: rotate(45deg);
  animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}
#loading-box .spinner-box .configure-core {
  width: 100%;
  height: 100%;
  background-color: var(--preloader-bg);
}

/* "loading..." 文字（位于 spinner 下方） */
#loading-box .spinner-box .loading-word {
  position: absolute;
  top: calc(50% + 90px);
  color: var(--preloader-color);
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* --- load 完成：拉幕 --- */
#loading-box.loaded .loading-left-bg {
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transform: translate(-100%, 0);
}
#loading-box.loaded .loading-right-bg {
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transform: translate(100%, 0);
}
#loading-box.loaded .spinner-box {
  display: none;
}

/* --- 两个方块的旋转动画 --- */
@keyframes configure-clockwise {
  0%   { transform: rotate(0);     }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg);}
  75%  { transform: rotate(270deg);}
  100% { transform: rotate(360deg);}
}
@keyframes configure-xclockwise {
  0%   { transform: rotate(45deg);  }
  25%  { transform: rotate(-45deg); }
  50%  { transform: rotate(-135deg);}
  75%  { transform: rotate(-225deg);}
  100% { transform: rotate(-315deg);}
}

/* 初始锁定滚动，避免 spinner 时滚轮乱动 */
body { overflow: hidden; }