/** 白屏阶段会执行的 CSS 加载动画 */
/* 
#app-loading {
  position: relative;
  top: 45vh;
  margin: 0 auto;
  color: #409eff;
  font-size: 12px;
}

#app-loading,
#app-loading::before,
#app-loading::after {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  animation: 2s ease-in-out infinite app-loading-animation;
}

#app-loading::before,
#app-loading::after {
  content: "";
  position: absolute;
}

#app-loading::before {
  left: -4em;
  animation-delay: -0.2s;
}

#app-loading::after {
  left: 4em;
  animation-delay: 0.2s;
}

@keyframes app-loading-animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -2em;
  }
  40% {
    box-shadow: 0 2em 0 0;
  }
} */

#neo-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0a0e15;
  /* background: #001428; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#quantum-orb {
  width: 120px;
  height: 120px;
  position: relative;
  animation: orbital-float 3s ease-in-out infinite;

  #energy-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #00ffd5;
    border-radius: 50%;
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
    animation:
      wave-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite,
      orbital-rotate 6s linear infinite;
  }

  #core-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 2px;
    background: #00ffd5;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(0, 255, 213, 0.4);
    animation: axis-scan 1.8s ease-in-out infinite;
  }
}

#scanning-text {
  margin-top: 32px;
  font-family: "Roboto Mono", monospace;
  color: #00ffd5;
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(0, 255, 213, 0.3);
  position: relative;

  &::after {
    content: "▋";
    animation: text-cursor 1s step-end infinite;
    margin-left: 4px;
  }
}

@keyframes orbital-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes wave-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes orbital-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes axis-scan {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
    width: 60%;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
    width: 80%;
  }
}

@keyframes text-cursor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
