* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  display: gird;
  place-content: center;
  height: 100vh;
  background: #111;
  perspective: 800px;
  overflow: hidden;
}

*:not(:empty) {
  transform-style: preserve-3d;
}

.container {
  position: relative;
  transform: rotateX(60deg) rotateZ(20deg) translate(50%);
  --duration: 3s;
}

.floor {
  position: absolute;
  inset: -20em -40em;
  background-color: #333;
  background-image: radial-gradient(#0000, #000 70%),
    repeating-linear-gradient(0deg, #fff1 0 1em, #fff2 0 4em),
    repeating-linear-gradient(90deg, #fff1 0 1em, #fff2 0 4em);
  animation: floor var(--duration) infinite linear;
}

@keyframes floor {
  from {
    background-position-x: 0, 0, -0.5em;
  }

  to {
    background-position-x: 0, 0, -20.5em;
  }
}

.shadow {
  position: absolute;
}

.shadow i {
  position: absolute;
  inset: calc(-0.2em - 1em * var(--i));
  animation-name: shadowTranslate, shadowOpacity;
  animation-duration: var(--duration);
  animation-delay: calc(var(--i) * var(--duration) * 1.5);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 0 0 0.8em #000, 0 0 0.8em #000 inset;
}

@keyframes shadowTranslate {
  from {
    translate: calc(-1em * var(--i) + 10em);
  }

  to {
    translate: calc(-1em * var(--i) - 10em);
  }
}

@keyframes shadowOpacity {
  0%,
  25%,
  75%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.squares {
  position: absolute;
}

.squares i {
  position: absolute;
  inset: calc(-1em - 1em * var(--i));
  border: 0.8em solid hsl(calc(var(--i) * 30), 75%, 75%);
  transform-origin: calc(50% + 10em) 50%;
  animation-name: iRotate, iTranslate;
  animation-duration: var(--duration);
  animation-delay: calc(var(--i) * var(--duration) * 0.05 - var(--duration));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out, linear;
}

@keyframes iRotate {
  0% {
    rotate: y 0deg;
  }

  100% {
    rotate: y 180deg;
  }
}

@keyframes iTranslate {
  from {
    translate: calc(-1em * var(--i));
  }

  to {
    translate: calc(-1em * var(--i) - 20em);
  }
}
