/* ==========================================
   崇善寺大悲殿营修历程展 · 加载页
   ========================================== */

/* 加载器主体 — 铜镜纹风格 */
#app-loading {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 45vh auto 0;
  border-radius: 50%;
  border: 1.5px solid rgba(217, 138, 70, 0.25);
  box-shadow:
    0 0 28px rgba(217, 138, 70, 0.08),
    0 0 56px rgba(217, 138, 70, 0.04),
    inset 0 0 18px rgba(217, 138, 70, 0.04);
  overflow: hidden;
}

/* 外旋光环 */
#app-loading::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #D98A46;
  border-right-color: rgba(217, 138, 70, 0.35);
  filter: drop-shadow(0 0 4px rgba(217, 138, 70, 0.5));
  animation: outerSpin 1.5s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

/* 内旋光环 + 呼吸光点 */
#app-loading::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(217, 138, 70, 0.3);
  border-bottom-color: rgba(217, 138, 70, 0.7);
  box-shadow:
    0 0 6px rgba(217, 138, 70, 0.1) inset,
    0 0 10px rgba(217, 138, 70, 0.15);
  animation: innerSpin 1s linear infinite reverse, breathe 2s ease-in-out infinite;
}

/* ==========================================
   关键帧
   ========================================== */

@keyframes outerSpin {
  to { transform: rotate(360deg); }
}

@keyframes innerSpin {
  to { transform: rotate(-360deg); }
}

@keyframes breathe {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(217, 138, 70, 0.1) inset,
      0 0 10px rgba(217, 138, 70, 0.15);
  }
  50% {
    box-shadow:
      0 0 14px rgba(217, 138, 70, 0.25) inset,
      0 0 22px rgba(217, 138, 70, 0.35);
  }
}