.titaui-mirroring {
  transform: translateZ(0);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  position: relative;
}

.titaui-mirroring__item {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.titaui-mirroring__item:first-child {
  z-index: 2;
}

.titaui-mirroring__item--hidden {
  animation: hidden 0.5s linear forwards;
}

.titaui-mirroring__item--visible {
  animation: visible 0.5s linear forwards;
}

@keyframes hidden {
  0% {
    transform: rotateY(0);
    opacity: 1;
  }

  30% {
    transform: rotateY(60deg);
  }

  70% {
    transform: rotateY(120deg);
  }

  100% {
    transform: rotateY(180deg);
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes visible {
  0% {
    transform: rotateY(-180deg);
    opacity: 0;
  }

  30% {
    transform: rotateY(-120deg);
  }

  70% {
    transform: rotateY(-60deg);
  }

  100% {
    transform: rotateY(0);
    opacity: 1;
    visibility: visible;
  }
}
