@keyframes virDaEsquerda {
  from {
    opacity: 0;
    transform: translateX(-150px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes subirTexto {
  from {
    opacity: 0;
    transform: translateY(150px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subirSuave {
  from {
    opacity: 0;
    transform: translateY(300px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subirbtn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes descerTexto {
  from {
    opacity: 0;
    transform: translateY(-300px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes virDaDireita {
  from {
    opacity: 0;
    transform: translateX(100%); /* Começa 100% à direita (fora da tela) */
  }
  to {
    opacity: 1;
    transform: translateX(0); /* Termina na sua posição final */
  }
}

@keyframes entradaEmbaralhada {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* ======================================================== */
/* 1. KEYFRAMES (Sobre nós)                  */
/* ======================================================== */

/* Keyframe para a linha divisória se "desenhar" na tela */
@keyframes esticarLinha {
  from {
    opacity: 0;
    transform: scaleX(0); /* Começa com largura 0 */
  }
  to {
    opacity: 1;
    transform: scaleX(1); /* Termina com largura total */
  }
}

/* Outros keyframes que já usamos antes (é bom tê-los aqui por garantia) */
@keyframes descerSuave {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}