@media (prefers-reduced-motion) {
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-text {
  font-size: 2em;
  font-weight: bold;
  color: #333;
  margin-top: 60%;
  align-items: center;
  justify-content: center;
}

figure {
  --size: 30vmin;
  --duration: 2s;
  --direction: 1;
  --pull: -0.5;
  perspective: 30rem;
  display: grid;
  grid-template-areas: "figure";
  place-items: center;
  inline-size: var(--size);
  aspect-ratio: 1;
  animation: spin var(--duration) ease-in-out infinite;
}

figure > * {
  --radius: calc(var(--size) / 2);
  --deg: calc(var(--i) * (360deg / 12));
  --hs: 45 100%;
  --l: 60%;
  --transform-start: translate3d(
    calc(cos(var(--deg)) * var(--radius)),
    calc(sin(var(--deg)) * var(--radius)),
    0
  )
  rotate(calc(var(--deg)));
  grid-area: figure;
  background-color: hsl(var(--hs) var(--l));
  inline-size: calc(var(--size) / 4);
  aspect-ratio: 1;
  clip-path: polygon(25% 25%, 100% 50%, 25% 75%, 0% 50%);
  transform: var(--transform-start);
  transform-style: preserve-3d;
  animation: diamonds var(--duration) cubic-bezier(0.87, 0, 0.13, 1) infinite;
}

figure:nth-child(2) {
  --size: 30vmin;
  --direction: -1;
  --l: 70%;
}

figure:nth-child(3) {
  --size: 55vmin;
  --pull: -1.125;
  --l: 80%;
}

@keyframes spin {
  0%,
  25% {
  transform: scaleX(var(--direction)) rotate(0);
  }

  75%,
  100% {
  transform: scaleX(var(--direction)) rotate(1turn);
  }
}

@keyframes diamonds {
  0%,
  20% {
  transform: var(--transform-start);
  }

  50% {
  clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 0% 50%);
  transform: translate3d(
    calc(cos(var(--deg)) * var(--radius) * var(--pull)),
    calc(sin(var(--deg)) * var(--radius) * var(--pull)),
    5rem
    )
    rotate(calc(var(--deg) + 90deg));
  }
}