/* 品牌启动屏（index.html #app-boot）：刷新/首访时立即渲染，路由就绪后收尾。
   【2026-10-19 友好化改版】对齐 H5 开屏的思路——「真实里程碑 + 友好提示语」：
   · 浅色海报底：品牌蓝微光渐变 + 上下两团极淡光晕（桌面端克制版，不做 H5 那种深色整屏）
   · 主视觉 = 品牌渐变弧环（与全站加载环 theme.css 同一画法）+ 卡片托板 + 呼吸光环
   · 阶段文案由真实里程碑推进（上报见 src/boot/progress.ts）：程序已下载 → 初始化界面 → 核对登录态 → 权限与菜单 → 页面模块 → 马上就好
   · 细进度条随里程碑走，两个里程碑之间由 progress.ts 的 rAF 缓动蠕动补齐（不再僵住）
   · 5 秒起「安心短语」纯 CSS 定时轮换显形——不依赖任何 JS，包没下载下来也看得到
   · 收尾两段：内容先上浮淡出（boot-exit），背景随后淡出（.app-boot-hide）
   这里独立成文件而非内联 —— CSP style-src 转强制后内联样式会被拦。 */
#app-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(52% 40% at 50% 0%, rgba(108, 152, 233, 0.16) 0%, rgba(108, 152, 233, 0) 70%),
    radial-gradient(60% 46% at 50% 108%, rgba(45, 108, 223, 0.1) 0%, rgba(45, 108, 223, 0) 70%),
    linear-gradient(180deg, #f8fafe 0%, #eef3fb 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: center;
  transition: opacity 0.26s ease;
}
#app-boot.app-boot-hide {
  opacity: 0;
}
/* 收尾两段：内容先浮退 200ms，背景随后 260ms 淡出（.app-boot-hide 本体）。
   用动画替换而非 transition：入场动画带 fill-mode:both，transition 打不过它；
   boot-exit 的显式 from 帧是必须的——换动画瞬间旧动画的 fill 状态会丢。
   选择器多一级 .app-boot-hide，特异性必胜；没加 !important，reduced-motion 块照样全压住 */
#app-boot.app-boot-hide .boot-card,
#app-boot.app-boot-hide .boot-title,
#app-boot.app-boot-hide .boot-stage,
#app-boot.app-boot-hide .boot-bar,
#app-boot.app-boot-hide .boot-hint {
  animation: boot-exit 0.2s ease-in forwards;
}
@keyframes boot-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}

/* 主视觉：白色卡片托板 + 呼吸光环 + 品牌渐变弧环 */
.boot-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(45, 108, 223, 0.16), 0 2px 8px rgba(45, 108, 223, 0.08);
  animation: boot-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.boot-halo {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1.5px solid rgba(45, 108, 223, 0.35);
  pointer-events: none;
  animation: boot-halo 2.6s ease-out infinite;
}
@keyframes boot-halo {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
#app-boot .boot-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #e3ebf5 0deg, #d5e0ef 130deg, #6f9fe8 215deg, #2d6cdf 305deg, #7fb0f2 342deg, #e3ebf5 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  animation: app-boot-spin 0.9s linear infinite;
}
@keyframes app-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 标题与阶段文案：阶段行 min-height 固定，换长短文案时版式不跳 */
#app-boot .boot-title {
  font-size: 17px;
  font-weight: 600;
  color: #2b3b52;
  letter-spacing: 0.06em;
  animation: boot-rise 0.5s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#app-boot .boot-stage {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12.5px;
  color: #8a9db3;
  animation: boot-rise 0.5s 0.14s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 装载进度：细条随真实里程碑走（main.ts 写 transform），等待间隙靠 CSS 过渡平滑 */
#app-boot .boot-bar {
  width: 200px;
  height: 3px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(45, 108, 223, 0.14);
  overflow: hidden;
  animation: boot-rise 0.5s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#app-boot .boot-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6c98e9, #2d6cdf);
  transform: scaleX(0.12);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* 蠕动模式：progress.ts 的 rAF 逐帧写 transform，关掉 CSS transition 防双重平滑 */
#app-boot.boot-creep .boot-bar i {
  transition: none;
}
/* 安心短语：加载偏慢（5 秒起）时纯 CSS 定时轮换显形——不依赖任何 JS，
   包没下载下来也看得到。只说让人安心的话，不提网络、不催刷新。 */
#app-boot .boot-hint {
  position: relative;
  display: block;
  width: 100%;
  min-height: 17px;
  margin-top: 14px;
  font-size: 12px;
  color: #a9b8cc;
}
#app-boot .boot-hint i {
  position: absolute;
  left: 0;
  right: 0;
  font-style: normal;
  opacity: 0;
}
/* 第一句 5s 浮现、11s 退场；第二句 11.5s 接棒（间隙 0.5s 自然过渡） */
#app-boot .boot-hint i:nth-child(1) {
  animation: boot-hint-in 0.5s ease 5s forwards, boot-hint-out 0.5s ease 11s forwards;
}
#app-boot .boot-hint i:nth-child(2) {
  animation: boot-hint-in 0.5s ease 11.5s forwards;
}
@keyframes boot-hint-in {
  to {
    opacity: 1;
  }
}
@keyframes boot-hint-out {
  to {
    opacity: 0;
  }
}
@keyframes boot-rise {
  from {
    transform: translate3d(0, 12px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/* 关动效的用户：入场/收尾动画全部停用，但画面完整（提示行直接显形、弧环放慢表达"在忙"） */
@media (prefers-reduced-motion: reduce) {
  #app-boot .boot-card,
  #app-boot .boot-title,
  #app-boot .boot-stage,
  #app-boot .boot-bar,
  #app-boot .boot-hint,
  #app-boot .boot-halo {
    animation: none !important;
  }
  #app-boot .boot-hint i {
    animation: none !important;
  }
  #app-boot .boot-hint i:nth-child(1) {
    opacity: 1;
  }
  #app-boot .boot-ring {
    animation-duration: 1.6s;
  }
}