*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-color: #000;
  background-image: url('assets/texture.svg');
  background-size: 10vw;
  overflow: hidden;
}

.pyramid {
  --w: 150px;
  --w-negative: calc(var(--w) * -1);
  --w-half: calc(var(--w) / 2);
  --w-half-negative: calc(var(--w) / 2 * -1);
  --rotate-x: 25deg;
  --rotate-y: -90deg;
  --rotate-x-negative: calc(var(--rotate-x) * -1);
  width: var(--w);
  height: var(--w);
  position: relative;
  transform-style: preserve-3d;
  perspective: 10000px;

  &.pyramid-top {
    animation: rotar 8s linear infinite alternate both;
  }

  &.pyramid-bottom {
    position: absolute;
    top: 50%;
    transform: translateZ(-100px) rotate(180deg) scaleZ(-1);
  }

  &.pausa {
    animation-play-state: paused;
  }

  .side {
    width: 100%;
    height: 100%;
    position: absolute;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    transform-origin: 50% 100%;
    --rotate-x-negative: -16.5deg;

    &.side-front {
      background-color: #00f8;
      transform: scale(1.02, 1.04) rotateX(22deg);
    }

    &.side-bottom {
      background-color: #0f08;
      transform: rotateX(90deg);
    }

    &.side-right {
      background-color: #f008;
      transform: translateZ(-75px) translateX(38px) rotateY(-63deg)
        rotateX(var(--rotate-x-negative)) scaleX(1.12);
    }

    &.side-left {
      background-color: #ff08;
      transform: translateZ(-75px) translateX(-38px) rotateY(63deg)
        rotateX(var(--rotate-x-negative)) scaleX(1.12);
    }
  }
}

@keyframes rotar {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(359deg) rotateY(359deg);
  }
}