/* 首屏与画布加载共用，动画只改变 transform / opacity。 */
:is(#loader-wrapper, .loading-wrapper) {
  --av-loader-size: clamp(160px, 19vw, 230px);
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 60px;
  overflow: hidden;
  isolation: isolate;
  color: #eff6ff;
  background: #070c16;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.loading-wrapper { position: absolute; z-index: 30; }
:is(#loader-wrapper, .loading-wrapper),
:is(#loader-wrapper, .loading-wrapper) *,
:is(#loader-wrapper, .loading-wrapper) *::before,
:is(#loader-wrapper, .loading-wrapper) *::after { box-sizing: border-box; }

:is(#loader-wrapper, .loading-wrapper) .av-loader-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, #17365166, transparent 48%), radial-gradient(ellipse at 65% 62%, #27225222, transparent 40%);
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 420px);
  text-align: center;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--av-loader-size) * 1.6);
  height: calc(var(--av-loader-size) * 1.3);
  margin-bottom: 28px;
  perspective: 850px;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-shadow {
  position: absolute;
  width: 85%;
  height: 42%;
  bottom: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #408dff26, transparent 68%);
  animation: avLoaderShadow 3.6s ease-in-out infinite;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-matrix {
  position: relative;
  width: var(--av-loader-size);
  height: var(--av-loader-size);
  transform: rotateX(54deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-platform {
  position: absolute;
  inset: -13px;
  transform: translateZ(-18px);
  border: 1px solid #7bbcff26;
  border-radius: 20px;
  background: linear-gradient(135deg, #4b94d509, #528ee511);
  box-shadow: 0 0 0 8px #7bbcff03, 0 0 0 9px #7bbcff08;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
  transform-style: preserve-3d;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile {
  position: relative;
  display: block;
  border: 1px solid #9be2ff68;
  border-radius: 10px;
  background: linear-gradient(135deg, #79dff1, #488ce1 65%, #4562b7);
  box-shadow: -1px 1px 0 #2c5797, -2px 2px 0 #24477e, -3px 3px 0 #203e6c, -4px 4px 0 #1a345d, -8px 8px 16px #02081566;
  animation: avLoaderLift 3.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(135deg, #efffffcc, #9bf7ff66);
  box-shadow: 0 0 24px #7bdfff44;
  opacity: 0;
  animation: avLoaderLight 3.6s ease-in-out infinite;
  animation-delay: inherit;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(1) { animation-delay: -3.6s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(2),
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(4) { animation-delay: -3.4s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(3),
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(5),
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(7) { animation-delay: -3.2s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(6),
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(8) { animation-delay: -3s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-tile:nth-child(9) { animation-delay: -2.8s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-heading { display: flex; flex-direction: column; align-items: center; gap: 14px; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-wordmark {
  font-size: clamp(30px, 2.7vw, 42px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.2;
}
:is(#loader-wrapper, .loading-wrapper) .av-loader-wordmark span { margin-left: 9px; font-weight: 300; color: #a7c4e9; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-caption { color: #8094af; font-size: 12px; letter-spacing: .24em; text-indent: .24em; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-status { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(64%, 180px); margin-top: 36px; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-track { position: relative; width: 100%; height: 2px; overflow: hidden; background: #a3c8fa16; border-radius: 2px; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-track span { position: absolute; inset: 0 auto 0 0; width: 55%; background: linear-gradient(90deg, transparent, #82d9f5, transparent); animation: avLoaderTravel 2.2s ease-in-out infinite; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-message { display: flex; align-items: center; gap: 6px; color: #93a8c0; font-size: 11px; letter-spacing: .12em; line-height: 1.6; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-dots { display: flex; gap: 3px; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-dots i { width: 2px; height: 2px; border-radius: 50%; background: #93a8c0; animation: avLoaderDot 1.5s ease-in-out infinite; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-dots i:nth-child(2) { animation-delay: .2s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-dots i:nth-child(3) { animation-delay: .4s; }
:is(#loader-wrapper, .loading-wrapper) .av-loader-footer { position: absolute; bottom: max(26px, env(safe-area-inset-bottom)); left: 20px; right: 20px; text-align: center; color: #52647d; font-size: 9px; letter-spacing: .16em; }
@keyframes avLoaderLift {
  0%, 12%, 72%, 100% { transform: translateZ(0); }
  34%, 44% { transform: translateZ(36px); }
}
@keyframes avLoaderLight { 0%, 12%, 72%, 100% { opacity: 0; } 34%, 44% { opacity: .85; } }
@keyframes avLoaderShadow { 0%, 100% { opacity: .4; transform: scale(.9); } 45% { opacity: .85; transform: scale(1.1); } }
@keyframes avLoaderTravel { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
@keyframes avLoaderDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

@media (max-width: 600px) {
  :is(#loader-wrapper, .loading-wrapper) { --av-loader-size: min(44vw, 180px); padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(56px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-scene { margin-bottom: 24px; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-tiles { gap: 8px; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-tile { border-radius: 8px; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-status { margin-top: 30px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  :is(#loader-wrapper, .loading-wrapper) { --av-loader-size: min(34vh, 170px); padding: 26px max(32px, env(safe-area-inset-right)) 40px max(32px, env(safe-area-inset-left)); }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-content { display: grid; width: min(100%, 540px); grid-template-columns: auto 1fr; gap: 0 44px; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-scene { grid-row: 1 / 3; margin: 0; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-status { justify-self: center; margin-top: 24px; width: 140px; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-footer { bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (max-height: 600px) and (max-width: 600px) {
  :is(#loader-wrapper, .loading-wrapper) { --av-loader-size: min(36vw, 24vh); }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-scene { margin-bottom: 16px; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-status { margin-top: 24px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#loader-wrapper, .loading-wrapper) *,
  :is(#loader-wrapper, .loading-wrapper) *::after { animation: none !important; }
  :is(#loader-wrapper, .loading-wrapper) .av-loader-track span { transform: translateX(40%); }
}