.platform-loading {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 50% 42%,
    #24132c 0%,
    #10101b 35%,
    #07070a 70%
  );
  color: #dddde7;
  font-family: Inter, system-ui, sans-serif;
}
.platform-loading-stage {
  position: relative;
  width: 300px;
  height: 230px;
  isolation: isolate;
}
.platform-loading-halo {
  position: absolute;
  inset: 55px 35px 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    #ff145530,
    #25daf516 45%,
    transparent 70%
  );
  filter: blur(18px);
  animation: platform-halo 3s ease-in-out infinite;
}
.platform-loading-logo {
  position: absolute;
  bottom: 16px;
  left: 38px;
  width: 224px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.platform-loading-logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px #ff145540);
}
.platform-loading-shape {
  position: absolute;
  top: 122px;
  left: 53px;
  width: 22px;
  height: 22px;
  animation: platform-juggle 2.8s cubic-bezier(0.35, 0, 0.65, 1) infinite;
  box-shadow: 0 0 18px currentColor;
}
.platform-loading-shape:nth-of-type(1) {
  color: #ff286a;
  background: currentColor;
  border-radius: 50%;
  animation-delay: -2.1s;
}
.platform-loading-shape:nth-of-type(2) {
  color: #33e1ed;
  border: 3px solid currentColor;
  border-radius: 5px;
  animation-delay: -1.4s;
}
.platform-loading-shape:nth-of-type(3) {
  color: #b792ff;
  background: currentColor;
  border-radius: 4px;
  width: 17px;
  height: 17px;
  animation-delay: -0.7s;
}
.platform-loading-shape:nth-of-type(4) {
  color: #c8f45e;
  border: 3px solid currentColor;
  border-radius: 50%;
  animation-delay: 0s;
}
.platform-loading-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #72e9ef;
  box-shadow: 0 0 12px #72e9ef;
  animation: platform-spark 2.2s ease-in-out infinite;
}
.platform-loading-spark.spark-one {
  left: 30px;
  top: 50px;
}
.platform-loading-spark.spark-two {
  right: 24px;
  top: 92px;
  animation-delay: -0.8s;
  background: #ff679c;
}
.platform-loading-spark.spark-three {
  right: 66px;
  top: 15px;
  animation-delay: -1.4s;
}
.platform-loading-caption {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #a9a9bb;
  text-align: center;
}
.platform-loading-progress {
  width: 150px;
  height: 3px;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff12;
}
.platform-loading-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff286a, #ae81ff, #33e1ed);
  transform-origin: left;
  animation: platform-progress 5s ease-out both;
}
@keyframes platform-juggle {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.85);
  }
  25% {
    transform: translate(45px, -96px) rotate(120deg) scale(1);
  }
  50% {
    transform: translate(172px, 0) rotate(240deg) scale(0.85);
  }
  75% {
    transform: translate(96px, -136px) rotate(360deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(480deg) scale(0.85);
  }
}
@keyframes platform-halo {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes platform-spark {
  0%,
  100% {
    opacity: 0.2;
    transform: translateY(6px) scale(0.7);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-8px) scale(1.2);
  }
}
@keyframes platform-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .platform-loading-shape,
  .platform-loading-halo,
  .platform-loading-spark,
  .platform-loading-progress::after {
    animation: none;
  }
  .platform-loading-shape:nth-of-type(1) {
    transform: translate(0, -30px);
  }
  .platform-loading-shape:nth-of-type(2) {
    transform: translate(55px, -85px);
  }
  .platform-loading-shape:nth-of-type(3) {
    transform: translate(115px, -85px) rotate(45deg);
  }
  .platform-loading-shape:nth-of-type(4) {
    transform: translate(172px, -30px);
  }
}