body {
    margin: 0; /* Remove a margem padrão do navegador (espaço em volta da página) */
    padding: 0; /* Remove o preenchimento interno padrão da página */
    font-family: Arial, Helvetica, sans-serif; /* Define a fonte da página. 
    Se não encontrar Arial, usa Helvetica, e depois qualquer sans-serif */
    color: lightgray; /* Cor padrão do texto no site */
    
}


html{
/* scroll-behavior: smooth;
  Essa propriedade faz com que a rolagem da página ocorra de forma suave e animada
  quando o usuário clica em links que apontam para âncoras internas (por exemplo: href="#contato").
  Sem ela, o scroll acontece de forma instantânea (pulando direto para a seção).
  Com ela, o movimento é fluido, dando uma melhor experiência visual.
*/
    scroll-behavior: smooth;
}

.container {
   
    position: relative; /* Permite que elementos filhos com position absolute sejam posicionados
     em relação a esse contêiner */
    width: 100%; /* Ocupa 100% da largura do elemento pai (neste caso, a tela) */
    height: 100%; /* Ocupa 100% da altura do elemento pai (não garante ocupar a altura da tela, 
    depende do pai) */
    display: flex; /* Ativa o flexbox, que organiza os elementos filhos em linha ou coluna */
    flex-direction: column; /* Organiza os elementos filhos em coluna (um abaixo do outro) */
    align-items: center; /* Centraliza os filhos no eixo horizontal */
    gap: 100px; /* Espaçamento de 100px entre os elementos filhos */
    background-color: #001f7c38;
}

.back-vid {
    position: fixed; 
    right: 0; /* Não move nada para a esquerda, pois o valor é 0 */
    bottom: 0; /* Não move nada para cima, pois o valor é 0 */
    z-index: -1; /* Joga o vídeo para trás dos outros elementos da tela */
    mix-blend-mode: lighten; /* Mistura visual do vídeo com o que está atrás, criando um efeito 
    de sobreposição de cor */

}

header {
    display: flex; /* Organiza os elementos do header em linha */
    position: absolute; /* Retira o header do fluxo normal e permite posicionar manualmente */
    top: 0; /* Cola o header no topo da página */
    right: 0; /* Cola o header à direita */
    left: 0; /* Cola o header à esquerda, ocupando 100% da largura */
    align-items: center; /* Alinha os elementos verticalmente no centro */
    justify-content: space-between; /* Cria espaço entre os elementos do header (esquerda, meio e direita) */
    height: 70px; /* Define a altura fixa do header */
    background-color: rgba(255, 255, 255, 0.123); /* Cor branca com 12.3% de opacidade, deixando o fundo parcialmente visível */
    backdrop-filter: blur(10px); /* Aplica um desfoque no que está atrás do header, criando um efeito de vidro fosco */
    padding: 0 30px; /* 0 de padding no topo/baixo e 30px nas laterais */
    box-shadow: 0 0 15px #77a1de68; /* Sombra com 0 deslocamento lateral, 0 vertical, 15px de desfoque e cor azul clara translúcida */
    z-index: 999; /* Garante que o header fique por cima de quase todos os elementos (exceto z-index maiores) */
}

.left {
    display: flex; /* Organiza o logo e texto em linha */
    align-items: center; /* Centraliza os elementos verticalmente */
}

.left img {
    width: 40px; /* Define a largura da imagem do logo como 40px */
    margin: 0 15px;
}

header ul {
    display: flex; /* Organiza os links em linha */
    justify-content: space-between; /* Espaça os links igualmente */
    width: 43%; /* Ocupa 30% da largura do header */
    padding: 15px 10px; /* Espaçamento interno em cima/baixo e laterais */
    border-radius: 50px; /* Deixa os cantos arredondados, formando uma cápsula */
    background-color: rgba(0, 0, 69, 0.39); /* Fundo azul escuro com 39% de opacidade */
    backdrop-filter: blur(10px); /* Aplica desfoque atrás do menu, mantendo legibilidade com estilo moderno */
    box-shadow: 0 0 10px #727fde65; /* Sombra azul clara ao redor com 10px de desfoque */
}

header ul li{
    list-style: none;
}

header ul li a:hover{
    
    color: black; /* Muda a cor do ícone para preto no hover */
    padding-top: -20px;
    box-shadow: 0 0 20px #727fde65; /* Sombra azul clara ao redor com 10px de desfoque */
    mix-blend-mode: difference; /* Clareia o ícone com base na cor de fundo, dando destaque no hover */
}
header ul a {
    text-decoration: none; /* Remove o sublinhado dos links */
    color: white; /* Cor branca para o texto dos links */
    font-weight: bold; /* Deixa o texto em negrito */
    margin: 0 10px; /* Espaçamento horizontal de 10px entre os links */
}

.box-icons {
    display: flex; /* Organiza os ícones em linha */
    gap: 40px; /* Espaçamento de 40px entre os ícones */
}

.box-icons a {
    display: flex; /* Permite alinhar o conteúdo do ícone */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    font-size: 20px; /* Tamanho da fonte do ícone */
    width: 30px; /* Largura de cada botão/ícone */
    height: 30px; /* Altura de cada botão/ícone */
    border: 2px solid #727fde; /* Borda azul clara com 2px */
    border-radius: 50%; /* Deixa o botão redondo */
    text-decoration: none; /* Remove sublinhado do link */
    color: lightgray; /* Cor do ícone */
    transition: 0.3s; /* Suaviza a animação ao passar o mouse */
}

.box-icons a:hover {
    background-color: #727fde; /* Muda o fundo para azul claro quando passa o mouse */
    color: black; /* Muda a cor do ícone para preto no hover */
    box-shadow: 0 0 15px #727fde96; /* Sombra azul clara ao passar o mouse */
    mix-blend-mode: lighten; /* Clareia o ícone com base na cor de fundo, dando destaque no hover */
}

.blackhoole-box {
    z-index: 1;
    position: absolute; /* Permite posicionar o vídeo onde quiser na tela */
    top: 0; /* Cola no topo */
    width: 100%; /* Ocupa toda a largura disponível */
    justify-content: center; /* (não tem efeito aqui pois falta display:flex, mas provavelmente a intenção era centralizar o conteúdo) */
    mix-blend-mode: lighten;
}

.blackhoole-box video {
    width: 100%; /* O vídeo ocupa toda a largura da tela */
    margin-top: -23.5%; /* Move o vídeo pra cima (valor negativo) para ajustar o enquadramento */
}





/* Seletor para a seção hero, a principal da página */
.hero {
    position: relative; /* 'position' define o tipo de posicionamento do elemento. 
    'relative' significa que o elemento vai se posicionar com base na sua posição original,
     podendo ser movido a partir dela usando propriedades como 'top', 'left', etc. */
    display: flex; /* 'display' define como os elementos dentro do seu contêiner serão organizados.
     'flex' faz com que os itens dentro de '.hero' se alinhem de maneira flexível (em linha ou coluna) */
    width: 100%; /* 'width' define a largura do elemento. 100% significa que ele vai ocupar toda a 
    largura da tela ou do contêiner em que está. */
    height: 100vh; /* 'height' define a altura do elemento. '100vh' significa que a altura será 
    igual a 100% da altura da viewport (área visível da tela do usuário) */
    align-items: center; /* 'align-items' alinha os itens filhos no eixo vertical 
    (de cima para baixo) no centro do contêiner */
    justify-content: space-between; /* 'justify-content' alinha os itens no eixo horizontal 
    (de esquerda para direita). 'space-between' distribui os itens com o máximo de espaço possível entre eles */
}

/* Seletor para a div hero-inf, que contém o conteúdo principal da seção hero */
.hero-inf {
    position: absolute;
    left: 5%; /* 'left' move o elemento para a direita, deslocando-o 5% da largura do seu 
    contêiner pai (no caso, a '.hero') */
    z-index: 1;
   
}

/* Seletor para o título dentro de hero-inf */
.hero-inf .hero-inf-title {
    color: #727fde; /* 'color' define a cor do texto do título */
    padding: 8px 5px; /* 'padding' cria um espaçamento dentro do elemento. 
    O primeiro valor (8px) é para o topo e o fundo, e o segundo (5px) é para as laterais */
    border: 1px solid #727fde77; /* 'border' define uma borda ao redor do elemento. 
    Aqui, é uma borda de 1px com cor e transparência específicas */
    width: 240px; /* 'width' define a largura do título para 240px */
    background-color: #2200493d; /* 'background-color' define a cor de fundo do elemento */
    box-shadow: 0 0 5px #727fde88; /* 'box-shadow' adiciona uma sombra ao redor do elemento. A sombra tem um deslocamento de 0px para cima/baixo e 0px para a direita/esquerda, com um borrão de 5px */
    border-radius: 50px; /* 'border-radius' arredonda as bordas do elemento. Aqui, torna as
     bordas bem arredondadas, com um valor alto de 50px */
}

/* Seletor para o título principal (h1) dentro de hero-inf */
.hero-inf h1 {
    font-size: 60px; /* 'font-size' define o tamanho da fonte. Aqui está bem grande, 60px */
    max-width: 600px; /* 'max-width' limita a largura máxima do elemento a 600px */
    font-weight: 700;
    line-height: 70px; /* 'line-height' define a altura da linha, ou seja, o espaçamento 
    entre as linhas do texto. Aqui está configurado para 70px */
    margin-top: 40px; /* 'margin-top' adiciona um espaçamento de 40px no topo do título */
    margin-bottom: 30px; /* 'margin-bottom' adiciona um espaçamento de 30px abaixo do título */
}

/* Seletor para o parágrafo (p) dentro de hero-inf */
.hero-inf p {
    max-width: 550px; /* 'max-width' limita a largura máxima do parágrafo a 550px */
    line-height: 25px; /* 'line-height' define o espaçamento entre as linhas do parágrafo.
    Está configurado para 25px */
    margin-bottom: 40px; /* 'margin-bottom' cria um espaço de 40px abaixo do parágrafo */
    font-size: 20px; /* 'font-size' define o tamanho da fonte do parágrafo para 20px */
}

/* Seletor para o botão dentro de hero-inf */
.hero-inf button {
    color: white; /* 'color' define a cor do texto do botão como branca */
    padding: 15px 25px; /* 'padding' adiciona um espaço interno ao botão. O 
    primeiro valor (15px) é para o topo e o fundo, o segundo (35px) é para as laterais */
    border-radius: 10px; /* 'border-radius' arredonda as bordas do botão */
    border: 1px solid #727fdea8; /* 'border' define uma borda ao redor do botão com 
    or e transparência específicas */
    background-color: #2200493d; /* 'background-color' define a cor de fundo do botão com transparência */
    box-shadow: 0 0 5px #727fde86; /* 'box-shadow' aplica uma sombra ao redor do botão */
    cursor: pointer; /* 'cursor' muda o estilo do cursor para indicar que o botão é clicável */
    transition: 0.3s; /* 'transition' cria uma animação suave ao passar o mouse sobre o botão, levando 0.3 segundos */
}


.hero-inf button a{
    color: white; /* 'color' define a cor do texto do botão como branca */
    padding: 0px 5px; /* 'padding' adiciona um espaço interno ao botão. O 
    primeiro valor (15px) é para o topo e o fundo, o segundo (35px) é para as laterais */
    text-decoration: none;
    font-size: 16px;
    
}

/* Efeito de hover para o botão (quando o usuário passa o mouse sobre ele) */
.hero-inf button:hover {
    box-shadow: 0 0 15px #727fde86; /* Ao passar o mouse, a sombra do botão 
    aumenta, criando um efeito de destaque */
}



/* Classe para aplicar um efeito de texto com degradê animado */
.gradient {
    background: linear-gradient(to right, #008baa, #7e42a7, #6600c5, #6060fd, 
    #2a46ff, #0099ff, #008ead); /* Cria um degradê colorido da esquerda para a direita */
    background-size: 200%; /* Faz o fundo ser 2x maior que o texto, permitindo a animação de movimento */
    background-clip: text; /* Aplica o fundo (degradê) apenas na área do texto */
    -webkit-background-clip: text; /* Compatibilidade com navegadores baseados em WebKit (Chrome, Safari, etc.) */
    -webkit-text-fill-color: transparent; /* Torna o texto "vazio", deixando visível apenas o fundo em forma de letras */
    animation: animate-gradient 2.5s linear infinite; /* Anima o degradê, movendo ele constantemente da esquerda para a direita */
}

/* Animação que move o degradê */
@keyframes animate-gradient {
    to {
        background-position: 200%; /* Define que, ao final da animação, o 
        fundo terá se movido até a posição 200% */
    }
}

.gradient-skills {
  background: linear-gradient(to right,#1835f1c7, #2641eec7, #2665eec0, #7fa4f4c0,  #9ab6f2c0, 
    #2a46ffc7 ); /* Cria um degradê colorido da esquerda para a direita */
    background-size: 200%; /* Faz o fundo ser 2x maior que o texto, permitindo a animação de movimento */
    background-clip: text; /* Aplica o fundo (degradê) apenas na área do texto */
    -webkit-background-clip: text; /* Compatibilidade com navegadores baseados em WebKit (Chrome, Safari, etc.) */
    -webkit-text-fill-color: transparent; /* Torna o texto "vazio", deixando visível apenas o fundo em forma de letras */
    animation: animate-gradient 2.5s linear infinite;
}
@keyframes animate-gradient {
    to {
        background-position: 200%; /* Define que, ao final da animação, o 
        fundo terá se movido até a posição 200% */
    }
}


/* 
  Seleciona a div com a classe 'hero-vid-box'. O seletor está atingindo qualquer
  elemento com a classe 'hero-vid-box' dentro do seu HTML. Isso vai afetar a caixa
  onde o vídeo de fundo (com a classe 'back-vid') está inserido.
  Caminho: .hero-vid-box
*/
.hero .hero-vid-box {
   position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
}


/* 
  Seleciona o vídeo dentro da div 'hero-vid-box'. Ou seja, o código afeta especificamente
  o vídeo (tag <video>) que está dentro de um contêiner com a classe 'hero-vid-box'.
  Caminho: .hero-vid-box video
*/
.hero .hero-vid-box video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Faz o vídeo preencher a área sem distorcer */
  mix-blend-mode: overlay;
  
}


/* 
  Seleciona a div com a classe 'scroll--down', que é o botão (ou indicador de rolagem)
  que aparece na tela. Isso será a caixinha arredondada na parte inferior da tela.
  Caminho: .scroll--down
*/
.scroll--down {
    height: 50px; /* Define a altura da caixinha */
    width: 30px; /* Define a largura da caixinha */
    border: 2px solid lightgray; /* Borda fina e de cor cinza claro */
    position: absolute; /* 
        'position: absolute' posiciona este elemento (a caixinha) de maneira independente
        dentro do seu contêiner pai mais próximo. O contêiner pai é o elemento com 
        'position: relative' (se não houver, será em relação ao body da página).
        Aqui, ele é posicionado a 49% da largura (left: 49%) e 8% da altura da tela (bottom: 8%).
    */
    left: 49%; /* Centraliza horizontalmente, deixando 51% do espaço vazio à direita */
    bottom: 8%; /* Coloca o botão a 8% da parte inferior da tela */
    border-radius: 50px; /* Torna as bordas arredondadas, criando uma forma circular */
    cursor: pointer; /* Altera o cursor para a mãozinha quando o mouse passar por cima */
    box-shadow: 0 0 15px rgba(211, 211, 211, 0.63); /* Aplica uma sombra suave em volta da caixinha */
}


/* 
  Aqui, estamos usando dois pseudo-elementos: ::before e ::after. Eles são usados
  para adicionar "elementos" virtuais à div, que aparecem visualmente, mas não estão
  presentes no código HTML. Esses pseudo-elementos criam as setinhas do indicador de rolagem.
  Caminho: .scroll--down::before, .scroll--down::after
*/
.scroll--down::before,
.scroll--down::after {
    content: ""; /* Necessário para que os pseudo-elementos existam */
    position: absolute; /* 
        'position: absolute' garante que os pseudo-elementos sejam posicionados
        dentro da div .scroll--down, que é o contêiner pai com 'position: relative'.
        Isso permite controlar com precisão onde as setinhas vão aparecer dentro da caixinha.
    */
    top: 20%; /* A partir de 20% da altura da caixinha */
    left: 49%; /* Centraliza os elementos dentro da caixinha */
    height: 10px; /* Define o tamanho das setinhas */
    width: 10px; /* Define o tamanho das setinhas */
    border: 2px solid lightgray; /* Borda das setinhas */
    transform: translate(-50%, -100%) rotate(45deg); /* Transforma o quadrado em uma seta */
    border-top: transparent; /* Torna a borda superior invisível */
    border-left: transparent; /* Torna a borda esquerda invisível */
    animation: scroll--down 2s ease-in-out infinite; /* Aplica a animação à seta */
}


/* 
  O 'before' é um pseudo-elemento específico que tem um delay na animação,
  criando um efeito de alternância entre as setas. O caminho é o mesmo que o anterior,
  mas com um delay de animação.
  Caminho: .scroll--down::before
*/
.scroll--down::before {
    top: 30%; /* Começa um pouco abaixo da posição do 'after' */
    animation-delay: 0.5s; /* Delay de 0.5s para começar a animação depois do 'after' */
}


/* 
  Esta parte define a animação que faz a seta se mover para baixo e desaparecer.
  O 'scroll--down' é o nome da animação. O movimento vai afetar o 'top' (posição vertical)
  e a opacidade das setas, fazendo-as desaparecer e aparecer. 
  Caminho: @keyframes scroll--down
*/
@keyframes scroll--down {
    0% {
        opacity: 0; /* A seta começa invisível */
    }

    30%, 60% {
        opacity: 1; /* A seta fica visível durante a animação */
    }

    100% {
        top: 90%; /* A seta vai para baixo até 90% da altura da caixinha */
        opacity: 0; /* Depois, some novamente, retornando à opacidade zero */
    }
}









/* Seção principal com informações */
.inf-section {
    position: relative;
    display: flex; /* Organiza os elementos filhos em linha ou coluna */
    flex-direction: column; /* Organiza em coluna */
    align-items: center; /* Centraliza os itens no eixo horizontal */
    width: 80%; /* Largura ocupando 80% do container pai */
    margin-top: 100px; /* Espaçamento acima da seção */
}

/* Título da seção */
.section-title {
    font-size: 40px; /* Tamanho da fonte */
    font-weight: 700; /* Peso da fonte (negrito) */
   
}

/* Container das cartas */
.inf-cards {
    display: grid; /* Usa layout em grade */
    grid-template-columns: auto auto auto; /* Três colunas automáticas */
    gap: 20px; /* Espaço entre os cards */
    width: 100%; /* Ocupa toda a largura do pai */
    height: 100%; /* Altura total do pai */
    margin-top: 30px; /* Espaço acima dos cards */
}

/* Estilo padrão dos cards */
.card {
    display: flex; /* Layout interno flexível */
    align-items: flex-start; /* Alinha conteúdo no topo do card */
    justify-content: center; /* Centraliza horizontalmente */
    position: relative; /* Necessário para posicionar elementos com position: absolute */
    width: auto; /* Largura automática baseada no conteúdo/pai */
    height: 40vh; /* Altura de 40% da altura da tela */
    overflow: hidden; /* Esconde conteúdos que ultrapassem os limites */
    border: 1px solid gray; /* Borda cinza ao redor */
    background-color: #080020b7; /* Cor de fundo com transparência */
    border-radius: 20px; /* Cantos arredondados */
    transition: 0.3s; /* Transição suave em interações */
    padding-bottom: 90px;
}

/* Efeito ao passar o mouse sobre o card */
.card:hover {
    box-shadow: 0 0 15px rgba(211, 211, 211, 0.589); /* Sombra externa clara */
}

/* Estilo da imagem dentro do card */
.card img {
    width: 80%; /* Largura ocupando 80% do card */
    height: 50%; /* Altura de 50% do card */
    object-fit: cover; /* Mantém proporção e preenche a área */
}

/* Título (h1) dentro do card */
.card h1 {
    position: absolute; /* Posicionamento relativo ao .card */
    margin: 0; /* Remove margens padrão */
    bottom: 40%; /* Posiciona o título 40% acima da base do card */
    left: 5%; /* Distância da esquerda */
    font-size: 25px; /* Tamanho da fonte */
    z-index: 1; /* Garante que fique acima da imagem/vídeo */
    color: lightgray; /* Cor do texto */
}

/* Parágrafo dentro do card */
.card p {
    position: absolute; /* Posicionamento relativo ao .card */
    bottom: 3%; /* Posicionado bem próximo da base */
    left: 5%; /* Distância da esquerda */
    z-index: 1; /* Garante que fique visível sobre a imagem/vídeo */
    max-width: 300px; /* Limita largura do texto */
    color: gray; /* Cor do texto */
    font-size: 16px; /* Tamanho da fonte */
    line-height: 20px; /* Espaçamento entre linhas */
    font-weight: bold;
}

/* Vídeo dentro do card */
.card video {
    margin-top: 10%; /* Espaçamento superior */
    width: 70%; /* Largura de 70% do card */
    height: 50%; /* Altura de 50% do card */
    object-fit: cover; /* Corta para preencher sem distorcer */
    mix-blend-mode: lighten; /* Mistura com o fundo para efeito visual */
}

/* Botão dentro do card */
.card button {
   
    color: white; /* Cor do texto */
    padding: 5px 15px; /* Espaçamento interno do botão */
    border-radius: 10px; /* Bordas arredondadas */
    border: 1px solid #727fdea8; /* Borda com leve transparência */
    background-color: #2200493d; /* Fundo com transparência */
    box-shadow: 0 0 5px #727fde86; /* Sombra ao redor */
    cursor: pointer; /* Cursor de clique */
    transition: 0.3s; /* Transição suave ao interagir */
    position: absolute; /* Posiciona dentro do .card */
    bottom: 5%; /* Distância da base do card */
    left: 5%; /* Distância da esquerda */
} 
.card button a {
   text-decoration: none;
    color: white; /* Cor do texto */
    padding: 8px 8px; /* Espaçamento interno do botão */
} 


/* Efeito ao passar o mouse no botão */
.card button:hover {
    box-shadow: 0 0 15px #727fde86; /* Sombra maior */
    opacity: 0.7; /* Transparência leve no hover */
}

/* 
   O seletor :nth-child(n) seleciona o N-ÉSIMO FILHO de um elemento pai.
   ATENÇÃO: Ele conta todos os filhos, mesmo que não tenham a classe .card!

   Aqui, a gente está dizendo:
   "Quando o TERCEIRO filho dentro do container for um .card, aplica esse estilo"
*/

.card:nth-child(1) img {
   position: absolute;
   top: 1%;
 
   max-width: 70%;
   object-fit: cover;
   height: 100%;

  
}
.card:nth-child(3) {
    grid-row: span 2; /* Este card ocupa 2 linhas no grid */
    height: 83vh; /* Altura maior para se destacar */
}

/* Parágrafo dentro do 3º card */
.card:nth-child(3) p {
    bottom: 10%; /* Sobe o parágrafo um pouco */
    max-width: 90%;
}

/* Título dentro do 3º card */
.card:nth-child(3) h1 {
    bottom: 31%; /* Sobe o título mais ainda */
}

/* 
   Aqui, o 4º filho do container é um .card
   Estamos dizendo:
   "Quando o QUARTO filho do container for um .card, aplica esse estilo"
*/
.card:nth-child(4) {
    grid-column: span 2; /* Este card ocupa 2 colunas */
    
}

/* Parágrafo dentro do 4º card */
.card:nth-child(4) p {
    max-width: 650px; /* Permite que o texto ocupe mais espaço */
}

/* Título dentro do 4º card */
.card:nth-child(4) h1 {
    bottom: 35%; /* Posiciona o título mais acima */
}







/* meus projetos */


/* Seção principal dos projetos */
.meus-projetos {
    display: flex; /* Transforma a seção em um container flexível */
    flex-direction: column; /* Os elementos filhos ficarão em coluna (um embaixo do outro) */
    gap: 10%; /* Espaço vertical entre os cards */
    align-items: center; /* Centraliza os filhos horizontalmente */
    position: relative; /* Permite posicionar elementos filhos de forma absoluta dentro dela */
    width: 80%; /* Largura ocupando 80% da tela */
    height: 100vh; /* Altura igual à altura total da tela */
    margin-top: 200px; /* Espaço acima da seção */
    margin-bottom: 700px; /* Espaço abaixo da seção */
    padding-top: 150px;  /* Espaço interno no topo pra afastar a secão */
}
.section-title{
    margin-bottom: 210px;
}

/* Cada card de projeto (um vídeo + descrição) */
.projeto-card {
    display: flex; /* Coloca o vídeo e a descrição lado a lado (em linha) */
    width: 100%; /* Ocupar toda a largura do container pai */
    height: 40%; /* Altura proporcional à altura da seção */
    align-items: center; /* Alinha verticalmente o vídeo e a descrição */
    gap: 10%; /* Espaço entre o vídeo e a descrição */
    justify-content: center; /* Centraliza tudo horizontalmente */
    margin-bottom: 100px;
    /* 
  Adiciona espaçamento vertical entre os cards de projeto.
  Isso evita que o botão do projeto atual fique colado no vídeo do próximo.
  Ideal usar em telas menores ou layouts com coluna única.
*/
z-index: 999;
}

/* Caixa que contém o vídeo */
.projeto-vidbox {
    display: flex; /* Para centralizar o vídeo dentro da caixa */
    align-items: center; /* Alinha o vídeo verticalmente */
    justify-content: center; /* Alinha o vídeo horizontalmente */
    width: 50%; /* Metade da largura do card */
    position: relative; /* Necessária caso algum conteúdo dentro precise de posição absoluta */
    cursor: pointer; /* Mostra uma mãozinha ao passar o mouse */
    min-width: 400px; /* Garante que nunca fique menor que 400px */
    transition: 0.5s; /* Animações suaves ao interagir */
    mix-blend-mode: exclusion; /* Mistura o vídeo com o fundo de forma estilizada */
}

/* Estilo do vídeo em si */
.projeto-vidbox video {
    object-fit: cover; /* Faz o vídeo preencher totalmente a caixa, cortando excessos mas sem distorcer */
    width: 100%; /* O vídeo ocupa toda a largura da .projeto-vidbox */
    box-shadow: 0 0 10px lightgray; /* Sombra ao redor do vídeo */
    border-radius: 20px; /* Bordas arredondadas */
    transition: 0.5s; /* Animação suave para hover */
}

.projeto-vidbox video:hover {
    box-shadow: 0 0 20px lightgray; /* Aumenta a sombra ao passar o mouse */
}

/* Caixa com o texto e botão do projeto */
.projeto-inf {
    display: flex; /* Coloca os elementos internos em coluna */
    flex-direction: column; /* Um embaixo do outro */
    align-items: start; /* Alinha tudo à esquerda */
    justify-content: center; /* Centraliza verticalmente no card */
    width: 50%; /* Ocupa metade do card */
    padding-left: 10%; /* Espaço à esquerda do conteúdo */
}

/* Título do projeto */
.projeto-inf h1 {
    width: 90%; /* Ocupa 90% da largura da caixa */
    font-size: 25px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    text-wrap: nowrap; /* Não quebra o texto em várias linhas */
    margin-bottom: 10px; /* Espaço abaixo do título */
    margin-top: 0; /* Remove espaço acima */
    max-width: 450px; /* Limita a largura máxima */
}

/* Parágrafo de descrição do projeto */
.projeto-inf p {
    width: 90%; /* Largura padrão */
    width: 400px; /* Largura máxima */
    min-width: 300px; /* Largura mínima */
    margin-top: 0; /* Remove espaço acima */
    margin-bottom: 50px; /* Espaço abaixo do texto */
}

/* Botão que leva para o site do projeto */
.projeto-inf button {
    color: white; /* Cor do texto */
    padding: 5px 15px; /* Espaçamento interno do botão */
    border-radius: 10px; /* Bordas arredondadas */
    border: 1px solid #727fdea8; /* Borda com leve transparência */
    background-color: #2200493d; /* Fundo com transparência */
    box-shadow: 0 0 5px #727fde86; /* Sombra ao redor */
    cursor: pointer; /* Cursor de clique */
    transition: 0.3s; /* Transição suave ao interagir */
}
.projeto-inf button a{
  color: white;
  text-decoration: none;
}

.projeto-inf button:hover {
    box-shadow: 0 0 15px #727fde86; /* Sombra maior ao passar o mouse */
    opacity: 0.7; /* Transparência leve no hover */
}



/* Container do aviso flutuante com ícone apontando para cima */
.hover-sign {
    position: absolute; /* Fica posicionado em relação ao ancestral com position relativa */
    display: flex; /* Flexbox para alinhar o conteúdo centralizado */
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    width: 30%; /* Largura de 30% do elemento pai */
    height: 100px; /* Altura fixa de 100px */
}

/* Pseudo-elementos ::before e ::after criam dois emojis iguais no mesmo lugar */
.hover-sign::before, .hover-sign::after {
    content: "👆"; /* Adiciona o emoji apontando pra cima */
    text-align: center; /* Centraliza o texto (por segurança, embora o emoji não precise muito) */
    position: absolute; /* Permite animar e posicionar sobreposto dentro do .hover-sign */
    font-size: 50px; /* Tamanho grande pro emoji ficar visível */
    top: 20%; /* Posiciona 20% de distância do topo do .hover-sign */
    left: 40%; /* Posiciona 40% da esquerda do .hover-sign */
    border-radius: 50%; /* Bordas totalmente arredondadas (apesar de não ter fundo, mantém o formato caso adicione depois) */
    animation: hoverAnimation 3s ease-in-out infinite; /* Aplica a animação de 3 segundos, de forma suave e repetida infinitamente */
}

/* Animação chamada "hoverAnimation" */
@keyframes hoverAnimation {
    0% {
        box-shadow: 0 0 5px lightgray; /* Começa com uma sombra suave ao redor do emoji */
        transform: translate(100%, 50%) rotate(30deg); 
        /* Move o emoji 100% para a direita e 50% para baixo do seu próprio tamanho
           e gira ele 30 graus (parecendo que está fazendo um movimento circular de apontar) */
    }

    100% {
        box-shadow: 0 0 15px lightgray; /* Aumenta a sombra (efeito visual de destaque) */
        transform: translateX(80%, 50%) rotate(0deg); 
        /* Move um pouco menos para a direita (80%), mantém 50% pra baixo, e "desgira" até a posição original */
    }
}

/* Quando o elemento recebe a classe "active", ele some */
.hover-sign.active {
    display: none; /* Oculta completamente o .hover-sign quando está ativo */
}











/* Minhas Skills */

/* Seção principal que organiza o bloco de skills */
.skills-section {
    padding-top: 140px;  /* espaçamento interno no topo pra afastar as seçoes */
    display: flex; /* Deixa o conteúdo em linha por padrão */
    flex-direction: column; /* Mas aqui vira coluna */
    align-items: center; /* Centraliza os itens no eixo cruzado (horizontal nesse caso) */
    position: relative; /* Serve para elementos posicionados de forma absoluta dentro dela */
}

/* Caixa que contém a imagem e os textos "designer" e "coder" */
.skills-box {
    width: 100%; /* Ocupa toda a largura */
    height: 90vh; /* Altura de 90% da altura da tela */
    position: relative;
    display: flex;
    align-items: start;
    justify-content: center;
}

/* Imagem de fundo com blend e opacidade */
.skills-image {
    width: 70%;
    mix-blend-mode: lighten; /* Deixa a imagem mais "clara" se tiver elementos por cima */
    opacity: 0.7; /* Transparência */
}

/* Texto "designer" posicionado à esquerda */
.designer {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-content: start;
    top: 20%;
    left: 5%;
    max-width: 300px;
}


/* Texto "coder" posicionado à direita */
.coder {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-content: start;
    top: 20%;
    right: 5%;
    max-width: 300px;
}

.skills-box h1 {
    font-size: 50px;
    display: flex;
    align-items: center;
}

.skills-box p {
    line-height: 23px;
}

/* =========================
   SLIDER COM ANIMAÇÃO
   ========================= */
.slider {
    position: absolute;
    bottom: -15%;
    right: 20%;
    width: 60%;
    height: var(--height); /* Altura baseada em uma variável CSS */

    overflow: hidden; /* Esconde o que passa da área do slider */

    /* === mask-image ===
       Cria um efeito de transparência nas bordas.
       É como se colocasse uma máscara por cima da div.
       linear-gradient(to right, transparente, #000 10%, #000 90%, transparente)
       - "to right": a direção do gradiente vai da esquerda para a direita
       - "transparente": começa invisível
       - "#000 10%": a partir de 10% entra o preto total (visível)
       - "#000 90%": até 90% continua visível
       - "transparente" no final: esconde de novo
    */
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);

    mix-blend-mode: difference;
    opacity: 0.8;
}

.slider .list {
    display: flex;
    width: 100%;

    /* === calc() ===
       Usado para fazer cálculos matemáticos com valores CSS.
       Aqui: min-width será a largura de um item * a quantidade de itens (definidas via variáveis CSS)
    */
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}

.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute; /* Todas as imagens vão ficar uma em cima da outra inicialmente */

    left: 100%; 
    /* Isso aqui significa que o item começa "fora da tela" pela direita, 100% da largura total */

    /* === animation ===
       autoRun → é o nome da animação definida com @keyframes
       10s → duração da animação (cada imagem demora 10s pra atravessar a tela)
       linear → sem aceleração, mantém velocidade constante
       infinite → a animação nunca para, repete para sempre
    */
    animation: autoRun 10s linear infinite;

    /* === transition ===
       Transição suave para o filtro (efeito visual)
       0.5s → quando passar o mouse, o efeito vai acontecer suavemente em meio segundo
    */
    transition: filter 0.5s;

    /* === animation-delay ===
       Isso aqui serve para dar um atraso diferente pra cada imagem.
       Assim, elas não andam todas juntas.
       calc((10s / quantidade de itens) * (posição atual - 1))
       - Ex: se temos 5 imagens, o delay será:
         imagem 1: 0s
         imagem 2: 2s
         imagem 3: 4s...
       Isso distribui a animação igualmente entre as imagens.
    */
    animation-delay: calc((10s / var(--quantity)) * (var(--position) - 1));
}

.slider .list .item img {
    width: 100%;
}


/* === KEYFRAMES ===
   Define a animação chamada "autoRun"
   from → ponto de partida
   to → ponto final
   Aqui, a imagem vai sair da direita (left: 100%) e ir até a esquerda (left: -100% do tamanho dela)
*/
@keyframes autoRun {
    from {
        left: 100%; /* Começa totalmente fora da tela pela direita */
    }
    to {
        left: calc(var(--width) * -1); 
        /* Termina totalmente fora da tela pela esquerda */
    }
}

/* === Quando passar o mouse em cima do slider === */
.slider:hover .item {
    animation-play-state: paused !important;
    /* Pausa a animação. 
       !important → força a regra a ser aplicada mesmo que outra esteja competindo.
    */

    filter: grayscale(1); 
    /* Aplica o filtro que deixa a imagem em preto e branco */
}

/* === Quando passar o mouse sobre uma imagem específica === */
.slider .item:hover {
    filter: grayscale(0);
    /* Remove o preto e branco, volta à imagem colorida */
}





/* Contact Section */


/* ============================
   SEÇÃO DE CONTATO
============================ */

.contact-section {
    padding-top: 280px;  /* espaçamento interno no topo pra do h1 */
    width: 80%; /* Ocupa 80% da largura da página */
    height: 100vh; /* Altura total da tela (viewport height) */
    display: flex; /* Usando flexbox para organizar os dois blocos lado a lado */
    justify-content: center; /* Centraliza os blocos horizontalmente */
    gap: 10%; /* Espaço entre os dois blocos */
    align-items: center; /* Alinha os blocos verticalmente ao centro */
    position: relative; /* Permite posicionar o título com position: absolute */
}

.contact-section h1 {
    padding-top: 200px;  /* espaçamento interno no topo pra afastar as seçoes */
    position: absolute; /* Remove o título do fluxo normal e permite posicionar livremente */
    top: 0%; /* Posicionado no topo da seção */
    left: 40%; /* Empurra o título 40% da esquerda — fica mais ou menos centralizado */
}

/* Bloco com os links de contato (telefone, LinkedIn, etc.) */
.social-box {
    display: flex;  
    flex-direction: column; /* Exibe os links em coluna */
    gap: 25px; /* Espaço entre os links */
}

/* Estilo dos links de contato */
.social-box a {
    color: lightgray; /* Cor do texto dos links */
    text-decoration: none; /* Remove o sublinhado padrão */
    font-size: 20px; /* Tamanho da fonte */
    text-wrap: nowrap; /* Impede que o texto quebre para a linha de baixo */
}

/* Estilo dos ícones dentro dos links */
.social-box i {
    color: #727fde; /* Cor dos ícones */
    font-size: 30px; /* Tamanho dos ícones */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
}

/* Estilo específico quando o ícone está dentro de um <a> */
.social-box a i {
    color: white; /* Aqui sobrescreve a cor anterior, deixando o ícone branco */
    margin-top: 40px; /* Espaço acima do ícone (pode ser para alinhar melhor em telas maiores) */
}

/* Texto do formulário (parágrafos com instruções) */
.contact-box p {
    max-width: 400px; /* Limita a largura dos parágrafos */
    margin-top: 30px; /* Espaço acima de cada parágrafo */
    margin-bottom: 5px; /* Espaço abaixo de cada parágrafo */
    font-weight: bold;
    font-size: 19px;
    line-height: 23px;
}

/* Campos de entrada do formulário */
.contact-box input {
    padding: 7.5px 30px; /* Espaço interno (topo/baixo 7.5px, esquerda/direita 30px) */
    background-color: lightgray; /* Fundo cinza claro */
    width: 80%; /* Largura de 80% do container */
    height: 25px; /* Altura fixa */
    border: none; /* Remove a borda padrão */
    outline: none; /* Remove o contorno ao focar */
    border-top-right-radius: 10px; /* Arredondamento no canto superior direito */
    border-bottom-right-radius: 10px; /* Arredondamento no canto inferior direito */
} 
.contact-box input .input-message{
    height: 250px; /* Altura fixa */
    
}

/* Botão de envio */
.contact-box button {
    margin-top: 30px; /* Espaço acima do botão */
    color: white; /* Cor do texto */
    padding: 10px 15px; /* Espaço interno */
    border-radius: 10px; /* Arredondamento geral do botão */
    border: 1px solid #727fdeb4; /* Borda com leve transparência azulada */
    background-color: #2200493d; /* Fundo com transparência roxa */
    box-shadow: 0 0 5px #727fde86; /* Efeito de brilho ao redor do botão */
    cursor: pointer; /* Muda o cursor para uma mãozinha ao passar por cima */
    transition: 0.3s; /* Suaviza qualquer transição (como hover) */
}

/* Estilo do botão quando o mouse está em cima */
.contact-box button:hover {
    box-shadow: 0 0 15px #727fde86; /* Aumenta o brilho */
    opacity: 0.7; /* Deixa o botão um pouco mais transparente */
}

/* ============================
   RODAPÉ
============================ */

footer {
    display: flex; /* Flexbox para alinhar o conteúdo */
    position: absolute; /* Fixa o rodapé na parte inferior da tela */
    bottom: 0;
    right: 0;
    left: 0;
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    height: 70px; /* Altura do rodapé */
    background-color: rgba(36, 34, 85, 0.192); /* Fundo branco com transparência */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo (glassmorphism) */
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.515); /* Sombra suave ao redor */
    z-index: 999; /* Garante que fique por cima de outros elementos */
}

/* Estilo do texto no rodapé */
footer h1 {
    font-size: 26px; /* Tamanho grande para dar destaque */
    text-shadow: 0px 0px 10px  rgba(255, 255, 255, 0.275);
}







/* ==============================================
   MENU HAMBÚRGUER
   ============================================== */


/* Ícone do menu (hambúrguer) */
.menu-icon {
    font-size: 36px;         /* Define o tamanho do ícone para que seja grande o suficiente para ser facilmente clicável */
    cursor: pointer;         /* Modifica o cursor para indicar que o elemento é interativo (clicável) */
    display: none;           /* Inicialmente oculto, pois geralmente só aparece em telas menores via media queries */
}

/* Sidebar fixa posicionada no canto direito da tela */
.sidebar {
    position: fixed;          /* Fixa o elemento na tela independente da rolagem */
    right: 0;                 /* Alinha a sidebar completamente à direita da viewport */
    top: 0;                   /* Alinha a sidebar ao topo da viewport */
    bottom: 70%;              /* Limita a altura da sidebar para cobrir só 30% inferior da tela (cria efeito "bolha") */
    width: 0%;                /* Largura zero para começar invisível, permitindo animação de expansão */
    
    background-color: #000000b8;     /* Fundo preto com opacidade (transparência) para permitir visibilidade parcial do conteúdo atrás */
    backdrop-filter: blur(10px);     /* Aplica um efeito de desfoque no fundo por trás da sidebar para destacar o menu e melhorar legibilidade */
    z-index: 999;                    /* Garante que a sidebar fique acima da maioria dos outros elementos da página */
    box-shadow: 0 0 20px rgb(211, 211, 211, 0.411); /* Adiciona sombra ao redor da sidebar para criar um leve destaque e sensação de profundidade */
    border-bottom-left-radius: 100%; /* Forma arredondada extrema no canto inferior esquerdo, reforçando o formato de bolha quando fechada */
    opacity: 0;                      /* Torna o elemento completamente transparente inicialmente, para desaparecer visualmente */
}

/* Ícone de fechar na sidebar */
.close-icon {
    font-size: 50px;       /* Ícone grande para facilitar o toque/visualização */
    color: lightgray;      /* Cor clara para visibilidade no fundo escuro */
    padding-left: 10px;    /* Espaço interno à esquerda para separar do limite da sidebar */
    cursor: pointer;       /* Indica interatividade ao usuário */
}

/* Lista dentro da sidebar */
.sidebar ul {
    padding-left: 25px;    /* Espaçamento interno à esquerda para afastar os itens da borda da sidebar */
}

/* Itens da lista de navegação */
.sidebar ul li {
    list-style: none;      /* Remove o marcador padrão da lista (bolinhas, números) para um visual limpo */
    margin-bottom: 30px;   /* Espaçamento vertical entre cada item da lista para melhorar leitura e toque */
}

/* Links dentro dos itens da lista */
.sidebar ul li a {
    text-decoration: none;                           /* Remove sublinhado padrão dos links */
    color: lightgrey;                                /* Cor clara para contraste em fundo escuro */
    font-size: 30px;                                 /* Tamanho grande para fácil leitura e toque */
    font-weight: 700;                                /* Negrito para destacar os links */
    text-shadow: 0 0 15px rgb(128, 128, 128, 0.256); /* Aplica uma sombra leve para aumentar a legibilidade e dar profundidade */
}

/* Container dos ícones sociais dentro da sidebar */
.sidebar .social-icons {
    padding-left: 25px;   /* Mesmo espaçamento lateral dos links para alinhamento visual */
    margin-top: 60px;     /* Espaço extra acima para separar dos links principais */
    text-wrap: nowrap;    /* Garante que os ícones não quebrem em múltiplas linhas, mantendo em uma única linha */
}

/* Ícones sociais em si */
.sidebar .social-icons a {
    font-size: 35px;      /* Ícones maiores para fácil reconhecimento */
    padding: 5px 5px;     /* Espaçamento interno para área de clique maior */
    cursor: pointer;      /* Indica que o ícone é interativo */
    color: lightgray;     /* Cor clara, combinando com o tema geral da sidebar */
}

/* --- Animação para abrir a sidebar --- */
.sidebar.open-sidebar {
    animation: openSidebarAnimation 1.5s forwards;  /* Executa a animação 'openSidebarAnimation' durante 1,5 segundos e mantém o estado final */
    height: 580px;
}

@keyframes openSidebarAnimation {
    to {
        width: 80%;              /* Expande a sidebar para 80% da largura da viewport, mostrando o menu */
        opacity: 1;              /* Torna a sidebar totalmente visível */
        bottom: 0;               /* Ajusta a posição para ocupar toda a altura da tela até o rodapé */
        border-radius: 0;        /* Remove o arredondamento para dar formato retangular tradicional à sidebar */
    }
}

/* --- Animação para fechar a sidebar --- */
.sidebar.Close-sidebar {
    animation: CloseSiideBarAnimation 1.5s forwards; /* Executa a animação 'CloseSiideBarAnimation' por 1,5 segundos e mantém estado final */
}

@keyframes CloseSiideBarAnimation {
    from {
        width: 80%;              /* Estado inicial: sidebar aberta com 80% de largura */
        opacity: 1;              /* Visível */
        bottom: 0;               /* Ocupando toda a altura */
        border-radius: 0;        /* Retângulo sem bordas arredondadas */
    }
    to {
        width: 0;                /* Recolhe a sidebar para largura zero, escondendo-a */
        opacity: 0;              /* Torna invisível durante o fechamento */
        bottom: 70%;             /* Posiciona para criar o efeito "bolha" ao recolher */
        border-bottom-left-radius: 50%; /* Aplica arredondamento parcial, menor que o inicial, para suavizar a transição */
    }
}







/* ==============================================
   ANIMAÇÃO: EFEITO DE DESFOQUE AUTOMÁTICO
   ============================================== */

.autoBlur {
    /* Define a animação com:
       - nome: autoBlurAnimation
       - timing function: linear → a velocidade da animação é constante
       - fill mode: both → mantém o estilo do primeiro frame antes da animação começar
         e do último frame depois que termina (isso evita "piscadas") */
    animation: autoBlurAnimation linear both;

    /* ========================================
       animation-timeline: view();
       ========================================
       Isso faz a animação ser controlada com base no SCROLL da página!

       - 'animation-timeline' é uma propriedade nova (do CSS Scroll-Linked Animations)
       - Em vez de a animação rodar sozinha com tempo fixo (tipo: 3s), ela avança conforme o elemento aparece ou desaparece na tela.

       - 'view()' é o valor padrão que ativa essa animação ligada à visibilidade:
         → Quando o elemento entra na área visível da página (viewport), a animação começa.
         → Conforme você rola a página, ela vai progredindo (ou até voltando, se você subir o scroll).

       Ou seja: o scroll do usuário é que move a animação, não o tempo!
    */
    animation-timeline: view();
}

@keyframes autoBlurAnimation {
    0% {
        /* Início: desfocado e invisível */
        filter: blur(40px);     /* desfoca bastante */
        opacity: 0;             /* totalmente transparente */
    }

    35%, 60% {
        /* Meio da animação: focado e visível */
        filter: blur(0);        /* sem desfoque */
        opacity: 1;             /* totalmente visível */
    }

    100% {
        /* Final: desfocado e invisível de novo */
        filter: blur(40px);
        opacity: 0;
    }
}


/* ==============================================
   ANIMAÇÃO: AUTO DISPLAY COM ENTRADA SUAVE
   ============================================== */

.autoDisplay {
    /* Define a animação:
       - nome: autoDisplayAnimation
       - fill mode: both (mantém o estado final ao término da animação) */
    animation: autoDisplayAnimation both;

    /* A animação se baseia no scroll: ela avança conforme o elemento aparece na tela */
    animation-timeline: view();
}

@keyframes autoDisplayAnimation {
    from {
        /* Começo: elemento fora da tela, pequeno, desfocado e quase invisível */
        filter: blur(10px);                   /* leve desfoque */
        transform: translateY(-200px) scale(0); /* sobe 200px e escala 0 (nada visível) */
        opacity: 0.2;                         /* levemente visível */
    }

    50% {
        /* Meio: elemento aparece suavemente, com zoom e nitidez */
        opacity: 1;                           /* 100% visível */
        filter: blur(0);                      /* sem desfoque */
        transform: translateX(0) scale(1);    /* volta à posição original com tamanho real */
    }
}


/* ==============================================
   ANIMAÇÃO: FADE IN DA ESQUERDA PARA A DIREITA
   ============================================== */

.fadeInRight {
    /* Define a animação com nome 'fadeInAnimation' e fill mode 'both' */
    animation: fadeInAnimation both;

    /* A animação responde ao scroll: só acontece conforme o elemento aparece na tela */
    animation-timeline: view();
}

@keyframes fadeInAnimation {
    0% {
        /* Início: vindo da esquerda, pequeno, desfocado e invisível */
        opacity: 0;                              /* invisível */
        transform: translateX(-500px) scale(0.2);/* deslocado 500px à esquerda e bem pequeno */
        filter: blur(20px);                      /* forte desfoque */
    }

    35%, 65% {
        /* Meio: aparece no local certo, visível e focado */
        opacity: 1;                              /* visível */
        transform: translateX(0px) scale(1);     /* volta à posição original e tamanho real */
        filter: blur(0);                         /* sem desfoque */
    }

    100% {
        /* Fim: opcionalmente, volta a ficar desfocado */
        filter: blur(20px);
    }
}




/* MEDIAS QUERY */


/* Media query para telas com proporção de aspecto menor que 16:9 */
@media (max-aspect-ratio: 16/9) {
    .back-vid {
        width: auto; /* 'width' é ajustado automaticamente para manter a proporção do vídeo */
        height: 100%; /* 'height' faz com que o vídeo ocupe 100% da altura da tela */
    }
}

/* Media query para telas com proporção de aspecto maior que 16:9 */
@media (min-aspect-ratio: 16/9) {
    .back-vid {
        width: 100%; /* O vídeo de fundo ocupa 100% da largura da tela */
        height: auto; /* A altura do vídeo é ajustada automaticamente para manter a proporção */
    }
}









/* =======================================================
   MEDIA QUERY PARA TABLETS (TELAS ATÉ 1000px DE LARGURA)
   ======================================================= */

@media screen and (max-width: 1000px) {

    /* ==============================
       AJUSTES NA SEÇÃO BLACKHOOLE
       ============================== */

    /* ============================
       AJUSTES NOS CARDS DE INFO
       ============================ */
    .inf-cards {
        grid-template-columns: auto;
        /* Em vez de vários cards lado a lado, agora ficam um embaixo do outro */
       ;
    }



    /* Vídeo dentro do card */
 .card:nth-child(3) video {
    width: 500px; /* faz o vídeo ocupar toda a largura do container */
    max-width: 100%;
  }

    

    .card:nth-child(1) p {
       font-size: 19px;
       font-weight: bold;
       bottom: 0%;
    }
.card:nth-child(1) img {
   position: absolute;
   top: 1%;
   width: 100%;
   max-width: 100%;
  }

  .card:nth-child(2) img {
   position: absolute;
   
   bottom: 15%;
   width: 100%;
   max-width: 100%;
  
   
  }

     .card:nth-child(2) p {
       font-size: 19px;
       font-weight: bold;
       
    }
    
    .card:nth-child(3) {
        grid-column: span 2;  /* Esse card ocupa o espaço de 2 colunas */
        height: 70vh;         /* Aumenta a altura pra dar mais destaque */
    }

    
     .card:nth-child(3) p {
       font-size: 19px;
       font-weight: bold;
    }
     .card:nth-child(4) p {
       font-size: 19px;
       font-weight: bold;
    }

    .inf-cards .card h1 {
        font-size: 20px;      /* Reduz o título dentro de cada card */
    }

    .card:nth-child(2) p {
       bottom: 0;
    }

    .card:nth-child(3) h1 {
        bottom: 28%;          /* Posiciona o título um pouco acima no card 3 */
    }

    .card video {
        height: 100%;          /* Reduz a altura do vídeo dentro dos cards */
        margin-top: 5%;       /* Adiciona um espaço acima do vídeo */
    }

    /* ================================
       SEÇÃO "MEUS PROJETOS"
       ================================ */
    .meus-projetos {
        margin-bottom: 300px; 
       
    }

    .projeto-vidbox video {
        width: 350px;         /* Reduz o tamanho do vídeo */
        margin-left: -100px;  /* Move ele um pouco pra esquerda */
    }

    .projeto-inf {
        padding-left: 0;      /* Remove o preenchimento esquerdo */
        margin-left: -50px;   /* E ainda empurra um pouco pra esquerda */
    }

    .projeto-inf h1 {
        font-size: 20px;      /* Diminui o tamanho do título */
        max-width: 200px;     /* Limita largura pra caber bem */
        text-wrap: wrap;      /* Permite quebrar linha */
    }

    .projeto-inf p {
        font-size: 11px;      /* Diminui o tamanho do texto */
        text-wrap: wrap;      /* Permite quebra automática */
        max-width: 200px;      /* Deixa bem compacto */
        min-width: 0;         /* Garante que pode encolher ao máximo */
        font-weight: bold;
        line-height: 15px;
    }
    


   .skills-section {
    padding-top: 600px;
   }
    .skills-section .section-title{
        margin-top: -30px;
        margin-bottom: 81px;
    }
    
   

    .designer{
        padding-top: 140px;
    }
    .designer p{
      font-weight: bold;
    }
    .coder{
        padding-top: 140px;
    }
     .coder p{
       font-weight: bold;
       
    }


    .skills-box .slider{
       margin-top: 20px;
    }
  



    .contact-section{
         padding: 350px 0px 120px; /* espaço interno superior, */
         margin-top: 110px;
       
    }
    

    .contact-section .section-title{
      font-size: 38px;
    }

  
    .social-box a{
        display: flex;
        font-size: 25px;
        text-wrap: wrap;
        margin-bottom: 28px;
        
    }
     .social-box a i{
        margin-top: -1px;
     }

     .contact-box input{
        text-align: left;
        width: 90%;
        padding: 10px;

     }
     .contact-box p{
      font-size: 25px;
      
     }
      .contact-box .cta-p{
        line-height: 24px;
      }
      .contact-box button{
        padding: 20px;
      }
  /* Campo específico da mensagem */
  .contact-box .input-message {
    height: 60px; /* altura maior para o campo de mensagem */
    
  }

    /* ====================
       RODAPÉ
       ==================== */
    footer{
       height: 100px;
       

     } 

    footer h1 {
        font-size: 19px;      /* Diminui o título no rodapé */
        text-align: center;
        margin-bottom: 31px;
    }
}













@media (max-width: 500px) {
  /* Define o container principal da seção Hero em coluna */




.inf-section{
     margin-top: -100px;
     margin-bottom: -100px;
}


.inf-section .section-title{
    padding-top: 280px;
    margin-bottom: 5px;
}

  
.inf-cards{
    display: flex;
    flex-direction: column;
    padding-top: 40px;
}
.card{
    padding-bottom: 90px;
}


.inf-cards .card p{
    width: 90%;
    max-width: 90%;
    bottom: 0%;
    font-size: 12px;
}


.card:nth-child(1) img {
   position: absolute;
   top: 1%;
   width: 100%;
   max-width: 300px;
  }

  .card:nth-child(2) img {
   position: absolute;
   top: 3%;
   width: 200px;
   max-width: 100%;
   
  }

  .card:nth-child(3) h1 {
    top: 35%;
    width: 100%;
    max-width: 100%;
    font-weight: 700
    ;
   
    
  }

  .card:nth-child(3) p {
    bottom: 15%;
  }

  /* Aumenta o tamanho dos vídeos */
  .card-vid video {
    width: 100%; /* faz o vídeo ocupar toda a largura do container */
   
    height: auto; /* mantém proporção */
  }

  
  
  .card:nth-child(4) h1 {
    top: 47%;
  }
  .card:nth-child(4) p {
    bottom: 0;
    font-size: 11px !important;
  }
   


  

  .card-vid h1 {
    margin-bottom: 20px;
  }

  .hero-vid-box {
    height: 250px;
    top: 5%;
    right: 5%;
  }

  .inf-section {
    padding-top: 300px;
  }

  .card video {
    width: 100%;
  }


  





  
  .meus-projetos {
    margin-bottom: 600px;
  }
    .projeto-card {
    flex-direction: column;
    align-items: center; /* Centraliza o bloco inteiro do projeto */
    width: 100%;
    max-width: 100%;
  
    box-sizing: border-box;
    gap: 40px; /* Espaço entre os cards de projetos */
    margin-bottom: 160px;
    padding-bottom: 350px;
  }
  .autoDisplay{
    animation: none;
    transform: none;
    
  }

  .projeto-card video {
    width: 100%; /* Deixa o vídeo maior */
    max-width: 200px; /* Evita que fique gigante em telas maiores */
    height: auto;
    margin: 0 auto; /* Centraliza o bloco texto em relação ao vídeo */
  }
  .projeto-vidbox video{
     width: 100%;       /* se adapta à largura do container */ 
    max-width: 280px !important;  /* não ultrapassa esse limite, usei !important por que outro css estava sobreponto esse tamanho */
    height: auto;      /* mantém proporção */
    display: block;    /* remove espaços em branco indesejados */
  }

  .projeto-inf {
    width: 90%; /* Mesmo tamanho do vídeo para alinhar */
    max-width: 500px;
    margin: 0 auto; /* Centraliza o bloco texto em relação ao vídeo */
    display: flex;
    flex-direction: column;
    align-self: flex-start; /* Garante alinhamento igual aos textos */
    gap: 10px; /* Espaço entre título, parágrafo e botão */
    
  }

  .projeto-inf h1 {
    font-size: 18px;
    font-weight: bold;
    text-align: left; /* Alinha texto à esquerda */
    white-space: nowrap; /* Evita quebra do título */
    align-self: flex-start; /* Garante alinhamento igual aos textos */
    margin-left: 6px;
    margin-left: 0;
    margin-right: 0;
    
  }

  .projeto-inf p {
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    max-width: 100%; /* Garante que fique dentro do bloco */
    word-break: break-word; /* Quebra a palavra quando necessário */
    margin-left: 6px;
  }

  .projeto-inf button {
    margin-top: -35px;
    align-self: flex-start; /* Garante alinhamento igual aos textos */
    margin-left: 6px;
  }





  
   
   

    .skills-section .section-title{
        margin-top: 40px;
    }
    
    .skills-box .skills-image{
        padding-top: 450px;
        
     }


    .skills-b
      .designer{
        padding-top: 210px;
        width: 90%;
    }
    .skills-box .coder{
        padding-top: 210px;
       width: 90%;
       
    }
    

    .skills-box .slider{
        padding-top: 330px;
    }
  

   



   

 /* Container da seção de contato */
  .contact-section {
    padding-top: 430px !important;
   
  }

  /* Título da seção */
  .contact-section .section-title {
    font-size: 22px; /* reduz o tamanho da fonte do título */
    margin-top: 290px; /* espaço abaixo do título */
    text-align: center;
    left: 35%;
    
  }




    
}











/* =======================================================
   MEDIA QUERY PARA TABLETS (TELAS ATÉ 720px DE LARGURA)
   ======================================================= */

@media screen and (max-width: 720px) {
     
  

    header {
    position: fixed;
    height: 50px;
  }

  header ul,
  header .box-icons {
    display: none;
  }

  .blackhoole-box video {
    margin-top: -18%;
  }



  .hero {
    display: flex; /* ativa o flexbox */
    flex-direction: column; /* empilha os elementos em coluna */
    gap: 1.5rem; /* espaçamento entre o vídeo e o conteúdo */
    padding: 11rem 0rem; /* espaçamento interno (topo/baixo 2rem, laterais 1rem) */
    margin-top: -20px;
  }

 
 
 
.hero-vid-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
 
  overflow: hidden;
}


/* 
  Seleciona o vídeo dentro da div 'hero-vid-box'. Ou seja, o código afeta especificamente
  o vídeo (tag <video>) que está dentro de um contêiner com a classe 'hero-vid-box'.
  Caminho: .hero-vid-box video
*/
.hero-vid-box video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Faz o vídeo preencher a área sem distorcer */
  mix-blend-mode: overlay;
  
}


 .inf-section{
     padding-top: 40px;
     margin-bottom: -150px;
 }

.inf-section .section-title{
    margin-bottom: 5px;
}
.inf-cards{
    padding-top: 40px;
}

.card{
    padding-bottom: 120px;
}

.inf-cards .card p{
    width: 90%;
    max-width: 90%;
    bottom: 0%;
    font-size: 12px;
    font-weight: bold;
 
}

.card:nth-child(1) img {
   position: absolute;
   top: 1%;
   width: 100%;
   max-width: 300px;
  }
    .card:nth-child(2) img {
   position: absolute;
   top: 1%;
   width: 200px;
   max-width: 100%;
   
  }
  .card:nth-child(2) h1 {
    width: 100%;
    max-width: 100%;
   
  }
  .card:nth-child(3) h1 {
    width: 100%;
    max-width: 100%;
    font-weight: 700;
  }

  
  .card:nth-child(3) p {
    bottom: 13%;
  }

   .card:nth-child(3) video {
    width: 500px; /* faz o vídeo ocupar toda a largura do container */
    max-width: 100%;
  }

  /* Aumenta o tamanho dos vídeos */
  .card-vid video {
    width: 100%; /* faz o vídeo ocupar toda a largura do container */
    height: auto; /* mantém proporção */
  }

   
  .card:nth-child(4) img {
    position: absolute;
    top: 4%;
  }
  .card:nth-child(4) p {
    font-size: 13px;
  }
   

  .card-vid h1 {
    margin-bottom: 20px;
  }

  .hero-vid-box {
    height: 250px;
    top: 5%;
    right: 5%;
  }

  

  .card video {
    width: 100%;
  }












  .meus-projetos {
    margin-bottom: 600px;
  }


  .projeto-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    flex-direction: column;
    align-items: center; /* Centraliza o bloco inteiro do projeto */
    gap: 40px; /* Espaço entre os cards de projetos */
    margin-bottom: 160px;
    padding-bottom: 350px;
  }

  .projeto-card video {
    width: 100%; /* Deixa o vídeo maior */
    max-width:100%; /* Evita que fique gigante em telas maiores */
    height: auto;
    margin: 0 auto; /* Centraliza o bloco texto em relação ao vídeo */
  }

   .projeto-vidbox video{
    width: 100%;       /* se adapta à largura do container */ 
    max-width: 500px;  /* não ultrapassa esse limite, 
    height: auto;      /* mantém proporção */
    display: block;    /* remove espaços em branco indesejados */
  }

  .projeto-inf {
    width: 80%; /* Mesmo tamanho do vídeo para alinhar */
    max-width: 400px;
    margin: 0 auto; /* Centraliza o bloco texto em relação ao vídeo */
    display: flex;
    flex-direction: column;
    align-self: flex-start; /* Garante alinhamento igual aos textos */
    gap: 10px; /* Espaço entre título, parágrafo e botão */
  }

  .projeto-inf h1 {
    font-size: 20px;
    font-weight: bold;
    text-align: left; /* Alinha texto à esquerda */
    white-space: nowrap; /* Evita quebra do título */
    align-self: flex-start; /* Garante alinhamento igual aos textos */
    margin-left: 6px;
  }

  .projeto-inf p {
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    max-width: 100%; /* Garante que fique dentro do bloco */
    word-break: break-word; /* Quebra a palavra quando necessário */
    margin-left: 6px;
  }

  .projeto-inf button {
    margin-top: -35px;
    align-self: flex-start; /* Garante alinhamento igual aos textos */
    margin-left: 6px;
  }





  

    
.skills-section {

  position: relative;
  padding-top: 650px;  /* espaçamento interno no topo pra afastar as seçoes */
}

/* Título da seção "Minhas Skills" */
.skills-section .section-title {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 100%;
  padding-top: 450px;  /* mesmo espaçamento interno da seçao principal fazendo com que volte pra posição original */
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  font-size: 28px; /* Aumentado o tamanho do título */
  animation: none;
}

.skills-box .skills-image{
  padding-top: 150px;
        
}

/* Container principal das skills */
.skills-box {
  margin-top: 120px; /* espaço maior entre título e conteúdo */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px; /* espaço entre designer e coder */
  position: relative;
  padding-bottom: 150px; /* espaço extra para o slider aparecer abaixo */
}

/* Imagem de skills */
.skills-image {
  width: 95%;
  max-width: 350px; /* aumentada para dar mais destaque */
  margin-bottom: 450px;
  padding-bottom: 30px;
}

/* Estilo compartilhado entre designer e coder */
.designer {
  max-width: 320px;         /* Define um limite fixo de largura para alinhar as duas divs */
  width: 100%;
  margin: 0 auto;           /* Centraliza horizontalmente */
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Espaço extra abaixo de coder */
.coder {
  
  max-width: 320px;         /* Define um limite fixo de largura para alinhar as duas divs */
  width: 100%;
  margin: 0 auto;           /* Centraliza horizontalmente */
   margin-top: 350px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}



/* Slider que passa as imagens abaixo do bloco de skills */
.slider {
  position: absolute;
  top: calc(100% + 130px); /* posiciona logo abaixo das skills */
  left: 0;
  width: 100%;
  padding-top: 180px;
  display: flex;
  justify-content: center;
  z-index: 1;
}

/* Lista interna do slider */
.slider .list {
  display: flex;
  gap: 20px;
  animation: scrollSlider 15s linear infinite; /* animação de rolagem infinita */
}

/* Cada item (imagem) dentro do slider */
.slider .item img {
  width: 70px;
  height: auto;
  object-fit: contain;
}

/* Animação do slider */
@keyframes scrollSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

  





 /* Container da seção de contato */
  .contact-section {
    padding: 60px 15px 120px; /* espaço interno superior, laterais e inferior */
    margin-top: 550px; /* empurra a seção um pouco para baixo */
  }

  /* Título da seção */
  .contact-section .section-title {
    font-size: 28px; /* reduz o tamanho da fonte do título */
    margin-top: -230px; /* espaço abaixo do título */
    text-align: center;
    left: 35%;
  }

  /* Links sociais (LinkedIn, GitHub, Telefone) */
  .social-box a {
    display: flex; /* permite alinhar ícone e texto lado a lado */
    align-items: center; /* alinha verticalmente no centro da altura */
    font-size: 18px; /* reduz o tamanho da fonte do texto */
    gap: 8px; /* espaço entre ícone e texto */
    margin-bottom: 12px; /* espaçamento entre os itens da lista */
    text-wrap: wrap; /* permite quebras de linha se necessário */
    word-break: break-word; /* quebra palavras longas para não estourar o layout */
    font-weight: bold;
  }

  /* Ícones dentro dos links sociais */
  .social-box a i {
    font-size: 20px; /* reduz o tamanho dos ícones */
    margin-top: -1px; /* sobe levemente os ícones para alinhar com o texto */
    /* Essa margem negativa ajuda a centralizar o ícone em relação ao texto */
  }

  /* Caixa do formulário de contato */
  .contact-box {
    padding: 15px; /* espaço interno geral da caixa */
  }

  .contact-box p {
    font-size: 17px;
    text-align: left; /* alinha os textos à esquerda */
    margin: 19px 0 11px; /* espaçamento acima e abaixo de cada <p> */
    font-weight: bold;
    line-height: 20px;
  }

  .contact-box input {
    width: 100%; /* ocupa toda a largura do container */
    padding: 10px; /* espaço interno do input */
    font-size: 14px; /* texto legível mas adaptado para mobile */
    margin-bottom: 10px; /* espaço entre os inputs */
    box-sizing: border-box; /* inclui padding e border no cálculo do width */
  }

  /* Campo específico da mensagem */
  .contact-box .input-message {
    height: 80px; /* altura maior para o campo de mensagem */
  }

  /* Botão de envio */
  .contact-box button {
    width: 100%; /* ocupa toda a largura disponível */
    padding: 12px; /* espaço interno para deixar confortável */
    font-size: 15px; /* texto do botão ajustado */
    display: flex; /* permite alinhar o ícone e o texto */
    align-items: center; /* alinha ícone e texto verticalmente */
    justify-content: center; /* centraliza tudo no botão */
    gap: 6px; /* espaço entre o ícone e o texto do botão */
    cursor: pointer; /* muda o cursor para indicar que é clicável */
    font-weight: bold;
  }

  /* Rodapé: reduz fonte para caber melhor na tela pequena */

  footer{
    width: 100%;
    height: 80px;
  }
  footer h1 {
    margin-bottom: 30px;
    font-size: 15px;
    font-weight: bold;

  }
  

  /* MENU HAMBURGUER */

  .menu-icon{
    display: inline; /* tornei visivel o icone de menu */
  }
  



}