/*
|--------------------------------------------------------------------------
| style.css (Profissional - Tema e Animação de Máquina de Escrever)
|--------------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* =================================
   1. Estilos Globais, Fontes e Fundo
================================= */

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: url('https://cdn.discordapp.com/attachments/1440395779520073808/1449432665337106533/13b605a6c4c828f3765fbf8d7b078d6e.jpg?ex=693ee0dc&is=693d8f5c&hm=28af3dc2f19022a1eca493f3a2658d37f10291afd68f4ff6160b4d2eea2bc5c2&');
    background-size: cover;
    background-attachment: fixed; 
    background-position: center;
}

/* Camada escura/clara sobre o background para garantir legibilidade (Controlado via JS) */
.theme-bg-overlay {
    background-color: rgba(15, 15, 15, 0.9); /* Default Dark */
    min-height: 100vh;
    transition: background-color 0.5s;
}

/* Header Sticky - Fundo ligeiramente opaco para fixar sobre o scroll */
.theme-bg-sticky {
    background-color: var(--bg-primary-opac);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.5s, backdrop-filter 0.5s;
}

/* =================================
   2. Variáveis Customizadas (Temas)
================================= */

/* Variáveis Comuns */
:root {
    --color-neon: #00ADB5; /* Cor de destaque */
}

/* DARK MODE (Padrão) */
body[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-primary-opac: rgba(15, 15, 15, 0.85); /* Para header/nav sticky */
    --bg-secondary: #1c1c1c;
    --text-primary: #FFFFFF;
    --text-secondary: #aaaaaa;
    --border-element: #333333;
    --bg-element-dark: #333333;
    --hover-border-color: #FFFFFF;
    --glow-color: rgba(0, 173, 181, 0.4);
}

/* LIGHT MODE OVERRIDES (AJUSTADO: menos 'granada de luz' e mais contraste) */
body[data-theme="light"] {
    --bg-primary: #f7f7f7; /* Fundo principal suave */
    --bg-primary-opac: rgba(247, 247, 247, 0.85); /* Para header/nav sticky */
    --bg-secondary: #FFFFFF; /* Fundo de card mais branco para contraste */
    --text-primary: #222222; /* Texto escuro suave */
    --text-secondary: #666666;
    --border-element: #ddd;
    --bg-element-dark: #ebebeb; /* Fundo de badge/elemento mais claro */
    --hover-border-color: #444444; /* Borda de hover mais visível */
    --glow-color: rgba(0, 173, 181, 0.6);
}

/* =================================
   3. Aplicação de Variáveis e Classes
================================= */

/* Aplicação de Cores */
.theme-bg-primary { background-color: var(--bg-primary); }
.theme-bg-element { background-color: var(--bg-secondary); }
.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-faded { color: var(--text-secondary); }
.theme-border-element { border-color: var(--border-element); }
.theme-icon-primary { color: var(--text-primary); stroke: var(--text-primary); transition: all 0.5s; }
.theme-bg-element-dark { background-color: var(--bg-element-dark); }
.theme-btn-neutral { background-color: var(--bg-secondary); color: var(--text-primary); }
.theme-btn-neutral:hover { background-color: var(--bg-element-dark); }

/* Ícones Adaptativos (PNGs/JPGs) */
.theme-icon-adaptive { filter: none; transition: filter 0.5s; } 
body[data-theme="light"] .theme-icon-adaptive { 
    filter: invert(100%); /* Inverte ícones (assumindo que são brancos no dark mode) */
}

/* Botão Neon (Usado na Nav Bar Mobile ativa) */
.theme-btn-neon {
    background-color: var(--color-neon) !important;
    color: var(--bg-primary) !important; /* Texto fica escuro no neon blue */
}
.theme-btn-neon span, .theme-btn-neon .theme-icon-adaptive {
    color: var(--bg-primary) !important;
}
.theme-btn-neon img {
    /* Inverte para preto no neon blue, se o original for branco */
    filter: invert(100%) grayscale(100%) brightness(0); 
}

/* Efeito Glow no Hover (Usado em cards maiores) */
.theme-hover-glow {
    /* REMOVIDO: border-color padrão */
    transition: box-shadow 0.3s, border-color 0.3s;
    border: 1px solid transparent; /* Borda transparente por padrão para evitar que o elemento salte */
}
.theme-hover-glow:hover {
    /* Efeito de Borda Sutil (Shadow interna ou outline) */
    box-shadow: 0 0 10px 0 var(--glow-color);
    /* ADICIONADO: Borda no hover */
    border-color: var(--hover-border-color); 
}

/* Efeito Glow Pequeno no Hover (Usado em botões e badges/cards menores) */
.theme-hover-glow-small {
    /* REMOVIDO: border-color padrão */
    transition: box-shadow 0.3s, border-color 0.3s;
    border: 1px solid transparent; /* Borda transparente por padrão para evitar que o elemento salte */
}
.theme-hover-glow-small:hover {
    /* Borda sutilmente mais visível e um glow suave */
    box-shadow: 0 0 5px 0 var(--glow-color);
    /* ADICIONADO: Borda no hover */
    border-color: var(--hover-border-color);
}

/* =================================
   4. Efeito Máquina de Escrever (Typewriter)
================================= */

/* O cursor que pisca */
.typewriter {
    overflow: hidden; /* Garante que o texto só apareça ao digitar */
    border-right: .15em solid var(--color-neon); /* O cursor */
    white-space: nowrap; /* Impede que o texto quebre a linha */
    margin: 0 auto; /* Centraliza */
    letter-spacing: .1em; /* Espaçamento entre letras */
    animation: 
        typing 3.5s steps(30, end), /* Animação de digitação */
        blink-caret .75s step-end infinite; /* Animação do cursor */
}

/* Efeito de digitação */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Efeito de piscar do cursor */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--color-neon); }
}

/* =================================
   5. Outros Estilos (Divisor, Proficiência, etc.)
================================= */

/* Divisor */
.theme-divider { 
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--border-element), transparent); 
}

/* Badges de Tecnologia (Experiência) */
.tech-badge { 
    background-color: var(--bg-element-dark); 
    color: var(--text-primary); 
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.875rem; 
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* REMOVIDO: Borda padrão */
    border: 1px solid var(--bg-element-dark); 
    transition: background-color 0.3s, border-color 0.3s;
}

/* Barra de Progresso - Garante que a cor de preenchimento seja Neon */
#proficiencia .h-full {
    background-color: var(--color-neon);
    transition: width 0.5s ease-out; 
}