/* ==========================================================================
   加载动画（v4.10.0 引入；v4.10.1 起改为「六边形矩阵」风格并加快节奏）
   --------------------------------------------------------------------------
   两处使用：
     1. 启动屏（入口页内联的 .boot-screen）：六边形轮廓 + 六边形进度环 + 真实阶段清单；
     2. 站内跳转幕布（core/loading.js 动态挂载的 .app-loader）：六边形环 + 「加载中」。
   风格取向：**低调的科技感** —— 只用品牌蓝青渐层、细描边、慢速旋转与柔和辉光，
   不用高饱和撞色、不做故障抖动；节奏也短（一次跳转 ≈ 580ms）。
   减动效：tokens.css 已把全部 --dur-* 压到 1ms，这里再显式关掉旋转与过渡。
   ========================================================================== */

/* 让六边形进度环的 --p 可被过渡（不支持的浏览器只是瞬间跳变，无副作用） */
@property --p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* --------------------------------------------------------------------------
   1. 站内跳转幕布（core/loading.js 挂载）
   -------------------------------------------------------------------------- */
.app-loader {
  /* 幕布上/下滑动时长：必须与 core/loading.js 的 LOADER_IN_MS / LOADER_OUT_MS 一致 */
  --loader-slide: 220ms;
  position: fixed;
  inset: 0;
  z-index: 900; /* 盖住页面、侧边栏、模态(300)、Toast(400) 与 tooltip(500)，但低于启动屏(999) */
  display: grid;
  place-items: center;
  background: var(--bg-app);
  background-image: var(--bg-app-gradient);
  /* 静止态：整块幕布停在屏幕下方，完全不可见 */
  transform: translateY(100%);
  /* v5.2.2：去掉常驻 will-change（它会让整屏幕布长期占着一个合成层 / 显存） */
  transition: transform var(--loader-slide) var(--ease-out);
  pointer-events: none;
}

.app-loader.is-in {
  transform: translateY(0);
  pointer-events: auto;
}

.app-loader.is-hidden {
  transform: translateY(100%);
  pointer-events: none;
}

.app-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.app-loader.is-hidden .app-loader__inner { opacity: 0; }

/* --------------------------------------------------------------------------
   2. 启动屏（首屏骨架，避免白屏）
   -------------------------------------------------------------------------- */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--bg-app);
  background-image: var(--bg-app-gradient);
  /* 与幕布同一个滑动时长，启动屏与跳转幕布看起来是同一套动画 */
  /* v5.2.2：去掉常驻 will-change；启动屏只在滑出时才需要合成层 */
  transition: transform var(--loader-slide, 220ms) var(--ease-out), opacity var(--loader-slide, 220ms) var(--ease-out);
  --loader-slide: 220ms;
}

/* 启动完成：向下滑出屏幕（与站内跳转幕布同一个方向），随后由 main.js 移除节点 */
.boot-screen.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.boot-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  animation: rise-in-lg var(--dur-slower) var(--ease-out) both;
  transition: opacity var(--dur-normal) var(--ease-out);
}

.boot-screen.is-hidden .boot-screen__inner { opacity: 0; }

/* 六边形组：两层旋转轮廓 + 中心六边形进度环 */
.boot-screen__hex,
.app-loader__hexwrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}

.boot-screen__hex > svg,
.app-loader__hexwrap > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 共用：六边形轮廓（细描边、慢速旋转；低调但一眼能看出是「矩阵」） */
.hex-ring {
  fill: none;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
}

.hex-ring--outer {
  stroke: rgba(99, 102, 241, 0.42); /* brand-500 @42% */
  stroke-width: 1.6;
  stroke-dasharray: 16 12;
  animation: hex-spin 22s linear infinite;
}

.hex-ring--inner {
  stroke: rgba(34, 211, 238, 0.55); /* accent-cyan @55% */
  stroke-width: 2.4;
  stroke-dasharray: 74 208;
  stroke-linecap: round;
  /* v5.2.2：把 2.8 秒的高速旋转改成 26 秒的慢速旋转。
     原来的 2.8s + 缓入缓出意味着这个较大的 SVG 图层几乎一直在做合成与重绘
     （启动屏若因为别的原因停住，GPU 就一直被这枚旋转占着 —— 反馈里的
     「卡在加载页 + GPU 3D 拉高」很大程度来自这里）。慢速旋转同样能表达「矩阵」，成本低一个量级。 */
  animation: hex-spin 26s linear infinite;
}

/* 幕布里的六边形（更小、更淡，只转不闪） */
.app-loader__hex { width: 58px; height: 58px; overflow: visible; }
.app-loader__hex .hex-ring--outer { stroke-width: 2; stroke-dasharray: 10 8; animation-duration: 9s; }
.app-loader__hex .hex-ring--inner { stroke-width: 3; stroke-dasharray: 60 116; animation-duration: 12s; }

@keyframes hex-spin { to { transform: rotate(360deg); } }

/* 中心品牌图标 */
.boot-screen__glyph,
.app-loader__glyph {
  display: grid;
  place-items: center;
  color: var(--brand-500);
}

/* 六边形进度环：conic-gradient 按 --p 填充，中间挖空放图标 */
.boot-screen__gauge {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: conic-gradient(
    from -90deg,
    var(--accent-cyan) 0%,
    var(--brand-500) calc(var(--p, 0) * 1%),
    rgba(99, 102, 241, 0.12) calc(var(--p, 0) * 1%)
  );
  /* v5.2.2：**不再过渡 --p**。
     conic-gradient 无法交给合成器，过渡 --p 等于「过渡期间每一帧都重绘整个进度环」；
     启动进度本来就是按真实阶段跳的（6% → 55% → 100%），直接跳变既省 GPU 也更诚实。 */
}

.boot-screen__gauge-hole {
  position: absolute;
  inset: 3px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: var(--bg-app);
}

.boot-screen__glyph svg { width: 30px; height: 30px; }
.app-loader__glyph { display: none; } /* 幕布不显示图标，只留六边形与文字 */

/* 标题与阶段清单 */
.boot-screen__title { font-size: var(--text-lg); font-weight: 650; letter-spacing: 0.08em; }
.boot-screen__hint { font-size: var(--text-sm); color: var(--text-tertiary); }

.boot-screen__steps {
  display: grid;
  gap: 6px;
  min-width: 224px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.boot-screen__steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.65;
  transition: opacity var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}

.boot-screen__steps li.is-on { opacity: 1; color: var(--text-secondary); }

.boot-step__tag {
  flex: none;
  min-width: 38px;
  padding: 1px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: center;
  color: var(--text-tertiary);
  transition: color var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out),
    background var(--dur-normal) var(--ease-out);
}

.boot-screen__steps li.is-on .boot-step__tag {
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.45); /* success @45% */
  background: var(--success-soft);
}

/* 文字与文字间的引导虚线（低调的仪式感） */
.boot-step__lead {
  flex: 1;
  height: 0.6em;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.3);
}

/* --------------------------------------------------------------------------
   3. 减动效：不做位移与旋转，只保留静态形状
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app-loader,
  .boot-screen { transition: none; }

  .boot-screen__inner { animation: none; transition: none; }

  .hex-ring--outer,
  .hex-ring--inner { animation: none; }

  .hex-ring--inner { stroke-dasharray: none; }

  .boot-screen__gauge { transition: none; }

  .boot-screen__steps li,
  .boot-step__tag { transition: none; }
}

/* --------------------------------------------------------------------------
   4. 幕布出现时顶部进度条退场（避免两条进度指示打架）
   -------------------------------------------------------------------------- */
body.is-loading-curtain .top-progress { opacity: 0; }