.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-animation {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 1.8s linear infinite;
}

.loading-arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 8px solid #54a0ff;
  border-radius: 50%;
  opacity: 0.4;
  animation: rotateArc 1.8s linear infinite;
}

.loading-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 30px;
  background-color: #54a0ff;
  transform: translate(-50%, -50%);
  transform-origin: top center;
  animation: blink 1.8s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(1turn);
  }
}

@keyframes rotateArc {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(1turn);
  }
}

@keyframes blink {
  0%, 20% {
    opacity: 1;
    transform: scaleY(1);
  }
  40%, 100% {
    opacity: 0;
    transform: scaleY(0.2);
  }
}