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

   层级规划（自上而下）：
     z-index 9999  Cookie 隐私横幅（顶层）
     z-index 9990  加载遮罩层（本文件）
     z-index 0-7   主内容层 / 背景层
   ============================================================ */

/* ---------- 1. 遮罩层：整屏覆盖，承载居中的加载面板 ---------- */
.eoc-loader {
  position: fixed;
  inset: 0;
  /* 让位给 Cookie 隐私横幅，避免两者同为 9999 造成层级互斥 */
  z-index: 9990;
  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;
  padding: 16px;
  box-sizing: border-box;
  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;
}

/* ---------- 2. 加载面板：独立规整卡片 ---------- */
.eoc-loader__panel {
  width: min(440px, 100%);
  /* 视口内安全高度：超出则内部滚动，绝不溢出顶部 / 底部
     先写 vh 兜底，再写 dvh；不支持 dvh 的浏览器会沿用 vh，不会丢失高度上限 */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  border-radius: 18px;
  /* 单层半透明底色 + 清晰描边，边界干净不糊 */
  background: var(--loader-panel-bg);
  border: 1px solid var(--loader-panel-border);
  box-shadow: var(--loader-panel-shadow);
  text-align: center;
  box-sizing: border-box;
  /* 入场：轻微上浮淡入，幅度克制，移动端无溢出风险 */
  animation: eoc-loader-panel-in 420ms var(--loader-elastic-easing) both;
}

@keyframes eoc-loader-panel-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- 3. 动画舞台：小蛇绕中心公转，苹果居中 ---------- */
.eoc-loader__stage {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
}

/* 轨道：承载小蛇绕中心公转，柔和匀速 */
.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: 44px;
  height: 44px;
  margin-left: -22px;
  transform-origin: 50% 62px;
  animation: eoc-loader-snake-breathe var(--loader-orbit-duration) var(--loader-elastic-easing) infinite;
}

/* 苹果：居中，被吃掉时收缩消失后重现，弹性缓动 */
.eoc-loader__apple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  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.05); }
  60%  { transform: scale(0.95); }
  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.12) rotate(0deg); opacity: 1; }
  92%      { transform: scale(0.96) rotate(0deg); opacity: 1; }
  100%     { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

/* ---------- 5. 进度信息面板：标签 / 数值左右分栏对齐 ---------- */
.eoc-loader__info {
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  /* 面板内部次级底色，与卡片主底色分层，边界清晰 */
  background: var(--loader-bar-track);
  border: 1px solid var(--loader-panel-border);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--loader-text-dim);
  text-align: left;
}

/* 每行：固定标签列宽 → 所有数值左边缘严格对齐成一列 */
.eoc-loader__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
  padding: 5px 0;
}

.eoc-loader__row + .eoc-loader__row {
  /* 行间细分隔线，替代原本靠间距区分的松散排版 */
  border-top: 1px solid var(--loader-panel-border);
}

.eoc-loader__row dt {
  margin: 0;
  opacity: 0.85;
  white-space: nowrap;
}

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

/* ---------- 6. 双进度条 ---------- */
.eoc-loader__bar-group {
  margin-top: 14px;
  text-align: left;
}

.eoc-loader__bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  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);
}

/* ---------- 7. 移动端：降低动画幅度，避免溢出与卡顿 ---------- */
@media (max-width: 768px) {
  .eoc-loader {
    padding: 12px;
    align-items: center;
  }

  .eoc-loader__panel {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 20px 16px 18px;
    border-radius: 16px;
    /* 移动端入场幅度减半：仅 6px 轻微上浮，绝不向上弹出溢出顶部 */
    animation-name: eoc-loader-panel-in-mobile;
  }

  /* 移动端柔和过渡：无回弹、无过冲 */
  @keyframes eoc-loader-panel-in-mobile {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .eoc-loader__stage {
    width: 92px;
    height: 92px;
    margin-bottom: 14px;
  }

  .eoc-loader__snake {
    width: 36px;
    height: 36px;
    margin-left: -18px;
    transform-origin: 50% 51px;
  }

  .eoc-loader__apple {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
  }

  .eoc-loader__title {
    margin-bottom: 14px;
    font-size: 14px;
  }

  /* 移动端进度信息：标签列收窄，数值优先展示 */
  .eoc-loader__info {
    padding: 10px 12px;
    font-size: 12px;
  }

  .eoc-loader__row {
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 8px;
    padding: 4px 0;
  }

  .eoc-loader__bar-group { margin-top: 12px; }
}

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

/* 全局动画加速关闭时：入场改为直接显现，无位移 */
.anim-slow .eoc-loader__panel {
  animation: none;
}