/* style.css (CORRIGIDO) */
/* style.css
  Comentários explicativos adicionados para facilitar leitura futura.
  Estrutura:
  - Variáveis ( :root )
  - Estilos base (body, fonts, cores)
  - Background radial (pseudo-elemento)
  - Preloader (tela inicial com animação de digitação)
  - Cursor e animações de "dissolve/rebuild"
  - Título principal animado (#main-title)
  - Reveals / conteúdo
  - Scrollbar customizada
  - Navegação (nav-link, tooltip)
  - Cards de projeto, tags e links
  - Ajustes responsivos (mobile) com regras específicas para #contato
*/

/* =========================
   Variáveis e configurações globais
   ========================= */
:root {
    /* Cores usadas no background radial; atualizadas dinamicamente via JS */
    --grad-color-1: rgba(13, 148, 136, 0.3);
    --grad-color-2: rgba(99, 102, 241, 0.3);
}

/* =========================
   Estilos base
   - Define família de fontes, cor de fundo e cor de texto padrão
   ========================= */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #e5e5e5;
}

/* =========================
   Background radial (fixo)
   - Cria duas manchas radiais sutis com animação de pulso
   - Usamos pseudo-elemento para manter conteúdo separado do background
   ========================= */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: radial-gradient(circle at 10% 10%, var(--grad-color-1), transparent 30%),
                radial-gradient(circle at 90% 80%, var(--grad-color-2), transparent 35%);
    z-index: -1; /* atrás de todo o conteúdo */
    animation: subtle-pulse 15s infinite alternate;
    transition: background 1s ease-in-out;
}
@keyframes subtle-pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* =========================
   Preloader (tela de carregamento)
   - #preloader cobre a tela enquanto a animação inicial roda
   - A classe .hidden é adicionada via JS para esconder o preloader com transição
   ========================= */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0a0a0a; z-index: 9999; display: flex;
    align-items: center; justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
    visibility: visible; opacity: 1;
}
#preloader.hidden { /* estado escondido usado após término da animação */
    opacity: 0; visibility: hidden;
}
#animation-container { display: flex; align-items: center; justify-content: center; }
/* Texto dentro do preloader (nome que é digitado) */
.loader-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e5e5e5;
    position: relative;
    min-height: 40px; /* evita "pular" layout durante digitação */
}

/* =========================
   Cursor de digitação
   - #typing-cursor é inserido dinamicamente pelo JS
   - .typing-done remove o cursor após finalizar
   ========================= */
#typing-cursor {
    display: inline-block;
    width: 2px;
    height: 2rem;
    background-color: #818cf8;
    margin-left: 4px;
    animation: blink 0.7s infinite;
    position: relative;
    bottom: -4px;
}
.loader-name.typing-done #typing-cursor { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* =========================
   Animação de dissolver / fumaça (usada no preloader)
   - Cada letra recebe translate + blur + rotações via variáveis CSS
   - A classe .dissolving aciona a animação smoke-out
   ========================= */
.loader-name.dissolving span {
    display: inline-block;
    animation: smoke-out 0.7s forwards;
}
@keyframes smoke-out {
    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translate(var(--x-end), var(--y-end)) rotate(var(--r-end)) scale(0.5);
    }
}

/* =========================
   Reconstrução do título principal (#main-title)
   - Cada letra entra com animação (smoke-in) usando variáveis --x-start/--y-start/--r-start
   ========================= */
#main-title {
    transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(2rem, 8vw, 4.5rem);
}
#main-title span {
    display: inline-block;
    opacity: 0;
    animation: smoke-in 0.4s forwards;
    transform: translate(var(--x-start), var(--y-start)) rotate(var(--r-start)) scale(0.5);
    filter: blur(10px);
}
@keyframes smoke-in {
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

/* =========================
   Reveal do conteúdo "Sobre"
   - Classe .visible é adicionada via JS quando quiser mostrar o conteúdo após animação
   ========================= */
#sobre-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}
#sobre-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   Scrollbar customizada (apenas WebKit)
   - Estética, sem impacto funcional
   ========================= */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }

/* =========================
   Navegação lateral / topo
   - .nav-link é usada em todos os links do menu (ícones)
   - active-link indica o item ativo (estilizado via IntersectionObserver no JS)
   ========================= */
.nav-link {
    color: #9ca3af; /* text-gray-400 */
    transition: all 300ms ease;
    position: relative;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
@media (min-width: 768px) {
    .nav-link { padding: 0.75rem; } /* ajuste para telas maiores */
}
.nav-link:hover {
    color: #ffffff;
    background-color: rgba(31, 41, 55, 0.5); /* efeito hover */
}
.nav-link.active-link {
    color: #a5b4fc; /* destaque quando ativo */
    background-color: rgba(79, 70, 229, 0.18);
}
.logo-link.active-link {
    background: transparent;
    color: #ffffff;
}

/* Tooltip mostrado ao lado do ícone de nav (escondido no mobile) */
.nav-link .tooltip {
    position: absolute;
    left: 100%;
    margin-left: 1rem;
    padding: 0.25rem 0.5rem;
    background: #111827; /* cinza escuro */
    color: #ffffff;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms ease;
    white-space: nowrap;
    transform: translateX(-10px);
}
.nav-link:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
@media (max-width: 767px) {
    /* tooltips escondidos em telas pequenas para evitar sobreposição */
    .nav-link .tooltip { display: none; }
}

/* =========================
   Cards de projetos
   - Aparência dos cartões, bordas e hover
   - transform-style: preserve-3d mantém efeito 3D (tilt) consistente
   ========================= */
.project-card {
    background: rgba(17,24,39,0.5); /* transparência sobre o fundo escuro */
    border: 1px solid #1f2937; /* borda sutil */
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out;
    transform-style: preserve-3d;
    overflow: hidden;
}
.project-card:hover {
    border-color: #6366f1; /* muda cor da borda ao passar o mouse */
    box-shadow: 0 20px 40px rgba(79,70,229,0.08);
}

/* Tags de tecnologias */
.tech-tag {
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(67,56,202,0.12);
    color: #a5b4fc; /* cor das tags */
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
}

/* Links internos do projeto */
.project-link {
    color: #818cf8; /* link com tom indigo */
    font-weight: 600;
    text-decoration: none;
    transition: color 300ms ease;
}
.project-link:hover { color: #ffffff; }

/* Mantém o efeito de scale definido no HTML com utilitários Tailwind-like.
   Obs: .group-hover\:scale-110 é uma classe que contém ":" e foi escapada ao gerar o CSS.
*/
.group:hover img,
.group-hover\:scale-110:hover img {
    transform: scale(1.10);
}

/* Pequeno helper responsivo convertido de utility Tailwind */
@media (min-width: 768px) {
    .md\:p-6 { padding: 1.5rem; }
}

/* ======================================================================
   BLOCO DE AJUSTES PARA MOBILE (REVISÃO 10 - FONTES E ESPAÇAMENTO AJUSTADOS)
   ====================================================================== */

@media (max-width: 767px) {
  
  /* Garante que ao rolar para uma âncora, a seção fique abaixo do nav fixo */
  section[id] {
    scroll-margin-top: 90px;
  }

  /* Layout padrão para seções em mobile: */
  section.content-section {
    padding-top: 90px;
    padding-bottom: 60px;
    display: flex;            
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Exceção para a seção SOBRE (centralizada verticalmente) */
  #sobre.content-section {
    min-height: 100vh;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0; 
  }
  
  /* EXCEÇÃO PARA A SEÇÃO INÍCIO (OFERTA)
     CORREÇÃO: Alinha ao topo (flex-start) para que o padding do HTML funcione.
  */
  #inicio.content-section {
    min-height: 100vh;
    justify-content: flex-start; /* CORREÇÃO FINAL */
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ==========================================================
     Ajustes agressivos para a seção CONTATO (mobile)
     ========================================================== */
  
  #contato.content-section {
    /* AJUSTE PARA REDUZIR DISTÂNCIA (ITEM 3) */
    padding-top: 50px !important; 
    padding-bottom: 20px !important;
    justify-content: flex-start;
  }

  /* Título e subtítulo do contato: reduz tamanho para caber no mobile */
  #contato h2.reveal {
    font-size: 2.0rem !important;
    margin-bottom: 0.25rem !important;
  }
  #contato p.text-lg {
     font-size: 0.85rem !important;
     margin-bottom: 0.75rem !important;
  }
  
  /* Labels menores para economizar espaço */
  #contato #contact-form label {
     font-size: 0.75rem !important;
  }

  /* --- Compactação do formulário --- */
  /* Remove o espaçamento vertical grande entre os blocos do form */
  #contato #contact-form > div + div {
      margin-top: 0.25rem !important;
  }
  
  /* Campos de input e textarea: menos padding e fonte menor */
  #contato #contact-form input,
  #contato #contact-form textarea {
      margin-top: 0 !important;
      padding-top: 0.4rem !important;
      padding-bottom: 0.4rem !important;
      font-size: 0.9rem !important;
  }
  
  /* Força altura menor para textarea para evitar scroll desnecessário */
  #contato #contact-form textarea {
      min-height: 40px !important;
      height: 50px !important;
  }
  
  /* Botão: menos padding vertical para ficar mais compacto */
  #contato #submit-button {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
  }
  /* Move o botão para mais próximo dos campos */
  #contato #contact-form > div:has(#submit-button) {
      margin-top: 0.5rem !important; 
  }
  
  /* =========================
     Regras de fonte e espaçamento gerais (Item 1)
     ========================= */
  /* Nome/Título principal mais compacto (Item 1) */
  #main-title {
    font-size: 2.3rem !important; /* REDUZIDO de 2.6rem */
  }
  
  h1.reveal {
    font-size: 2.5rem !important;
  }
  h2.reveal {
    font-size: 2.2rem !important;
  }
  
  /* Descrição/Subtítulo em 'Sobre' mais compacto (Item 1) */
  p.text-xl, p.text-2xl {
    font-size: 1.05rem !important; /* REDUZIDO de 1.1rem */
    margin-bottom: 1rem !important; /* Espaçamento da descrição principal */
  }
  
  /* Parágrafos de descrição em 'Sobre' mais compactos (Item 1) */
  p.text-gray-400 {
    font-size: 0.9rem !important; /* REDUZIDO de 0.95rem */
    margin-bottom: 0.75rem !important; /* Espaçamento entre parágrafos */
  }
  
  /* Regras gerais de margem (reduzidas) */
  h1, h2, p, form, .reveal {
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important; 
  }

  /* Espaçamento do form (default mobile) */
  #contact-form {
    gap: 1rem; /* valor padrão — alguns ajustes específicos o anulam */
  }

  /* Tamanho base dos campos para acessibilidade */
  input, textarea, button {
    font-size: 1rem;
  }
}