/* =============================================================
   style.css — Estilos globais do portfólio Walter Rodrigues
   Compartilhado entre: index.html e portfolio.html

   ESTRUTURA DESTE ARQUIVO:
   1. Reset & Base
   2. Animações (keyframes)
   3. Classes utilitárias globais
   4. Sidebar & Menu
   5. Componentes reutilizáveis
   6. Formulário
   7. Portfolio page (específico da página portfolio.html)
============================================================= */


/* ============================================================
   1. RESET & BASE
   Aplica fontes, suavização e comportamento de scroll global.
============================================================ */

html {
  /* scroll-smooth equivale ao scroll-smooth do Tailwind,
     mas aqui no CSS cobre também rolagens feitas por JS */
  scroll-behavior: smooth;
}

body {
  /* font-body é a fonte Inter, registrada no tailwind.config */
  font-family: 'Inter', sans-serif;

  /* antialiased: suaviza as bordas dos caracteres no Mac/Chrome.
     Sem isso, fontes podem parecer levemente borradas ou pesadas. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   2. ANIMAÇÕES (keyframes)
   Definimos os keyframes aqui e aplicamos via classes abaixo.
   keyframes não podem ser criados com Tailwind puro — por isso
   precisam ficar no CSS.
============================================================ */

/* Anel pulsante ao redor da foto de perfil.
   Escala de 1x para 1.15x enquanto vai ficando transparente.
   Dá a sensação de uma onda de radar se expandindo. */
@keyframes ping-slow {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0;   }
}

/* Gradiente animado no hero da página de portfólio.
   O fundo se desloca suavemente, criando um efeito de
   "movimento vivo" sem precisar de JavaScript. */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

/* Fade + subida suave para os cards do portfólio.
   Combinado com animation-delay em cada card, cria um
   efeito de cascata ao carregar a página. */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   3. CLASSES UTILITÁRIAS GLOBAIS
   Classes reutilizáveis em ambas as páginas.
============================================================ */

/* Fade-up controlado por JS (IntersectionObserver).
   Começa invisível e deslocado; o JS adiciona .visible
   quando o elemento entra na viewport. */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Anel pulsante — aplicado ao div ao redor da foto */
.ring-pulse {
  animation: ping-slow 2s ease-out infinite;
}

/* Feedback de sucesso no botão de envio do formulário.
   !important necessário para sobrescrever as classes Tailwind
   de background que já estão no elemento. */
.btn-success {
  background-color: #16a34a !important; /* green-600 */
}


/* ============================================================
   4. SIDEBAR & MENU
   Estilos do menu lateral compartilhados entre as páginas.
============================================================ */

/* Transição suave da sidebar mobile (hamburguer).
   cubic-bezier(0.4, 0, 0.2, 1) é a curva "ease-in-out material"
   — mesma usada pelo Material Design. Mais natural que linear. */
#sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Remove a scrollbar visível na sidebar, mantendo a
   funcionalidade de scroll interno quando necessário. */
aside::-webkit-scrollbar {
  width: 0px;
}

/* Linha hambúrguer — cada span dentro do botão #menuBtn */
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Quando o botão recebe a classe .open (adicionada pelo JS),
   as duas linhas rotacionam e se cruzam formando um X. */
#menuBtn.open .line-top    { transform: translateY(5px) rotate(45deg);   }
#menuBtn.open .line-bottom { transform: translateY(-5px) rotate(-45deg); }

/* Links do menu: técnica de sublinhado deslizante com ::after.
   O ::after cria uma linha invisível (width: 0) que expande
   até 100% no hover ou quando o link recebe a classe .active. */
.nav-link {
  position: relative;
  display: inline-block; /* necessário para o ::after funcionar */
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #22d3ee; /* brand-400 */
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Estado ativo: muda a cor do texto do link */
.nav-link.active {
  color: #22d3ee; /* brand-400 */
}


/* ============================================================
   5. COMPONENTES REUTILIZÁVEIS
   Barras de skill, cards de stats, etc.
============================================================ */

/* Barra de habilidade: DEVE começar com width 0.
   O !important garante que nenhuma classe do Tailwind
   sobrescreva este valor antes do JS agir.
   O JS define a largura real via style.width = "85%".
   A transition abaixo anima esse preenchimento. */
.skill-bar {
  width: 0% !important;
  transition: width 1s ease-in-out;
}


/* ============================================================
   6. FORMULÁRIO DE CONTATO
   Customizações que o Tailwind não cobre diretamente.
============================================================ */

/* Placeholder dos campos de texto: cor mais suave */
input::placeholder,
textarea::placeholder {
  color: #475569; /* slate-600 */
}

/* Remove o resize padrão do textarea (já feito com
   a classe Tailwind resize-none, mas aqui como fallback) */
textarea {
  resize: none;
}


/* ============================================================
   7. PÁGINA DE PORTFÓLIO (portfolio.html)
   Estilos específicos dos cards de projetos e do hero.
============================================================ */

/* Hero da página de portfólio: gradiente animado em loop.
   background-size: 200% permite que o background-position
   se mova para criar o efeito de animação com gradient-shift. */
.portfolio-hero {
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #0c1a2e 25%,
    #0f2a1f 50%,
    #0c1a2e 75%,
    #0f172a 100%
  );
  background-size: 200% 200%;
  animation: gradient-shift 12s ease infinite;
}

/* Card de projeto: efeito de elevação no hover.
   translateY(-6px) sobe o card levemente.
   box-shadow cria sombra mais intensa (sensação de distância).
   border-color muda para brand-400 (ciano). */
.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(34, 211, 238, 0.4); /* brand-400 com 40% opacidade */
}

/* Imagem de preview do card: zoom suave no hover.
   O overflow: hidden no container (Tailwind) garante que
   a imagem não "vaze" para fora do card arredondado. */
.project-card-img {
  transition: transform 0.5s ease;
}
.project-card:hover .project-card-img {
  transform: scale(1.05);
}

/* Overlay sobre a imagem do card: aparece no hover.
   Começa com opacity-0, vai para opacity-100 no hover do card.
   Contém os botões de ação (ver site / ver detalhes). */
.project-card-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-card:hover .project-card-overlay {
  opacity: 1;
}

/* Badge de tecnologia (ex: "WordPress", "WooCommerce").
   Estilo base — a cor é definida por modificadores de classe
   diretamente no HTML (ex: badge-wp, badge-woo). */
.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Variações de cor por tecnologia */
.badge-wp   { background: rgba(33, 117, 155, 0.15); color: #21759b; border: 1px solid rgba(33, 117, 155, 0.3); }
.badge-woo  { background: rgba(150, 88, 138, 0.15); color: #96588a; border: 1px solid rgba(150, 88, 138, 0.3); }
.badge-elem { background: rgba(146, 17, 235, 0.12); color: #9211eb; border: 1px solid rgba(146, 17, 235, 0.25); }
.badge-loja { background: rgba(34, 211, 238, 0.12); color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.25); }
.badge-blog { background: rgba(234, 179, 8, 0.12);  color: #eab308; border: 1px solid rgba(234, 179, 8, 0.25);  }
.badge-corp { background: rgba(99, 102, 241, 0.12); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.25); }

/* Entrada animada dos cards com delay em cascata.
   Cada card tem uma classe .card-delay-N definida no HTML.
   A animação fadeInUp (definida nos keyframes acima)
   cria o efeito de surgimento sequencial. */
.card-delay-1 { animation: fadeInUp 0.5s ease forwards 0.1s; opacity: 0; }
.card-delay-2 { animation: fadeInUp 0.5s ease forwards 0.2s; opacity: 0; }
.card-delay-3 { animation: fadeInUp 0.5s ease forwards 0.3s; opacity: 0; }
.card-delay-4 { animation: fadeInUp 0.5s ease forwards 0.4s; opacity: 0; }

/* Filtro de categoria: botão ativo no filtro de projetos */
.filter-btn.active {
  background-color: #22d3ee; /* brand-400 */
  color: #0f172a;            /* slate-950 */
  border-color: #22d3ee;
}

/* ============================================================
   8. FORMULÁRIO DE ORÇAMENTO (portfolio.html)
============================================================ */

/* Botão de faixa de orçamento selecionado.
   A classe .selected é adicionada pelo JS ao clicar. */
.budget-btn.selected {
  border-color: #22d3ee;
  background-color: rgba(34, 211, 238, 0.08);
}
.budget-btn.selected span {
  color: #22d3ee;
}

/* Cor das options do select em modo escuro */
select option,
select optgroup {
  background-color: #1e293b; /* slate-800 */
  color: #e2e8f0;            /* slate-200 */
}