/* ================= 变量配置 ================= */
:root {
  --loading-bg-top: #84B63C;
  --loading-bg-bottom: #e8e8e8;
  --loading-main-color: #000000;
  --loading-accent-color: #d97f50;
  --loading-texture-opacity: 0.5;
}

[data-theme="dark"] {
  --loading-bg-top: #1a1a1a;
  --loading-bg-bottom: #d97f50;
  --loading-main-color: #ffffff;
  --loading-accent-color: #84B63C;
}

/* ================= 通用层样式 ================= */
.loading-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 999999;
  transform: translateX(0);
  
  /* 优化：使用更平滑的自定义贝塞尔曲线 */
  transition: transform 2s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform;
  /* 硬件加速加速渲染 */
  backface-visibility: hidden;
  perspective: 1000;
}

/* 状态切换：一旦开始滑动，立即允许点击下方页面内容 */
.loading-layer.loaded {
  pointer-events: none;
}

/* ================= 分层设置 ================= */
#loading-box {
  z-index: 999999;
  background-color: var(--loading-bg-top);
}

#loading-bg-layer {
  z-index: 999998;
  background-color: var(--loading-bg-bottom);
}

#loading-bg-layer .texture {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://img.meuicat.com/blog/loading_block.3c7dab8c.svg") repeat;
  background-size: 800px; 
  opacity: var(--loading-texture-opacity);
  filter: grayscale(100%);
}

/* ================= 退出动画状态 ================= */
#loading-box.loaded {
  transform: translateX(100%);
}

#loading-bg-layer.loaded {
  /* 视差效果：底层位移略多或速度略有不同 */
  transform: translateX(105%); 
  transition-delay: 0.3s; /* 延迟时间 */
  transition-duration: 2s; /* 持续时间 */
}

/* 禁用过渡类 */
.no-transition {
  transition: none !important;
}

/* ================= SVG 动画核心 ================= */
.loading-animation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  transform: scale(1.5); 
  transform-origin: center center;
}

.loading-animation .loading path {
  stroke: var(--loading-main-color);
  stroke-width: 0.5px;
  animation: dashArray 5s ease-in-out infinite, dashOffset 5s linear infinite;
}

.loading-animation .loading path.color {
  stroke: var(--loading-accent-color);
}

.loading-text {
  margin-top: 20px;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 4px;
  color: var(--loading-main-color);
  /* 防止文字被选中 */
  user-select: none;
}

@keyframes dashArray {
  0% { stroke-dasharray: 0 1 359 0; }
  50% { stroke-dasharray: 0 359 1 0; }
  100% { stroke-dasharray: 359 1 0 0; }
}

@keyframes dashOffset {
  0% { stroke-dashoffset: 365; }
  100% { stroke-dashoffset: 5; }
}