/* Pack.Orbbt.CSS */
.botao-animado {
  all: unset;
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  position: relative;
  padding: 0.6em 2em;
  border: mediumspringgreen solid 0.15em; /* Cor da borda */
  border-radius: 0.25em; /* Bordas arredondadas */
  color: mediumspringgreen; /* Cor inicial do texto */
  font-size: 1.5em;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: border 300ms, color 300ms;
  user-select: none;
  text-align: center; /* Garante alinhamento central */
}

.botao-animado p {
  z-index: 1; /* Garante que o texto esteja acima dos elementos decorativos */
  margin: 0; /* Remove margens que possam desalinhar */
}

.botao-animado:hover {
  color: #212121; /* Cor do texto ao passar o mouse */
}

.botao-animado:active {
  border-color: teal; /* Cor da borda ao clicar */
}

.botao-animado::after,
.botao-animado::before {
  content: "";
  position: absolute;
  width: 9em;
  aspect-ratio: 1;
  background: mediumspringgreen; /* Cor dos anéis */
  opacity: 50%;
  border-radius: 50%; /* Formato circular */
  transition: transform 500ms, background 300ms;
}

.botao-animado::before {
  left: 0;
  transform: translateX(-8em); /* Posição inicial do anel esquerdo */
}

.botao-animado::after {
  right: 0;
  transform: translateX(8em); /* Posição inicial do anel direito */
}

.botao-animado:hover::before {
  transform: translateX(-1em); /* Movimento do anel esquerdo no hover */
}

.botao-animado:hover::after {
  transform: translateX(1em); /* Movimento do anel direito no hover */
}

.botao-animado:active::before,
.botao-animado:active::after {
  background: teal; /* Cor dos anéis ao clicar */
}