.splash-progress {
  margin-top: 28px;
  width: min(420px, 82vw);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.splash-progress-track {
  position: relative;
  width: 182px;
  height: 182px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), rgba(7, 8, 12, 0.22));
  box-shadow:
    inset 0 0 35px rgba(10, 10, 15, 0.52),
    0 14px 30px rgba(6, 8, 16, 0.36);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.splash-progress-cluster {
  --fusion: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 132px;
  height: 132px;
  transform: translate(-50%, -50%) scale(calc(1 - var(--fusion) * 0.16));
  transition: transform 0.18s ease;
  will-change: transform;
}

.mobius-ring,
.cluster-core {
  position: absolute;
  border-radius: 999px;
}

.mobius-ring {
  inset: 0;
  border: 1.5px solid rgba(4, 4, 5, 0.95);
  border-left-color: rgba(4, 4, 5, 0.2);
  border-right-color: rgba(4, 4, 5, 0.38);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.ring-1 {
  inset: 2px;
  transform: rotate(8deg) skewX(16deg);
  animation: mobiusSpinA 5s linear infinite;
}

.ring-2 {
  inset: 14px;
  transform: rotate(64deg) skewY(18deg);
  animation: mobiusSpinB 4.5s linear infinite;
}

.ring-3 {
  inset: 28px;
  transform: rotate(-24deg) skewX(12deg);
  animation: mobiusSpinC 4s linear infinite;
}

.ring-4 {
  inset: 43px;
  transform: rotate(34deg) skewY(14deg);
  animation: mobiusSpinD 3.6s linear infinite;
}

.ring-5 {
  inset: 57px;
  transform: rotate(-14deg) skewX(10deg);
  animation: mobiusSpinE 3.2s linear infinite;
}

.cluster-core {
  width: 12px;
  height: 12px;
  background: #050506;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 0 14px rgba(0, 0, 0, 0.45);
}

.cluster-core.core-2,
.cluster-core.core-3 {
  animation: corePulse 3.8s ease-in-out infinite;
}

.core-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.core-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(17px);
}

.core-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(-17px);
}

.splash-progress-cluster.is-fusing .mobius-ring {
  animation-duration: 0.48s;
}

.splash-progress-cluster.is-fused {
  transform: translate(-50%, -50%) scale(0.8);
}

.splash-progress-cluster.is-fused .mobius-ring {
  animation-play-state: paused;
  border-color: rgba(4, 4, 5, 0.86);
}

.splash-progress-cluster.is-fused .core-2 {
  transform: translate(-50%, -50%) translateX(12px);
}

.splash-progress-cluster.is-fused .core-3 {
  transform: translate(-50%, -50%) translateX(-12px);
}

@keyframes mobiusSpinA {
  to {
    transform: rotate(368deg) skewX(16deg);
  }
}

@keyframes mobiusSpinB {
  to {
    transform: rotate(-296deg) skewY(18deg);
  }
}

@keyframes mobiusSpinC {
  to {
    transform: rotate(336deg) skewX(12deg);
  }
}

@keyframes mobiusSpinD {
  to {
    transform: rotate(-326deg) skewY(14deg);
  }
}

@keyframes mobiusSpinE {
  to {
    transform: rotate(292deg) skewX(10deg);
  }
}

@keyframes corePulse {
  50% {
    opacity: 0.82;
  }
}