/* =========================================================
   ATO V3 · 加载页（怪核 / 梦核 weirdcore · dreamcore）
   阈境过渡：百分比进度 + 不无聊的动效，100% 后淡出
   ========================================================= */
#ato-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #06060f;
  color: #eae6ff;
  font-family: var(--font-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
  -webkit-user-select: none;
  user-select: none;
  will-change: opacity;
}

/* ---------- 层 1：阈境渐变背景（缓慢漂移 + 色相呼吸） ---------- */
.loader-bg {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 55% at 22% 28%, rgba(123, 76, 200, 0.55), transparent 60%),
    radial-gradient(45% 50% at 80% 22%, rgba(46, 196, 182, 0.40), transparent 62%),
    radial-gradient(50% 60% at 68% 82%, rgba(255, 122, 170, 0.42), transparent 60%),
    radial-gradient(60% 70% at 30% 78%, rgba(58, 90, 200, 0.38), transparent 62%),
    radial-gradient(120% 120% at 50% 50%, #0a0a18 0%, #06060f 70%);
  filter: blur(8px) saturate(120%);
  animation: lbDrift 26s ease-in-out infinite alternate,
             lbHue 34s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes lbDrift {
  0%   { transform: scale(1.05) translate(0, 0) rotate(0deg); }
  50%  { transform: scale(1.15) translate(-2%, 1.5%) rotate(4deg); }
  100% { transform: scale(1.08) translate(2.5%, -1.5%) rotate(-3deg); }
}
@keyframes lbHue {
  0%   { filter: blur(8px) saturate(120%) hue-rotate(0deg); }
  100% { filter: blur(8px) saturate(120%) hue-rotate(360deg); }
}

/* ---------- 层 2：漂浮光团（视差漂移） ---------- */
.loader-orbs { position: absolute; inset: 0; pointer-events: none; }
.loader-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.loader-orbs .o1 {
  width: 240px; height: 240px; left: 8%; top: 16%;
  background: radial-gradient(circle, #b06bff, transparent 70%);
  animation: orbA 19s ease-in-out infinite alternate;
}
.loader-orbs .o2 {
  width: 300px; height: 300px; right: 6%; top: 52%;
  background: radial-gradient(circle, #2fe0c8, transparent 70%);
  animation: orbB 23s ease-in-out infinite alternate;
}
.loader-orbs .o3 {
  width: 200px; height: 200px; left: 46%; bottom: 8%;
  background: radial-gradient(circle, #ff6fae, transparent 70%);
  animation: orbC 17s ease-in-out infinite alternate;
}
@keyframes orbA { from { transform: translate(0,0); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes orbB { from { transform: translate(0,0); } to { transform: translate(-50px, -36px) scale(0.9); } }
@keyframes orbC { from { transform: translate(0,0); } to { transform: translate(-40px, -50px) scale(1.2); } }

/* ---------- 层 3：胶片颗粒噪声（fractalNoise + 闪烁） ---------- */
.loader-grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  animation: grain 0.9s steps(4) infinite;
  pointer-events: none;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 1%); }
}

/* ---------- 层 4：扫描线（CRT 阈境感） ---------- */
.loader-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  animation: scan 7s linear infinite;
}
@keyframes scan { from { background-position-y: 0; } to { background-position-y: 100px; } }

/* ---------- 中央核心 ---------- */
.loader-core {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.loader-ring-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
/* 轨道环完全隐藏，不要外框 */
.loader-ring-track {
  display: none;
}
.loader-ring {
  fill: none;
  stroke: #b98bff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 565.487;
  stroke-dashoffset: 565.487;
  transition: stroke 0.6s ease;
}

/* 中央“眼睛”光球：呼吸 + 内部晕光 */
.loader-eye {
  position: relative;
  width: 188px;
  height: 188px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.95), rgba(185, 139, 255, 0.55) 38%, rgba(80, 50, 160, 0.25) 70%, transparent 78%);
  box-shadow:
    0 0 60px rgba(185, 139, 255, 0.55),
    inset 0 0 50px rgba(255, 255, 255, 0.35);
  animation: eyeBreath 3.6s ease-in-out infinite;
}
/* ::before 深色遮罩已移除（不要外框） */
@keyframes eyeBreath {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.06); filter: brightness(1.25); }
}

/* 百分比：大号等宽 + 故障 RGB 分离 */
.loader-pct, .loader-pctsign {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.loader-pct {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 2px 0 rgba(255, 60, 130, 0.7), -2px 0 rgba(60, 220, 255, 0.7);
  animation: glitch 2.4s steps(1) infinite;
}
.loader-pctsign {
  font-size: 26px;
  margin-left: 2px;
  opacity: 0.85;
  align-self: flex-start;
  margin-top: 14px;
}
@keyframes glitch {
  0%, 92%, 100% { text-shadow: 2px 0 rgba(255, 60, 130, 0.7), -2px 0 rgba(60, 220, 255, 0.7); transform: translate(0,0); }
  93%  { text-shadow: -3px 0 rgba(255, 60, 130, 0.9), 3px 0 rgba(60, 220, 255, 0.9); transform: translate(1px, -1px); }
  95%  { text-shadow: 3px 0 rgba(255, 60, 130, 0.9), -3px 0 rgba(60, 220, 255, 0.9); transform: translate(-1px, 1px); }
  97%  { text-shadow: 2px 0 rgba(255, 60, 130, 0.7), -2px 0 rgba(60, 220, 255, 0.7); transform: translate(0,0); }
}

/* 诡异副标题（循环变换、模糊淡入） */
.loader-sub {
  min-height: 22px;
  font-size: 15px;
  letter-spacing: 3px;
  color: rgba(234, 230, 255, 0.85);
  text-shadow: 0 0 12px rgba(185, 139, 255, 0.6);
  opacity: 0.85;
}

/* 细进度条 */
.loader-bar {
  width: 260px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #2fe0c8, #b98bff, #ff6fae);
  box-shadow: 0 0 10px rgba(185, 139, 255, 0.8);
  transition: width 0.3s ease;
}

.loader-foot {
  font-size: 11px;
  letter-spacing: 6px;
  color: rgba(234, 230, 255, 0.45);
  text-transform: uppercase;
}

/* ---------- 无障碍：尊重减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader-bg, .loader-orbs .orb, .loader-grain, .loader-scan,
  .loader-eye, .loader-pct {
    animation: none !important;
  }
  .loader-pct { text-shadow: 1px 0 rgba(255, 60, 130, 0.6), -1px 0 rgba(60, 220, 255, 0.6); }
}