/* ============================================================
   紫韵新艺 · preloader.css —— 视觉启动页（表现层）
   全屏品牌启动层：徽印 + 过渡色字标 + Mucha 渐变进度条。
   盖在 #app 之上，预加载完毕后淡出掀幕。配色严格复用 tokens.css。
   ============================================================ */

.preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  /* 纸感径向底 + 轻微紫金晕，呼应 Mucha 流光签名 */
  background:
    radial-gradient(120% 90% at 50% 36%, var(--c-bg-2) 0%, var(--c-bg) 62%),
    var(--c-bg);
  transition:opacity .68s var(--c-ease), visibility .68s var(--c-ease);
}
.preloader.pre-hide{ opacity:0; visibility:hidden; pointer-events:none }

.pre-inner{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding:0 28px; text-align:center;
}

/* 徽印：复用 #emblemG（内联 var() 着色，避免 <use> shadow DOM 变黑） */
.pre-emblem{ width:66px; height:66px; display:block;
  animation:preBreath 3.4s var(--c-ease) infinite }
@keyframes preBreath{ 0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.06);opacity:1} }

/* 「玖紫 studio」过渡色字标（与 .brand .wm 同源渐变） */
.pre-word{
  font-family:var(--c-display); font-size:30px; font-weight:600;
  letter-spacing:.04em; line-height:1;
  background:linear-gradient(100deg,var(--c-violet) 0%,var(--c-rose) 35%,var(--c-gold) 65%,var(--c-violet) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:textflow 8s linear infinite;
}
.pre-word span{ font-style:italic; font-weight:500; opacity:.92 }

/* Mucha 渐变进度条 */
.pre-track{
  width:min(260px,72vw); height:3px; border-radius:3px;
  background:var(--c-card-border); overflow:hidden;
}
.pre-bar-fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--c-violet),var(--c-rose),var(--c-gold));
  transition:width .35s var(--c-ease);
}
.pre-meta{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--c-sans); font-size:12px; color:var(--c-muted);
}
.pre-pct{ font-variant-numeric:tabular-nums; color:var(--c-violet); font-weight:600 }
.pre-tip{ letter-spacing:.02em }

/* 减少动画：关闭呼吸与字标流光，进度条仍随 JS 推进（transition 不受限） */
@media (prefers-reduced-motion: reduce){
  .pre-emblem{ animation:none }
  .pre-word{ animation:none }
}