/* 
   PORTFÓLIO PESSOAL - ARQUIVO CSS
   Desenvolvedor: Vitor Hugo Felipe Da Costa
   Descrição: Estilos customizados para o portfólio pessoal
   
   Este arquivo contém:
   - Configurações de cores e variáveis
   - Estilos para componentes principais
   - Animações customizadas
   - Scrollbar personalizada
*/

/* Importar fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

/* 
   VARIÁVEIS CSS
   Define cores principais usadas no site
*/
:root {
    --cyan: #00f2ff;      /* Cor principal (azul ciano) */
    --dark: #0a0a0c;      /* Cor de fundo escuro */
    --text: #f8fafc;      /* Cor do texto claro */
}

/* 
   ESTILOS GLOBAIS
   Aplicados em todo o documento
*/
body {
    font-family: 'Plus Jakarta Sans', sans-serif;  /* Fonte principal */
    background-color: var(--dark);                 /* Fundo escuro */
    color: var(--text);                            /* Texto claro */
    overflow-x: hidden;                            /* Remove scroll horizontal */
}

/* Títulos utilizam a fonte Syne */
h1, h2, h3, .syne { 
    font-family: 'Syne', sans-serif; 
}

/* 
   BACKGROUND COM GRID
   Cria padrão visual de grid sutil no fundo
*/
.bg-grid {
    background-image: radial-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* 
   TIMELINE STYLING
   Linha vertical para a seção de experiência
*/
.timeline-line {
    width: 2px;
    background: linear-gradient(to bottom, var(--cyan), transparent);
}

/* 
   BENTO CARD
   Cards em estilo "bento" com efeito hover
*/
.bento-card {
    background: rgba(255, 255, 255, 0.02);         /* Fundo semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.05);  /* Borda sutil */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);  /* Transição suave */
}

/* Efeito ao passar o mouse sobre o card */
.bento-card:hover {
    border-color: var(--cyan);              /* Borda fica cyan */
    background: rgba(0, 242, 255, 0.02);    /* Fundo toma cor cyan */
    transform: translateY(-5px);            /* Move para cima */
}

/* 
   SLIDER INFINITO
   Animação de scroll horizontal dos projetos
*/
.slider-track {
    display: flex;
    width: calc(400px * 10);
    animation: scroll 30s linear infinite;  /* Animação contínua */
}

/* Keyframes para animação de scroll */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-400px * 5)); }
}

/* 
   CYAN GLOW
   Efeito de brilho em texto
*/
.cyan-glow {
    text-shadow: 0 0 20px rgba(0, 242, 255, 0.5);  /* Brilho azul ciano */
}

/* 
   CUSTOM SCROLLBAR
   Personalizando a barra de rolagem
*/
::-webkit-scrollbar { 
    width: 8px;  /* Largura da scrollbar */
}

::-webkit-scrollbar-track { 
    background: var(--dark);  /* Fundo da scrollbar */
}

::-webkit-scrollbar-thumb { 
    background: #1e293b;              /* Cor do polegar */
    border-radius: 10px;              /* Cantos arredondados */
}

::-webkit-scrollbar-thumb:hover { 
    background: var(--cyan);          /* Cor ao passar mouse */
}