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

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: white transparent;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-color: #000;
  transform-style: preserve-3d;
  perspective: 10000px;
  overflow: hidden;
}

.container-cube {
  --size: 300px;
  width: var(--size);
  height: var(--size);
  position: relative;
  transform-style: preserve-3d;
  perspective: 10000px;
  animation: rotar 8s linear infinite alternate;
  zoom: 0.5;

  @media (width <= 1111px) {
    zoom: 0.3;
  }

  .container {
    width: 150px;
    height: 120px;
    position: absolute;
    animation: rotarInterno 8s linear infinite alternate both;
    transform-style: preserve-3d;
    left: 50%;
    top: 50%;
    perspective: 10000px;
    zoom: 0.5;

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

    .base {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      perspective: 10000px;

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

        &::before {
          content: '';
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          inset: 0;
          pointer-events: none;
          clip-path: polygon(0 100%, 50% 0, 100% 100%);
          background-image: linear-gradient(
            to right bottom,
            gold,
            mediumpurple,
            cyan
          );
          filter: blur(20px);
        }

        &.side-1 {
          transform: rotateX(var(--translate-x));
        }

        &.side-2 {
          transform: translate(99px, -71px) rotate(-72deg)
            rotateX(var(--translate-x));
        }
        &.side-3 {
          transform: translate(-99px, -71px) rotate(72deg)
            rotateX(var(--translate-x));
        }
        &.side-4 {
          transform: translate(-61px, -187px) rotate(144deg)
            rotateX(var(--translate-x));
        }
        &.side-5 {
          transform: translate(61px, -187px) rotate(-144deg)
            rotateX(var(--translate-x));
        }
      }

      &.base-bottom {
        bottom: 0;
      }

      &.center {
        .side {
          --translate-x: -90deg;
        }
      }
      &.center-top {
        transform-origin: 50% 50%;
        transform: translateZ(120px) scaleZ(-1);
        .side {
          --translate-x: -90deg;
        }
      }

      &.base-top {
        top: 0px;
        transform: translateZ(120px) scaleZ(-1);
      }
    }
  }

  .side {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
    box-shadow: inset 0 0 80px #fff8;

    &.behind {
      transform: translateZ(calc(-1 * var(--size)));
    }
    &.right {
      transform-origin: 100% 0;
      transform: rotateY(-90deg);
    }
    &.left {
      transform-origin: 0% 0;
      transform: rotateY(90deg);
    }
    &.top {
      transform-origin: 50% 0;
      transform: rotateX(-90deg);
    }
    &.bottom {
      transform-origin: 50% 100%;
      transform: rotateX(90deg);
    }
  }
}

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

@keyframes rotarInterno {
  0% {
    transform: translate(-45%, -50%) translateZ(calc(var(--size) * -1.1))
      rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: translate(-45%, -50%) translateZ(calc(var(--size) * -1.1))
      rotateX(359deg) rotateY(359deg);
  }
}