/* ==========================================================
 * 初始化加载页（复刻 src/reference/loading_page.png）
 * 设计稿 1672×941：--u = 设计稿 1px。元素各自锚定在所贴的边或中心，
 * 16:9 视口下与参考图逐像素对齐，其它比例自然延展。
 * 循环动效只动 transform / opacity：场景构建阻塞主线程时仍由合成线程流畅播放。
 * ========================================================== */
#loading {
  --u: min(calc(100vw / 1672), calc(100vh / 941));
  --bg: #f1f6f9;
  --blue: #2256f3;
  --arc: #1e50f5;
  --ink: #757d8b;
  --logo: #8e8e8e;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .1);
  position: fixed; inset: 0; z-index: 200;
  overflow: hidden;
  color: var(--ink);
  font-family: "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none; -webkit-user-select: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
#loading.hide { display: none; }
#loading i { position: absolute; display: block; font-style: normal; }
#loading svg { display: block; overflow: visible; shape-rendering: geometricPrecision; }
#loading .vs { fill: none; stroke: currentColor; stroke-linejoin: miter; stroke-miterlimit: 6; }
#loading .vf { fill: currentColor; }

/* 底板：退场时整体上卷，露出大厅；底边一道品牌蓝细线 */
.ld-plate { position: absolute; inset: 0; background: var(--bg); }
.ld-plate::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: max(1px, calc(var(--u) * 2));
  background: var(--blue);
  opacity: 0;
}
.ld-frame, .ld-core { position: absolute; will-change: transform; }
.ld-frame { inset: 0; }

/* ==================== 框线 ==================== */
.ld-rule { background: var(--c); }
.ld-rule-l, .ld-rule-r, .ld-rule-r2 { width: max(1px, calc(var(--u) * 2)); }
.ld-rule-tl, .ld-rule-b { height: max(1px, calc(var(--u) * 2)); }
.ld-rule-l  { --c: #c1cadd; left: calc(var(--u) * 80); top: 0; bottom: 0; transform-origin: 50% 0; }
.ld-rule-r  { --c: #bcc4d9; right: calc(var(--u) * 180); top: 0; bottom: 0; transform-origin: 50% 100%; }
.ld-rule-r2 { --c: #bfc8da; right: calc(var(--u) * 127); top: calc(var(--u) * 299); bottom: calc(var(--u) * 92); transform-origin: 50% 0; }
.ld-rule-tl { --c: #c1cadc; left: 0; top: calc(var(--u) * 196); width: calc(var(--u) * 314); transform-origin: 0 50%; }
.ld-rule-b  { --c: #c5cddf; left: 0; right: calc(var(--u) * 126.5); bottom: calc(var(--u) * 92); transform-origin: 0 50%; }

/* ==================== 左栏 ==================== */
/* CYANDUST / WORKSHOP / PRESENTED：自绘字形，每行一道遮罩自下而上显影 */
.ld-brand { position: absolute; left: calc(var(--u) * 111); top: calc(var(--u) * 50); color: #757d8b; }
.ld-line { position: absolute; left: calc(var(--u) * -1); overflow: hidden; padding: 0 calc(var(--u) * 1); }
.ld-line:nth-child(1) { top: 0; }
.ld-line:nth-child(2) { top: calc(var(--u) * 19); }
.ld-line:nth-child(3) { top: calc(var(--u) * 39); }
.ld-line > span { display: block; }
.ld-brand-dash {
  left: calc(var(--u) * 108.5); top: calc(var(--u) * 122.3);
  width: calc(var(--u) * 23); height: max(1px, calc(var(--u) * 1.5));
  background: #868e9e; transform-origin: 0 50%;
}

.ld-pluses, .ld-steps { position: absolute; inset: 0; }
.ld-plus { left: calc(var(--u) * 114); width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.ld-plus::before, .ld-plus::after { content: ""; position: absolute; background: #9aa0b0; }
.ld-plus::before { left: 0; right: 0; top: calc(var(--u) * 6); height: max(1px, calc(var(--u) * 2)); }
.ld-plus::after { top: 0; bottom: 0; left: calc(var(--u) * 6); width: max(1px, calc(var(--u) * 2)); }
.ld-plus:nth-child(1) { top: calc(var(--u) * 247); }
.ld-plus:nth-child(2) { top: calc(var(--u) * 287); }
.ld-plus:nth-child(3) { top: calc(var(--u) * 327); }

/* 左侧蓝条：竖向居中锚定，内部一道高光缓慢下扫 */
.ld-bar {
  left: calc(var(--u) * 108); top: calc(50% - var(--u) * 32.5);
  width: calc(var(--u) * 24); height: calc(var(--u) * 102);
  background: var(--blue); overflow: hidden; transform-origin: 50% 0;
}
.ld-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0));
  transform: translateY(-100%);
}

.ld-year { position: absolute; left: calc(var(--u) * 112); bottom: calc(var(--u) * 154); width: calc(var(--u) * 128); height: calc(var(--u) * 123); color: #dbdee6; }
.ld-year svg { width: 100%; height: 100%; }
.ld-year g { transform-box: fill-box; }
.ld-year-dash {
  left: calc(var(--u) * 111.6); bottom: calc(var(--u) * 123.4);
  width: calc(var(--u) * 20); height: max(1px, calc(var(--u) * 1.5));
  background: #b9c1d0; transform-origin: 0 50%;
}

/* 载入阶段：资源 → 场景 → 角色；进入某阶段即点亮对应方块 */
.ld-step {
  bottom: calc(var(--u) * 43.1);
  width: calc(var(--u) * 20.6); height: calc(var(--u) * 20.6);
  border: max(1px, calc(var(--u) * 1.5)) solid #c2cde1;
  background: rgba(255, 255, 255, .55);
  transform: scale(.92);
  transition: border-color .5s var(--ease), transform .6s var(--ease);
}
.ld-step.on { transform: none; }
.ld-step:nth-child(1) { left: calc(var(--u) * 110.3); }
.ld-step:nth-child(2) { left: calc(var(--u) * 142.2); }
.ld-step:nth-child(3) { left: calc(var(--u) * 173.7); }
.ld-step::before {
  content: ""; position: absolute; inset: calc(var(--u) * -.5);
  background: var(--blue);
  transform: scale(0); transform-origin: 0 100%;
  transition: transform .6s var(--ease);
}
/* 当前阶段：外圈一道柔光呼吸 */
.ld-step::after {
  content: ""; position: absolute; inset: calc(var(--u) * -5);
  border: max(1px, calc(var(--u) * 1)) solid rgba(34, 86, 243, .45);
  opacity: 0; transform: scale(.8);
}
.ld-step.on { border-color: #fff; }
.ld-step.on::before { transform: none; }
.ld-step.cur::after { animation: ld-step-halo 1.6s var(--ease-io) infinite; }

/* ==================== 右栏 ==================== */
.ld-signal-line {
  right: calc(var(--u) * 239); top: calc(var(--u) * 74.1);
  width: calc(var(--u) * 250); height: max(1px, calc(var(--u) * 1.4));
  background: #7c8394; overflow: hidden; transform-origin: 100% 50%;
}
/* 信号沿细线流向橙点 */
.ld-signal-line::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(90deg, rgba(253, 145, 60, 0), #fd913c 70%, #ffd2ad);
  transform: translateX(-100%);
}
.ld-signal-dot {
  right: calc(var(--u) * 204.8); top: calc(var(--u) * 58.1);
  width: calc(var(--u) * 34.4); height: calc(var(--u) * 34.4);
  border: max(1px, calc(var(--u) * 1.7)) solid #fd913c; border-radius: 50%;
  background: #fbfaf9;
}
.ld-signal-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 20.4); height: calc(var(--u) * 20.4);
  margin: calc(var(--u) * -10.2) 0 0 calc(var(--u) * -10.2);
  border-radius: 50%; background: #fd913c;
}
.ld-signal-dot::after {
  content: ""; position: absolute; inset: calc(var(--u) * -1.7);
  border: max(1px, calc(var(--u) * 1.2)) solid #fd913c; border-radius: 50%;
  opacity: 0;
}

.ld-block-blue { right: 0; top: 0; width: calc(var(--u) * 129); height: calc(var(--u) * 148); background: var(--blue); transform-origin: 50% 0; }
.ld-block-gray { right: 0; bottom: calc(var(--u) * 105); width: calc(var(--u) * 129); height: calc(var(--u) * 215); background: #ced2db; transform-origin: 50% 100%; }

/* 点阵：中间缺的那一点碎成几粒微尘，缓慢漂浮 */
.ld-dots { position: absolute; right: calc(var(--u) * 36); top: calc(var(--u) * 170); width: calc(var(--u) * 80); height: calc(var(--u) * 76); }
.ld-dots i { border-radius: 50%; background: #a9adbd; }
.ld-dots .g { width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin: calc(var(--u) * -2.5) 0 0 calc(var(--u) * -2.5); }
.ld-dots .p { background: #bcc0cd; }

/* 竖排署名：整体顺时针旋转 90°，两列顶端对齐 */
.ld-credits { position: absolute; right: calc(var(--u) * 62); top: calc(var(--u) * 317); width: 0; height: 0; color: #8f97ae; }
.ld-col { position: absolute; top: 0; transform-origin: 0 0; transform: rotate(90deg); overflow: hidden; }
.ld-col > span { display: flex; align-items: center; white-space: nowrap; }
.ld-col b { display: block; font-weight: 500; line-height: 1; text-align: center; }
.ld-credits-tick {
  width: max(1px, calc(var(--u) * 1.5)); height: calc(var(--u) * 16);
  background: #a9b0c3; transform-origin: 50% 0;
}

.ld-slash { position: absolute; right: calc(var(--u) * 59); bottom: calc(var(--u) * 28.5); width: calc(var(--u) * 46); height: calc(var(--u) * 44); color: #2259f8; }
.ld-slash svg { width: 100%; height: 100%; }
.ld-slash polygon { transform-box: fill-box; }

/* ==================== 中心：进度环 / LOGO / 文案 ==================== */
.ld-core { left: calc(50% + var(--u) * 0.5); top: calc(50% - var(--u) * 38.1); width: 0; height: 0; }
.ld-ring, .ld-ring .ld-layer { position: absolute; width: calc(var(--u) * 560); height: calc(var(--u) * 560); }
.ld-ring { left: calc(var(--u) * -280); top: calc(var(--u) * -280); }
.ld-ring .ld-layer { left: 0; top: 0; will-change: transform; }
.ld-ring svg { width: 100%; height: 100%; }
.ld-track { fill: none; stroke: #ced3dd; stroke-width: 4; transition: stroke .5s var(--ease); }
/* 进度弧：左右两半各自裁切，靠旋转扫出任意长度，全程只用 transform */
.ld-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
/* 右半向左多裁 1px，且其弧在头端多画 0.5°：两半在拼接线处实色垫底，不留抗锯齿发丝缝 */
.ld-half-r { left: calc(50% - 1px); width: calc(50% + 1px); }
.ld-half-l { left: 0; }
.ld-sweep { position: absolute; top: 0; width: calc(var(--u) * 560); height: 100%; will-change: transform; }
.ld-half-r .ld-sweep { left: calc(1px - var(--u) * 280); }
.ld-half-l .ld-sweep { left: 0; }
.ld-arc-case { fill: none; stroke: #fff; stroke-width: 8; }
.ld-arc-main { fill: none; stroke: var(--arc); stroke-width: 5; transition: stroke .4s; }
/* 头部前方的浅蓝缓冲段：锥形渐变 + 环形遮罩，随头部一起旋转 */
.ld-buffer {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(110, 148, 247, .95) 0deg, #b0c3f5 6deg, #b0c3f5 50deg, rgba(176, 195, 245, 0) 92deg, rgba(176, 195, 245, 0));
  -webkit-mask: radial-gradient(closest-side, transparent 79.43%, #000 79.71%, #000 80.93%, transparent 81.21%);
  mask: radial-gradient(closest-side, transparent 79.43%, #000 79.71%, #000 80.93%, transparent 81.21%);
}
.ld-head { position: absolute; left: 50%; top: calc(50% - var(--u) * 224.6); width: 0; height: 0; transition: transform .5s var(--ease); }
.ld-head-glow, .ld-head-dot { position: absolute; border-radius: 50%; }
.ld-head-glow {
  width: calc(var(--u) * 48); height: calc(var(--u) * 48);
  left: calc(var(--u) * -24); top: calc(var(--u) * -24);
  background: radial-gradient(closest-side, rgba(52, 98, 246, .3), rgba(52, 98, 246, .26) 42%, rgba(52, 98, 246, .2) 50%, rgba(52, 98, 246, .15) 58%,
    rgba(52, 98, 246, .09) 67%, rgba(52, 98, 246, .05) 75%, rgba(52, 98, 246, .02) 84%, rgba(52, 98, 246, 0));
}
.ld-head-dot {
  width: calc(var(--u) * 22); height: calc(var(--u) * 22);
  left: calc(var(--u) * -11); top: calc(var(--u) * -11);
  background: #fff;
  box-shadow: 0 0 calc(var(--u) * 1.5) rgba(46, 92, 246, .3);
}
/* 完成 / 点击时自环上扩散的一圈波纹 */
.ld-ping {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 450); height: calc(var(--u) * 450);
  margin: calc(var(--u) * -225) 0 0 calc(var(--u) * -225);
  border: max(1px, calc(var(--u) * 1.5)) solid rgba(34, 86, 243, .55); border-radius: 50%;
  pointer-events: none;
  animation: ld-ping 1.1s var(--ease) forwards;
}

.ld-logo {
  position: absolute; left: calc(var(--u) * -181); top: calc(var(--u) * -104.3);
  width: calc(var(--u) * 353); height: calc(var(--u) * 229.1);   /* 按参考图 LOGO 包围盒 350×226 对位 */
}
.ld-logo img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
/* LOGO 掠光：以 LOGO 自身为遮罩（仅 http 环境启用，file:// 下遮罩图跨域不可用） */
.ld-sheen { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.ld-sheen.on {
  opacity: 1;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
  mask: var(--mask) center / 100% 100% no-repeat;
}
.ld-sheen::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-120%);
}

.ld-caption {
  position: absolute; left: 0; top: calc(var(--u) * 273.7);
  display: flex; gap: calc(var(--u) * 15.97);
  transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap;
  font-size: calc(var(--u) * 34.7); font-weight: 500; line-height: 1;
  color: var(--logo);
}
.ld-caption span { display: block; }
.ld-caption-sub {
  position: absolute; left: 0; top: calc(var(--u) * 316);
  transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap;
  font-size: calc(var(--u) * 14); letter-spacing: .08em; color: #9aa0b0;
  opacity: 0; transition: opacity .5s var(--ease);
}

/* ==================== 入场 ==================== */
@keyframes ld-in-fade { from { opacity: 0; } }
@keyframes ld-in-sx { from { transform: scaleX(0); } }
@keyframes ld-in-sy { from { transform: scaleY(0); } }
@keyframes ld-in-up { from { opacity: 0; transform: translateY(var(--dy, 110%)); } }
@keyframes ld-in-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes ld-in-plus { from { opacity: 0; transform: rotate(-90deg) scale(.4); } }
@keyframes ld-in-slide { from { transform: translateX(-102%); } }
@keyframes ld-in-slash { from { opacity: 0; transform: translateX(-60%); } }
@keyframes ld-in-ring { from { opacity: 0; transform: scale(.94); } }
@keyframes ld-in-logo { from { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.95); } }
@keyframes ld-in-dot { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } }
@keyframes ld-track-draw { from { stroke-dashoffset: 1412; } }

.ld-rule-l  { animation: ld-in-sy 1.1s var(--ease) backwards; }
.ld-rule-r  { animation: ld-in-sy 1.1s var(--ease) .08s backwards; }
.ld-rule-r2 { animation: ld-in-sy 1s var(--ease) .32s backwards; }
.ld-rule-tl { animation: ld-in-sx 1s var(--ease) .14s backwards; }
.ld-rule-b  { animation: ld-in-sx 1.2s var(--ease) .2s backwards; }
.ld-block-blue { animation: ld-in-sy .8s var(--ease) .1s backwards; }
.ld-block-gray { animation: ld-in-sy .9s var(--ease) .3s backwards; }
.ld-line > span { animation: ld-in-up .75s var(--ease) backwards; }
.ld-line:nth-child(1) > span { animation-delay: .18s; }
.ld-line:nth-child(2) > span { animation-delay: .25s; }
.ld-line:nth-child(3) > span { animation-delay: .32s; }
.ld-brand-dash { animation: ld-in-sx .6s var(--ease) .45s backwards; }
.ld-plus { animation: ld-in-plus .7s var(--ease) backwards; }
.ld-plus:nth-child(1) { animation-delay: .3s; }
.ld-plus:nth-child(2) { animation-delay: .36s; }
.ld-plus:nth-child(3) { animation-delay: .42s; }
.ld-bar { animation: ld-in-sy .8s var(--ease) .34s backwards; }
.ld-bar::after { animation: ld-bar-scan 4.6s var(--ease-io) 1.6s infinite; }
.ld-year g { animation: ld-in-up .9s var(--ease) backwards; --dy: 26px; }
.ld-year g:nth-child(1) { animation-delay: .36s; }
.ld-year g:nth-child(2) { animation-delay: .42s; }
.ld-year g:nth-child(3) { animation-delay: .48s; }
.ld-year g:nth-child(4) { animation-delay: .54s; }
.ld-year-dash { animation: ld-in-sx .6s var(--ease) .62s backwards; }
.ld-step { animation: ld-in-pop .6s var(--ease) backwards; }
.ld-step:nth-child(1) { animation-delay: .5s; }
.ld-step:nth-child(2) { animation-delay: .56s; }
.ld-step:nth-child(3) { animation-delay: .62s; }
.ld-signal-line { animation: ld-in-sx .8s var(--ease) .28s backwards; }
.ld-signal-line::after { animation: ld-signal-flow 3.2s var(--ease-io) 1.4s infinite; }
.ld-signal-dot { animation: ld-in-pop .7s var(--ease) .62s backwards; }
.ld-signal-dot::before { animation: ld-signal-beat 3.2s var(--ease-io) 1.4s infinite; }
.ld-signal-dot::after { animation: ld-signal-ripple 3.2s var(--ease) 1.4s infinite; }
.ld-dots i { animation: ld-in-fade .5s var(--ease) var(--d, .5s) backwards; }
.ld-dots .g.w { animation: ld-in-fade .5s var(--ease) var(--d, .5s) backwards, ld-dot-wink 5.2s var(--ease-io) var(--w, 2s) infinite; }
.ld-dots .p { animation: ld-in-fade .5s var(--ease) var(--d, .5s) backwards, ld-mote var(--t, 4s) var(--ease-io) var(--w, 1s) infinite alternate; }
.ld-col > span { animation: ld-in-slide .9s var(--ease) backwards; }
.ld-col:nth-child(1) > span { animation-delay: .5s; }
.ld-col:nth-child(2) > span { animation-delay: .58s; }
.ld-credits-tick { animation: ld-in-sy .5s var(--ease) .9s backwards, ld-tick 2.6s var(--ease-io) 1.8s infinite; }
.ld-slash polygon { animation: ld-in-slash .6s var(--ease) backwards; }
.ld-slash polygon:nth-child(1) { animation-delay: .55s; }
.ld-slash polygon:nth-child(2) { animation: ld-in-slash .6s var(--ease) .62s backwards, ld-blink 2.4s steps(1) 2s infinite; }

.ld-ring { animation: ld-in-ring 1.1s var(--ease) .05s backwards; }
.ld-track { stroke-dasharray: 1412; animation: ld-track-draw 1.1s var(--ease-io) .08s backwards; }
.ld-head { animation: ld-in-dot .6s var(--ease) .62s backwards; }
.ld-buffer { animation: ld-in-fade .6s var(--ease) .7s backwards; }
.ld-logo { animation: ld-in-logo 1s var(--ease) .26s backwards; }
.ld-sheen.on::after { animation: ld-sheen 5.2s var(--ease-io) 2.2s infinite; }
.ld-caption span {
  animation: ld-in-up .8s var(--ease) var(--d) backwards, ld-breathe 2.8s var(--ease-io) calc(var(--d) + 1.4s) infinite;
  --dy: calc(var(--u) * 10);
}

/* ==================== 循环 ==================== */
@keyframes ld-step-halo { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes ld-bar-scan { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(170%); } }
@keyframes ld-signal-flow { 0% { transform: translateX(-100%); } 62%, 100% { transform: translateX(460%); } }
@keyframes ld-signal-beat { 0%, 58% { transform: scale(1); } 66% { transform: scale(1.18); } 80%, 100% { transform: scale(1); } }
@keyframes ld-signal-ripple { 0%, 60% { opacity: 0; transform: scale(1); } 62% { opacity: .7; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ld-dot-wink { 0%, 86%, 100% { opacity: 1; } 92% { opacity: .25; } }
@keyframes ld-mote { 0% { transform: translate(0, 0); opacity: .9; } 50% { opacity: .45; } 100% { transform: translate(var(--mx, 2px), var(--my, -2px)); opacity: 1; } }
@keyframes ld-tick { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes ld-blink { 0%, 72% { opacity: 1; } 74%, 80% { opacity: .3; } 82%, 100% { opacity: 1; } }
@keyframes ld-sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(330%); } }
@keyframes ld-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes ld-ping { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }

/* 悬停圆环：头部连同光晕放大，轨道略加深 */
.ld-core.hot .ld-head { transform: scale(1.18); }
.ld-core.hot .ld-track { stroke: #c4cad6; }

/* ==================== 完成 / 退场 ==================== */
@keyframes ld-out-fade { to { opacity: 0; } }
@keyframes ld-out-up { to { opacity: 0; transform: translateY(calc(var(--u) * -14)); } }
@keyframes ld-out-core { to { opacity: 0; transform: scale(1.06); } }
@keyframes ld-out-left { to { opacity: 0; transform: translateX(calc(var(--u) * -18)); } }
@keyframes ld-out-right { to { opacity: 0; transform: translateX(calc(var(--u) * 18)); } }
@keyframes ld-out-curtain { to { transform: translateY(-100vh); } }
@keyframes ld-out-edge { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }

#loading.is-exit { pointer-events: none; }
#loading.is-exit .ld-caption span { animation: ld-out-up .45s var(--ease-in) calc(var(--i) * 28ms) both; }
#loading.is-exit .ld-ring,
#loading.is-exit .ld-logo { animation: ld-out-core .55s var(--ease-in) .08s both; }
#loading.is-exit .ld-caption-sub { opacity: 0; }
#loading.is-exit .ld-brand,
#loading.is-exit .ld-brand-dash,
#loading.is-exit .ld-plus,
#loading.is-exit .ld-bar,
#loading.is-exit .ld-year,
#loading.is-exit .ld-year-dash,
#loading.is-exit .ld-step { animation: ld-out-left .5s var(--ease-in) .06s both; }
#loading.is-exit .ld-signal-line,
#loading.is-exit .ld-signal-dot,
#loading.is-exit .ld-dots,
#loading.is-exit .ld-credits,
#loading.is-exit .ld-slash { animation: ld-out-right .5s var(--ease-in) .06s both; }
#loading.is-exit .ld-rule,
#loading.is-exit .ld-block-blue,
#loading.is-exit .ld-block-gray { animation: ld-out-fade .5s var(--ease-in) .12s both; }
/* 整页像一张纸被揭起：底板与尚未完全淡出的内容一同上卷，不会有残影悬在大厅上 */
#loading.is-exit .ld-plate,
#loading.is-exit .ld-frame,
#loading.is-exit .ld-core { animation: ld-out-curtain .72s cubic-bezier(.76, 0, .24, 1) .4s both; }
#loading.is-exit .ld-plate::after { animation: ld-out-edge .72s linear .4s both; }

/* ==================== 失败 ==================== */
#loading.is-error { cursor: pointer; }
#loading.is-error .ld-arc-main { stroke: #fd913c; }
#loading.is-error .ld-head-glow { background: radial-gradient(closest-side, rgba(253, 145, 60, .5), rgba(253, 145, 60, 0)); }
#loading.is-error .ld-buffer { opacity: 0; }
#loading.is-error .ld-step.cur { border-color: #fd913c; }
#loading.is-error .ld-step.cur::before { background: #fd913c; }
#loading.is-error .ld-step.cur::after { animation: none; }
#loading.is-error .ld-caption span { animation: none; opacity: 1; }
#loading.is-error .ld-caption-sub { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #loading *, #loading *::before, #loading *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  #loading.is-exit .ld-plate { animation: ld-out-fade .4s linear both !important; }
}