#tm-loading{--brand:#0B389F;--brand-cyan:#10BFFF;--ink:#0F1B33;--bg:#F4F8FE}

.tm-loading{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 50% 42%,#FFFFFF 0%,#F2F7FE 62%,#E9F1FC 100%);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.tm-loading.on{opacity:1;pointer-events:auto}
.tm-loading.bye{opacity:1;transition:none}

.tm-stage{position:relative;width:min(400px,72vw);aspect-ratio:20772/11200}
.tm-stage svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}

/* —— 阶段A：线框地球（位置/大小对齐 TM 图形标所在区域） —— */
#tm-globe{left:20.1%;top:1.6%;width:61.8%;height:74.7%;opacity:0;transform:scale(.7)}
.tm-loading.on #tm-globe{animation:globeIn .7s cubic-bezier(.22,1,.36,1) .05s forwards,globeOut .45s ease-in 1.45s forwards}
@keyframes globeIn{to{opacity:1;transform:scale(1)}}
@keyframes globeOut{to{opacity:0;transform:scale(.28)}}
#tm-globe .spin{transform-origin:120px 108px;animation:spin 3.2s linear infinite}
@keyframes spin{from{transform:scaleX(1)}50%{transform:scaleX(-1)}to{transform:scaleX(1)}}
#tm-globe .shadow{transform-origin:150px 196px;animation:shSkew 3.2s ease-in-out infinite}
@keyframes shSkew{0%,100%{transform:skewX(-32deg) scaleX(1)}50%{transform:skewX(-20deg) scaleX(.82)}}

/* —— 阶段B/C：TM 描边 + 渐变填充 —— */
#tm-mark{fill:url(#tmGrad);fill-opacity:0}
#tm-stroke{
  fill:none;stroke:var(--brand);stroke-width:95;stroke-linejoin:round;stroke-linecap:round;
  opacity:0;transition:opacity .45s ease;
}
#tm-dot{fill:url(#dotGrad);opacity:0;transform-origin:6466px 7857px;transform-box:view-box}
#tm-dot.pop{animation:dotPop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes dotPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

/* —— 阶段D：词标 TRANS·MISSION 逐字浮起 —— */
#tm-word .wl,#tm-word .wp{
  fill:var(--brand);opacity:0;transform:translateY(260px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
#tm-word .wp{fill:url(#pipGrad)}
#tm-word.rise .wl,#tm-word.rise .wp{opacity:1;transform:translateY(0)}

/* —— 阶段E：加载保持 —— 环绕卫星 + 微浮动 + 状态文案 */
#tm-sat{opacity:0;fill:url(#dotGrad);transition:opacity .4s}
#tm-sat.orbit{opacity:1}
#tm-logo-holder.hold{animation:floaty 2.8s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6%)}}

.tm-status{
  position:absolute;left:0;right:0;bottom:-19%;text-align:center;
  font-size:13px;letter-spacing:3px;color:#5B6B8C;opacity:0;transition:opacity .5s;
}
.tm-status.show{opacity:1}
.tm-dots i{display:inline-block;width:4px;height:4px;margin-left:6px;border-radius:50%;background:var(--brand);animation:blink 1.2s infinite}
.tm-dots i:nth-child(2){animation-delay:.2s}
.tm-dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.tm-bar{margin:10px auto 0;width:132px;height:3px;border-radius:2px;background:#E2EAF8;overflow:hidden}
.tm-bar i{display:block;height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-cyan));animation:slide 1.3s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}

/* —— 阶段F：完成 —— */
.tm-loading.bye .tm-stage{animation:zoomBye .7s ease forwards}
@keyframes zoomBye{40%{transform:scale(1.05)}100%{transform:scale(1.14)}}

/* —— 循环重播：上一轮的残留状态瞬间隐藏，不做淡出过渡 —— */
.tm-loading.resetting #tm-word .wl,
.tm-loading.resetting #tm-word .wp,
.tm-loading.resetting #tm-status,
.tm-loading.resetting #tm-sat,
.tm-loading.resetting #tm-mark,
.tm-loading.resetting #tm-stroke{transition:none!important}

@media(max-width:560px){
  .tm-status{bottom:-34%;font-size:10px;letter-spacing:2px}
  .tm-bar{margin-top:9px;width:120px}
}