/* =========================================================
   eShiper 启动 Loading v5 — 飞机绕圈 + 透明背景
   - 不再覆盖整屏的天空 / 跑道，背景透明（让系统初始 body 色透出）
   - 主角：一架飞机环绕中心做圆周飞行，机头自动指向切线方向
   - 装饰：4 颗远景星点随飞行节奏闪烁
   兼容旧 HTML：<span class="dot dot-spin"><i/><i/><i/><i/></span>
   ========================================================= */

.first-loading-wrp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  min-height: 90vh;
  /* 透明 — 显露 #app 的背景（浏览器默认白底 / 后续系统加载完会替换）*/
  background: transparent;
}

.first-loading-wrp > h1 {
  position: relative;
  margin-top: 28px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #065f46;
  animation: ttlBreath 2.4s ease-in-out infinite;
}
.first-loading-wrp > h1::after {
  content: '加载中...';
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #047857;
  letter-spacing: 6px;
  opacity: 0.7;
}

/* 舞台 — 圆形飞行轨道区域 */
.first-loading-wrp .loading-wrp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 200px;
  height: 200px;
}

/* .dot = 轨道中心容器 */
.dot {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  font-size: 0;
  transform: none !important;
  animation: none !important;
}

/* ===== 装饰：4 颗远景星点 ===== */
.dot i {
  position: absolute !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  background: radial-gradient(circle, #10b981 0%, rgba(16, 185, 129, 0) 75%) !important;
  border-radius: 50% !important;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
  animation: starTwinkle 2.6s ease-in-out infinite !important;
  transform: none !important;
}
.dot i:nth-child(1) { top: 14%;  left: 14%; animation-delay: 0s !important; }
.dot i:nth-child(2) { top: 12%;  right: 16%; left: auto; animation-delay: 0.7s !important; }
.dot i:nth-child(3) { bottom: 18%; left: 12%; animation-delay: 1.4s !important; }
.dot i:nth-child(4) { bottom: 14%; right: 14%; left: auto; animation-delay: 2.1s !important; }

/* ===== 中心标记：淡色虚线圆环（视觉锚点）===== */
.dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 1.5px dashed rgba(16, 185, 129, 0.25);
  border-radius: 50%;
  z-index: 0;
}

/* ===== 主角：飞机绕圈 =====
   plane svg 默认朝上 (north)，rotate(0deg) translate(0, -80px) → 在轨道顶部，朝上
   随 rotate(0→360) 整体公转 + 公转角度本身就让飞机切线方向（朝着前进方向）旋转
*/
.dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="bd" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23ffffff"/><stop offset="1" stop-color="%23a7f3d0"/></linearGradient></defs><g stroke="%23047857" stroke-width="0.8" stroke-linejoin="round"><path d="M32 6c1.6 0 2.7 1.3 2.7 3v13l18 9.5v3.2l-18-5v9.6l5 3.6v3l-7.7-2.2L24.3 46v-3l5-3.6V29.7l-18 5V31.5l18-9.5V9c0-1.7 1.1-3 2.7-3z" fill="url(%23bd)"/></g><g fill="%23065f46"><circle cx="36" cy="13" r="1.3"/><circle cx="36" cy="17" r="1"/></g></svg>')
    center/contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(6, 95, 70, 0.25));
  transform-origin: 50% 50%;
  /* radius = 80px；plane 默认朝上，公转用 rotate translateY(-80) */
  animation: planeOrbit 3.6s linear infinite;
  z-index: 1;
}

/* ===== Keyframes ===== */
@keyframes planeOrbit {
  /* 飞机基础朝上(north)，要切线方向飞 → 每帧旋转角度 = 公转角度。
     用 rotate(α) translate(60px, 0) rotate(180deg)：
     - 第一段 rotate 把局部坐标转 α (CW)
     - translate 沿"新右侧"移 80px（即位置在角度 α 圆周上）
     - 末尾 rotate(90deg) 让飞机朝向局部前方（CW 切线方向） */
  0%   { transform: rotate(0deg)   translate(60px, 0) rotate(180deg); }
  100% { transform: rotate(360deg) translate(60px, 0) rotate(180deg); }
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.3); }
}

@keyframes ttlBreath {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

/* webkit 兼容 */
@-webkit-keyframes antRotate { to { transform: rotate(405deg); } }
@-webkit-keyframes antSpinMove { to { opacity: 1; } }