/* Estilos que o Tailwind não cobre: botão com borda animada e seta personalizada dos <select>. */

:root {
  --btn-animado-texto: #5d4037; /* marrom escuro */
  --btn-animado-fundo-hover: #ffd1df;
  --btn-animado-linha: #ffb6c1; /* rosa das linhas que correm pela borda */
  --btn-animado-duracao: 2s;
}

/* Fundo transparente para deixar aparecer a cor pastel da página. */
.btn-animado {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  background-color: transparent;
  color: var(--btn-animado-texto);
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 2px;
  overflow: hidden;
  transition: 0.5s;
  border: none;
  cursor: pointer;
}

/* Hover elegante, com sombra rosa suave em vez de neon. */
.btn-animado:hover {
  background: var(--btn-animado-fundo-hover);
  color: var(--btn-animado-texto);
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.65);
}

/* Os quatro <span> vazios do botão são as linhas animadas: topo, direita, base e esquerda. */
.btn-animado span {
  position: absolute;
  display: block;
}

.btn-animado span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--btn-animado-linha));
  animation: btn-animado-topo var(--btn-animado-duracao) linear infinite;
}

@keyframes btn-animado-topo {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

.btn-animado span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--btn-animado-linha));
  animation: btn-animado-direita var(--btn-animado-duracao) linear infinite;
  animation-delay: 0.25s;
}

@keyframes btn-animado-direita {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

.btn-animado span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(270deg, transparent, var(--btn-animado-linha));
  animation: btn-animado-base var(--btn-animado-duracao) linear infinite;
  animation-delay: 0.5s;
}

@keyframes btn-animado-base {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

.btn-animado span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(360deg, transparent, var(--btn-animado-linha));
  animation: btn-animado-esquerda var(--btn-animado-duracao) linear infinite;
  animation-delay: 0.75s;
}

@keyframes btn-animado-esquerda {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}

/* Seta (chevron) na cor cocoa, no lugar da seta nativa escondida por "appearance-none". */
.select-seta {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%234b3621%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25em;
}