:root {
  --tempo-animacao: 1s;
}

/* Animação */
@keyframes square-animation {
  0% {
    left: 0;
    top: 0;
  }

  10.5% {
    left: 0;
    top: 0;
  }

  12.5% {
    left: 32px;
    top: 0;
  }

  23% {
    left: 32px;
    top: 0;
  }

  25% {
    left: 64px;
    top: 0;
  }

  35.5% {
    left: 64px;
    top: 0;
  }

  37.5% {
    left: 64px;
    top: 32px;
  }

  48% {
    left: 64px;
    top: 32px;
  }

  50% {
    left: 32px;
    top: 32px;
  }

  60.5% {
    left: 32px;
    top: 32px;
  }

  62.5% {
    left: 32px;
    top: 64px;
  }

  73% {
    left: 32px;
    top: 64px;
  }

  75% {
    left: 0;
    top: 64px;
  }

  85.5% {
    left: 0;
    top: 64px;
  }

  87.5% {
    left: 0;
    top: 32px;
  }

  98% {
    left: 0;
    top: 32px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

.fade-out {
  animation: fadeOut 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100px);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animacao {
  opacity: 0;
  transition: opacity var(--tempo-animacao) ease-out, transform var(--tempo-animacao) ease-out;
}

.in-view-left,
.in-view-right,
.in-view-top,
.in-view-bottom {
  animation-duration: var(--tempo-animacao);
  animation-fill-mode: forwards;
}

.out-view-left,
.out-view-right,
.out-view-top,
.out-view-bottom {
  animation-duration: var(--tempo-animacao);
  animation-fill-mode: forwards;
}

.in-view-left {
  animation-name: slideInLeft;
}

.out-view-left {
  animation-name: slideOutLeft;
}

.in-view-right {
  animation-name: slideInRight;
}

.out-view-right {
  animation-name: slideOutRight;
}

.in-view-top {
  animation-name: slideInTop;
}

.in-view-bottom {
  animation-name: slideInBottom;
}