/* Animações */

.lazy {
    opacity: 0;
    transition: all 1s ease-in-out;
}
@keyframes cubeRotateIn {
    0% {
      transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg) scale(0.1);
      opacity: 0;
    }
    70% {
      transform: rotateX(20deg) rotateY(20deg) rotateZ(20deg) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: rotateX(0) rotateY(0) rotateZ(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes scaleRotateIn {
    0% {
      transform: scale(0.1) rotateZ(-360deg);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) rotateZ(0);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotateZ(0);
      opacity: 1;
    }
  }

  @keyframes bounceRotateIn {
    0% {
      transform: scale(0.1) rotateX(-180deg) rotateY(-180deg);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) rotateX(20deg) rotateY(20deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotateX(0) rotateY(0);
      opacity: 1;
    }
  }

  @keyframes slideFlipIn {
    0% {
      transform: translateY(200%) rotateX(-180deg);
      opacity: 0;
    }
    70% {
      transform: translateY(-10%) rotateX(20deg);
      opacity: 1;
    }
    100% {
      transform: translateY(0) rotateX(0);
      opacity: 1;
    }
  }

  @keyframes diagonalScaleIn {
    0% {
      transform: scale(0.1) translateX(50%) translateY(-50%);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) translateX(-10%) translateY(10%);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateX(0) translateY(0);
      opacity: 1;
    }
  }

  @keyframes twistScaleIn {
    0% {
      transform: rotateZ(-180deg) scale(0.1);
      opacity: 0;
    }
    70% {
      transform: rotateZ(0) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: rotateZ(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes zigzagRotateIn {
    0% {
      transform: rotate(-180deg) translateX(-200%);
      opacity: 0;
    }
    70% {
      transform: rotate(20deg) translateX(10%);
      opacity: 1;
    }
    100% {
      transform: rotate(0) translateX(0);
      opacity: 1;
    }
  }

  @keyframes bounceScaleIn {
    0% {
      transform: scale(0.1) translateY(100%);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) translateY(-10%);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  @keyframes spinZoomIn {
    0% {
      transform: rotateX(-180deg) rotateY(-180deg) scale(0.1);
      opacity: 0;
    }
    70% {
      transform: rotateX(20deg) rotateY(20deg) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: rotateX(0) rotateY(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes rotateScaleIn {
    0% {
      transform: rotate(-180deg) scale(0.1);
      opacity: 0;
    }
    70% {
      transform: rotate(0) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: rotate(0) scale(1);
      opacity: 1;
    }
  }

  /* Aplicando animações adicionais às caixas */
  .cube-rotate-in {
    animation: cubeRotateIn 1s forwards;
  }

  .scale-rotate-in {
    animation: scaleRotateIn 1s forwards;
  }

  .bounce-rotate-in {
    animation: bounceRotateIn 1s forwards;
  }

  .slide-flip-in {
    animation: slideFlipIn 1s forwards;
  }

  .diagonal-scale-in {
    animation: diagonalScaleIn 1s forwards;
  }

  .twist-scale-in {
    animation: twistScaleIn 1s forwards;
  }

  .zigzag-rotate-in {
    animation: zigzagRotateIn 1s forwards;
  }

  .bounce-scale-in {
    animation: bounceScaleIn 1s forwards;
  }

  .spin-zoom-in {
    animation: spinZoomIn 1s forwards;
  }

  .rotate-scale-in {
    animation: rotateScaleIn 1s forwards;
  }