*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1000px;
  font-size: 50px;
  overflow: hidden;
}
body *:not(:empty) {
  transform-style: preserve-3d;
}

.matryoshBox {
  position: relative;
  transform: translateX(-3.5em) rotateX(60deg) rotateZ(60deg);
}
.matryoshBox .box {
  position: absolute;
  left: 0;
  width: 1em;
  height: 1em;
  -webkit-animation: boxMove 20s var(--delay) infinite linear;
          animation: boxMove 20s var(--delay) infinite linear;
}
@-webkit-keyframes boxMove {
  0% {
    transform: translate(-50%, calc(-50% + 0em)) scale(0.75);
  }
  10% {
    transform: translate(-50%, calc(-50% - 2em)) scale(0.75);
  }
  20% {
    transform: translate(-50%, calc(-50% + 0em)) scale(1);
  }
  100% {
    transform: translate(-50%, calc(-50% - 16em)) scale(1);
  }
}
@keyframes boxMove {
  0% {
    transform: translate(-50%, calc(-50% + 0em)) scale(0.75);
  }
  10% {
    transform: translate(-50%, calc(-50% - 2em)) scale(0.75);
  }
  20% {
    transform: translate(-50%, calc(-50% + 0em)) scale(1);
  }
  100% {
    transform: translate(-50%, calc(-50% - 16em)) scale(1);
  }
}
.matryoshBox .box:nth-child(1) {
  --color: #ffa602;
  --delay: 0s;
}
.matryoshBox .box:nth-child(2) {
  --color: #ff6362;
  --delay: -4s;
}
.matryoshBox .box:nth-child(3) {
  --color: #bc5090;
  --delay: -8s;
}
.matryoshBox .box:nth-child(4) {
  --color: #58508d;
  --delay: -12s;
}
.matryoshBox .box:nth-child(5) {
  --color: #00405c;
  --delay: -16s;
}
.matryoshBox .bottom, .matryoshBox .top {
  position: absolute;
  width: 1em;
  height: 1em;
}
@-webkit-keyframes boxColor {
  0%, 60% {
    background-color: var(--color);
  }
  100% {
    background-color: #000;
  }
}
@keyframes boxColor {
  0%, 60% {
    background-color: var(--color);
  }
  100% {
    background-color: #000;
  }
}
.matryoshBox .bottom {
  -webkit-animation: boxBounce 20s var(--delay) infinite ease-out, boxColor 20s var(--delay) infinite linear;
          animation: boxBounce 20s var(--delay) infinite ease-out, boxColor 20s var(--delay) infinite linear;
}
@-webkit-keyframes boxBounce {
  0%, 10% {
    transform: translateZ(0em) rotateX(180deg);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  20%, 100% {
    transform: translateZ(0em) rotateX(180deg);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  15% {
    transform: translateZ(2.5em) rotateX(180deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}
@keyframes boxBounce {
  0%, 10% {
    transform: translateZ(0em) rotateX(180deg);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  20%, 100% {
    transform: translateZ(0em) rotateX(180deg);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  15% {
    transform: translateZ(2.5em) rotateX(180deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}
.matryoshBox .bottom .side {
  position: absolute;
  bottom: 50%;
  width: 1em;
  height: 0.5em;
  background-color: inherit;
  background-image: radial-gradient(at top, #0000, 75%, #0004);
  box-shadow: 0 0 0.2em #0004 inset;
  transform: rotateX(90deg) rotateY(var(--sideAngle, 0deg)) translateZ(0.5em);
  transform-origin: bottom;
  -webkit-animation: sideHeight 20s var(--delay) infinite linear;
          animation: sideHeight 20s var(--delay) infinite linear;
}
@-webkit-keyframes sideHeight {
  0%, 10% {
    height: 0.375em;
  }
  20%, 100% {
    height: 0.5em;
  }
}
@keyframes sideHeight {
  0%, 10% {
    height: 0.375em;
  }
  20%, 100% {
    height: 0.5em;
  }
}
.matryoshBox .bottom .side:nth-child(1) {
  --sideAngle: 0deg;
}
.matryoshBox .bottom .side:nth-child(2) {
  --sideAngle: 90deg;
}
.matryoshBox .bottom .side:nth-child(3) {
  --sideAngle: 180deg;
}
.matryoshBox .bottom .side:nth-child(4) {
  --sideAngle: 270deg;
}
.matryoshBox .top {
  bottom: 100%;
  background-image: radial-gradient(at top, #0000, 75%, #0006);
  transform-origin: bottom;
  -webkit-animation: boxOpen 20s var(--delay) infinite ease-in-out, boxColor 20s var(--delay) infinite linear;
          animation: boxOpen 20s var(--delay) infinite ease-in-out, boxColor 20s var(--delay) infinite linear;
}
@-webkit-keyframes boxOpen {
  0%, 10% {
    transform: rotateX(90deg) translateZ(0.375em);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  20%, 25%, 50%, 100% {
    transform: rotateX(90deg) translateZ(0.5em);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
  32% {
    transform: rotateX(-30deg) translateZ(0.5em);
  }
}
@keyframes boxOpen {
  0%, 10% {
    transform: rotateX(90deg) translateZ(0.375em);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  20%, 25%, 50%, 100% {
    transform: rotateX(90deg) translateZ(0.5em);
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }
  32% {
    transform: rotateX(-30deg) translateZ(0.5em);
  }
}
.matryoshBox .shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.25em;
  height: 0.25em;
  background-color: #0007;
  box-shadow: 0 0 0.5em 0.5em #0007;
  -webkit-animation: boxShadow 20s var(--delay) infinite linear;
          animation: boxShadow 20s var(--delay) infinite linear;
}
@-webkit-keyframes boxShadow {
  0%, 10%, 20%, 100% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  15% {
    opacity: 0.5;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}
@keyframes boxShadow {
  0%, 10%, 20%, 100% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
            animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
  15% {
    opacity: 0.5;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}
.matryoshBox .floor {
  position: absolute;
  width: 10em;
  height: 25em;
  background-color: #eee;
  background-image: radial-gradient(circle at 50% 55%, #0000, #000 11em), radial-gradient(circle at 0% 0%, #fff, #ddd 0.1em, #0000 0.4em), radial-gradient(circle at 0% 1em, #fff, #ddd 0.1em, #0000 0.4em), radial-gradient(circle at 1em 0%, #fff, #ddd 0.1em, #0000 0.4em), radial-gradient(circle at 1em 1em, #fff, #ddd 0.1em, #0000 0.4em), radial-gradient(circle at 50% 50%, #fff, #ddd 0.1em, #0000 0.4em);
  background-size: 100%, 1em 1em, 1em 1em, 1em 1em, 1em 1em, 1em 1em;
  background-position-x: center;
  transform: translate(-50%, -75%) translateZ(-1px);
  -webkit-animation: floorMove 20s infinite linear;
          animation: floorMove 20s infinite linear;
}
@-webkit-keyframes floorMove {
  from {
    background-position-y: center, 0em, 0em, 0em, 0em, 0em;
  }
  to {
    background-position-y: center, -20em, -20em, -20em, -20em, -20em;
  }
}
@keyframes floorMove {
  from {
    background-position-y: center, 0em, 0em, 0em, 0em, 0em;
  }
  to {
    background-position-y: center, -20em, -20em, -20em, -20em, -20em;
  }
}