html {
      scroll-behavior: smooth;
}

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Definição das Variáveis de Cores */
:root {
    --bg-color: #121212;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-color: #ffffff; /* Branco puro para destaques */
    --card-border: #333333;
}



body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--text-secondary);
}

/* Navegação */
.navbar-brand {
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--text-primary) !important;
}

/* Área Hero */
.hero-section {
    padding: 120px 0;
}

.hero-text {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

.hero-subtext {
    color: var(--text-secondary);
}

/* Cartões de Projeto */
.project-card {
    border-top: 1px solid var(--card-border);
    padding-top: 25px;
    margin-bottom: 80px;
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    border-top-color: var(--accent-color); /* A linha muda de cor ao passar o mouse */
}

.project-year {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-family: monospace; /* Fonte estilo código para números */
}

.project-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 10px;
}

.project-desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 90%;
}

.project-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--text-secondary);
    padding-bottom: 2px;
}

/* Rodapé */
footer {
    border-top: 1px solid var(--card-border);
    color: var(--text-secondary);
}


/* --- Efeitos de Scroll --- */

/* Estado inicial: Invisível e deslocado para baixo */
.hidden {
    opacity: 0;
    filter: blur(5px); /* Um leve desfoque fica chique */
    transform: translateY(50px); /* Empurrado 50px para baixo */
    transition: all 1.2s ease; /* A mágica da suavidade (1.2 segundos) */
}

/* Estado final: Visível e na posição original */
.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Opcional: Atrasar elementos para fazer efeito "escadinha" */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }


/* --- Bento Grid Styles --- */

.bento-card {
    background-color: #1a1a1a; /* Cinza escuro, mas não preto */
    border-radius: 24px;       /* Bordas bem arredondadas */
    padding: 2rem;             /* Espaçamento interno generoso */
    border: 1px solid #333;    /* Borda sutil */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.bento-card:hover {
    border-color: #555;        /* Borda fica mais clara ao passar o mouse */
    transform: translateY(-2px); /* Flutua levemente */
}

/* Ajuste específico para o botão branco */
.btn-light {
    background-color: #ffffff;
    color: #000000;
    border: none;
    transition: transform 0.2s ease;
}
.btn-light:hover {
    transform: scale(1.05); /* Botão cresce um pouco */
    background-color: #f0f0f0;
}


/* --- Cores dos Ícones de Tecnologias --- */

/* Remove a cor cinza padrão e adiciona transição suave */
.icon-html, .icon-css, .icon-js, .icon-bs {
    color: inherit; /* Começa cinza (herdado do pai) */
    transition: all 0.3s ease;
}

/* HTML5 */
.icon-html:hover, .icon-html.colored {
    color: #E34F26;
    filter: drop-shadow(0 0 5px rgba(227, 79, 38, 0.5));
}

/* CSS3 */
.icon-css:hover, .icon-css.colored {
    color: #1572B6;
    filter: drop-shadow(0 0 5px rgba(21, 114, 182, 0.5));
}

/* JavaScript */
.icon-js:hover, .icon-js.colored {
    color: #F7DF1E;
    filter: drop-shadow(0 0 5px rgba(247, 223, 30, 0.5));
}

/* Bootstrap */
.icon-bs:hover, .icon-bs.colored {
    color: #7952B3;
    filter: drop-shadow(0 0 5px rgba(121, 82, 179, 0.5));
}


/* --- Página de Contato --- */

/* Estilo para Inputs Escuros */
.form-dark {
    background-color: #0a0a0a; /* Mais escuro que o card */
    border: 1px solid #333;
    color: var(--text-primary);
    padding: 15px; /* Mais espaço interno fica mais elegante */
    border-radius: 12px;
}

.form-dark:focus {
    background-color: #0a0a0a;
    color: var(--text-primary);
    border-color: var(--accent-color); /* Borda branca/destaque ao clicar */
    box-shadow: none; /* Remove o brilho azul padrão do Bootstrap */
}

/* Placeholder mais discreto */
.form-dark::placeholder {
    color: #444;
}

/* Animação do pingo verde (Status Disponível) */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
.animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Cores das Redes Sociais (Hover) */
.social-icon { color: inherit; transition: transform 0.2s; display: inline-block; }
.social-icon:hover { transform: translateY(-3px); }

.icon-linkedin:hover { color: #0077b5; filter: drop-shadow(0 0 8px rgba(0,119,181, 0.5)); }
.icon-github:hover { color: #ffffff; filter: drop-shadow(0 0 8px rgba(255,255,255, 0.5)); }
.icon-insta:hover { color: #E1306C; filter: drop-shadow(0 0 8px rgba(225,48,108, 0.5)); }
.icon-whatsapp:hover { color: #25D366; filter: drop-shadow(0 0 8px rgba(37,211,102, 0.5)); }