/*
 * styles.css
 * ==========
 * Ajustes finos que complementam as classes utilitárias do Tailwind CSS
 * (carregado via CDN em index.html). Contém apenas o que não é
 * convenientemente expresso com utilitários: fonte base, scrollbar,
 * animações do modal de contato e estado "aberto" do menu mobile.
 */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Scrollbar customizada (tema escuro) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0b1120;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22d3ee, #a855f7);
  border-radius: 999px;
}

/* Menu mobile: alterna de "hidden" para "flex" via JS */
#mobileMenu.open {
  display: flex;
}

/* Modal de contato: alterna de "hidden" para "flex" via JS */
#contactModal.open {
  display: flex;
}

/* Animação de entrada do modal */
#contactModal .relative {
  animation: modal-in 0.2s ease-out;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Spinner usado no botão de envio durante a simulação de loading */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}