/* ============================================================
   加载遮罩层样式
   ------------------------------------------------------------
   所有视觉参数均取自 CSS 变量，由 js/theme.js 读取
   /css/data/theme-default.json 动态注入，兼容亮色 / 深色两套主题。
   本文件不写死任何色值。
   ============================================================ */

.eoc-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loader-overlay-bg);
  -webkit-backdrop-filter: blur(var(--loader-overlay-blur));
  backdrop-filter: blur(var(--loader-overlay-blur));
  font-family: inherit;
  transition: opacity var(--loader-fade-duration) var(--loader-fade-easing),
              visibility var(--loader-fade-duration) var(--loader-fade-easing);
}

/* 收起：淡出后移出无障碍树与命中测试 */
.eoc-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.eoc-loader__panel {
  width: min(420px, calc(100vw - 48px));
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: var(--loader-panel-bg);
  border: 1px solid var(--loader-panel-border);
  box-shadow: var(--loader-panel-shadow);
  text-align: center;
}

/* ---------- 动画舞台：小蛇绕中心旋转，循环吃掉苹果 ---------- */
.eoc-loader__stage {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
}

/* 轨道：承载小蛇绕中心公转，柔和匀速 */
.eoc-loader__orbit {
  position: absolute;
  inset: 0;
  animation: eoc-loader-orbit var(--loader-orbit-duration) linear infinite;
}

/* 小蛇本体：外链 SVG，随轨道公转并轻微呼吸缩放 */
.eoc-loader__snake {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  transform-origin: 50% 66px;
  animation: eoc-loader-snake-breathe var(--loader-orbit-duration) var(--loader-elastic-easing) infinite;
}

/* 苹果：居中，被吃掉时收缩消失后重现，弹性缓动 */
.eoc-loader__apple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  animation: eoc-loader-apple-eaten var(--loader-orbit-duration) var(--loader-elastic-easing) infinite;
}

@keyframes eoc-loader-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 呼吸：追咬瞬间的轻微伸展，避免匀速旋转显得呆板 */
@keyframes eoc-loader-snake-breathe {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* 苹果：静止 → 被咬（缩没 + 旋转）→ 重新出现（带回弹） */
@keyframes eoc-loader-apple-eaten {
  0%, 42%  { transform: scale(1) rotate(0deg); opacity: 1; }
  55%      { transform: scale(0.2) rotate(45deg); opacity: 0; }
  70%      { transform: scale(0.2) rotate(45deg); opacity: 0; }
  82%      { transform: scale(1.14) rotate(0deg); opacity: 1; }
  92%      { transform: scale(0.96) rotate(0deg); opacity: 1; }
  100%     { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ---------- 文案 ---------- */
.eoc-loader__title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--loader-text);
}

.eoc-loader__info {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--loader-text-dim);
  text-align: left;
}

.eoc-loader__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.eoc-loader__row dt {
  margin: 0;
  flex: 0 0 auto;
  opacity: 0.85;
}

.eoc-loader__row dd {
  margin: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--loader-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- 双进度条 ---------- */
.eoc-loader__bar-group {
  margin-top: 12px;
}

.eoc-loader__bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--loader-text-dim);
}

.eoc-loader__bar-value {
  color: var(--loader-text);
  font-variant-numeric: tabular-nums;
}

.eoc-loader__track {
  height: 6px;
  border-radius: 999px;
  background: var(--loader-bar-track);
  overflow: hidden;
}

.eoc-loader__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  /* 进度推进使用柔和弹性缓动，避免生硬跳变 */
  transition: width var(--loader-bar-duration) var(--loader-elastic-easing);
}

/* 进度条A：单文件加载进度 */
.eoc-loader__fill--file {
  background: var(--loader-bar-fill-file);
}

/* 进度条B：全局批量加载进度 */
.eoc-loader__fill--total {
  background: var(--loader-bar-fill-total);
}

/* ---------- 无障碍：尊重系统「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .eoc-loader__orbit,
  .eoc-loader__snake,
  .eoc-loader__apple {
    animation: none;
  }
  .eoc-loader__fill {
    transition: none;
  }
}