/* 1. Configuração da Fonte Local */
@font-face {
    font-family: 'Grenoble-Serial';
    src: url('../fonts/Grenoble-Serial-Bold-achatada.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* Posicionamento e layout do seletor */
.lang-switcher {
    position: absolute;
    top: 30px;
    right: 40px;
    z-index: 1000; /* Garante que fique acima das estrelas e do fundo */
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre os botões e a barra */
}

/* Estilo base dos botões */
.lang-switcher button {
    background: transparent;
    border: 1px solid transparent; /* Borda invisível por padrão */
    color: #0099FF;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse */
.lang-switcher button:hover {
    color: white;
    background: #0099FF;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: radial-gradient(circle, #000637 0%, #1A0B92 50%, #3B12DD 100%);
    min-height: 100vh;
    font-family: 'Grenoble-Serial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0099FF; 
    overflow: hidden; 
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; 
}

.main-logo {
    max-width: 450px; 
    height: auto;
}

.nav-grid {
    display: grid;
    
    grid-template-columns: 1fr auto 1fr; 
    grid-template-areas:
        "about star projects"
        "resume star socials";
    gap: 30px 23px;
    align-items: center;
}

.nav-item {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease; 
}

.nav-item h2 {
    font-size: 47px;
    margin-bottom: -6px;
}

.nav-item p {
    font-size: 17px;
    font-family: sans-serif; 
}

.item-about { grid-area: about; text-align: right; }
.item-projects { grid-area: projects; text-align: left; }
.item-resume { grid-area: resume; text-align: right; }
.item-socials { grid-area: socials; text-align: left; }

.item-star {
    grid-area: star;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-star img {
    width: 119px; 
    height: auto;
    position: absolute;
}

.nav-item:hover {
    color: #FFFFFF;
}


/* -----------------------------------------------------------
     FUNDO ANIMADO NOS CANTOS E DESCENDO
/* ----------------------------------------------------------- */

#stars-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden; 
}

.star-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh; 
    background-repeat: no-repeat;
    animation: scroll-down linear infinite;
}

/* 
  LÓGICA DE COORDENADAS:
  - Usamos vw (largura) baixos (10vw-35vw) para o canto esquerdo.
  - Usamos vw (largura) altos (65vw-90vw) para o canto direito.
  - Evitamos valores próximos a 50vw para manter o centro limpo.
*/

.layer1 {
    background-image: 
        /* Tela 1 (2 estrelas nas bordas) */
        url('../media/vetor/shooting-star.svg'), url('../media/vetor/shooting-star.svg'),
        /* Cópias do Loop (2 cópias) */
        url('../media/vetor/shooting-star.svg'), url('../media/vetor/shooting-star.svg');
    
    background-position: 
        /* Posições Tela 1 (Borda Esquerda 10vw, Borda Direita 90vw) */
        10vw 10vh, 90vw 30vh,
        /* Cópia correspondente (+100vh no eixo Y) */
        10vw calc(10vh + 100vh), 90vw calc(30vh + 100vh);
    
    background-size: 70px 70px; /* Tamanho pequeno */
    animation-duration: 1.2s; /* Velocidade que você ajustou */
}

.layer2 {
    background-image: 
        /* Tela 1 */
        url('../media/vetor/shooting-star.svg'), url('../media/vetor/shooting-star.svg'),
        /* Cópias do Loop */
        url('../media/vetor/shooting-star.svg'), url('../media/vetor/shooting-star.svg');
    
    background-position: 
        /* Posições Tela 1 (Um pouco mais para dentro, mas ainda longe do centro) */
        20vw 20vh, 80vw 60vh,
        /* Cópia correspondente */
        20vw calc(20vh + 100vh), 80vw calc(60vh + 100vh);
    
    background-size: 120px 120px; /* Tamanho médio */
    animation-duration: 1.5s; /* Velocidade que você ajustou */
}

.layer3 {
    background-image: 
        /* Tela 1 */
        url('../media/vetor/shooting-star.svg'),
        /* Cópia do Loop */
        url('../media/vetor/shooting-star.svg');
    
    background-position: 
        /* Posição Tela 1 (Pela borda esquerda 15vw) */
        15vw 30vh,
        /* Cópia correspondente */
        15vw calc(30vh + 100vh);
    
    background-size: 175px 175px; /* Tamanho que você ajustou */
    animation-duration: 1s;     /* Velocidade que você ajustou */
}

/* --- ANIMAÇÃO PARA FAZER TUDO DESCER --- */
@keyframes scroll-down {
    from {
        /* Começa empurrada para cima, fora da visão, para que a original desça */
        transform: translateY(-100vh);
    }
    to {
        /* Desce até a posição original (0), conectando perfeitamente */
        transform: translateY(0);
    }
}


/* --- ESTILOS BASE DAS ESTRELAS --- */
.container-estrela {
  /* position absolute permite posicionar livremente na página */
  position: absolute; 
  z-index: 10; /* Ajuste para ficar atrás ou na frente de outros elementos */
  
  /* A perspectiva foi movida para cá para não afetar a página inteira */
  perspective: 1000px; 
  animation: inclinarPerspectiva 3s ease-in-out infinite;
}

.estrela-vetor {
  width: 100%; /* O tamanho agora será controlado pelas classes individuais */
  animation: 
    flutuar 1.5s ease-in-out infinite,
    brilhar 1.5s ease-in-out infinite;
}

/* --- POSIÇÕES E TAMANHOS (Classes Variadas) --- */
/* Crie quantas variações quiser alterando top, left, width e animation-delay */

.star-1 { top: 49%; left: 12%; width: 136px; }
/* O delay dessincroniza a animação para parecer natural */
.star-1, .star-1 .estrela-vetor { animation-delay: 0s; }

.star-2 { top: 30%; left: 80%; width: 198px; }
.star-2, .star-2 .estrela-vetor { animation-delay: 0.4s; }

.star-3 { top: -6%; left: 68%; width: 176px; }
.star-3, .star-3 .estrela-vetor { animation-delay: 0.8s; }

.star-4 { top: 75%; left: -5%; width: 238px; }
.star-4, .star-4 .estrela-vetor { animation-delay: 1.2s; }

.star-5 { top: 9%; left: 19%; width: 135px; }
.star-5, .star-5 .estrela-vetor { animation-delay: 1.6s; }

.star-6 { top: 41%; left: 25%; width: 45px; }
.star-6, .star-6 .estrela-vetor { animation-delay: 0.3s; }

.star-7 { top: 25%; left: 8%; width: 77px; }
.star-7, .star-7 .estrela-vetor { animation-delay: 1.0s; }

.star-8 { top: 9%; left: 40%; width: 46px; }
.star-8, .star-8 .estrela-vetor { animation-delay: 0.7s; }

.star-9 { top: 73%; left: 72%; width: 79px; }
.star-9, .star-9 .estrela-vetor { animation-delay: 1.5s; }


/* --- KEYFRAMES (Animações) --- */

@keyframes inclinarPerspectiva {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotateX(25deg) rotateY(20deg); }
  50%  { transform: rotateX(-20deg) rotateY(25deg); }
  75%  { transform: rotateX(-25deg) rotateY(-25deg); }
  100% { transform: rotateX(0deg) rotateY(0deg); }
}

@keyframes flutuar {
  0%   { transform: translateY(0px) scale(1); }
  50%  { transform: translateY(-30px) scale(1.05); } /* Reduzi um pouco a subida para não quebrar o layout */
  100% { transform: translateY(0px) scale(1); }
}



/* ==========================================================================
   RESPONSIVIDADE - MOBILE
   ========================================================================== */

/* ==========================================================================
   RESPONSIVIDADE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    html {
        overflow: hidden;
        height: 100%;
    }

    body {
        overflow: hidden;
        height: 100dvh;
        min-height: unset;
        align-items: center;
        justify-content: center;
        color: #ffffff;
    }

    /* Fundo animado não pode vazar */
    #stars-background-container {
        overflow: hidden;
        width: 100vw;
        max-width: 100%;
    }

    /* Estrelas decorativas não podem vazar pras bordas */
    .container-estrela {
        overflow: hidden;
        max-width: 100vw;
    }

    .container {
        margin: 0;
        padding: 0 20px;
        gap: 4px;
        width: 100%;
        justify-content: center;
    }

    .main-logo {
        max-width: 80%;
        margin-bottom: 12px;
    }

    .nav-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }

    .item-about,
    .item-projects,
    .item-resume,
    .item-socials {
        text-align: center;
    }

    .item-star {
        display: none;
    }

    .nav-item h2 {
        font-size: 38px;
        margin-bottom: -4px;
    }

    .nav-item p {
        font-size: 15px;
    }

    .star-2, .star-3, .star-4 {
        display: none;
    }

    .star-1  { top: 10%; left: 5%;  width: 50px;  }
    .star-5  { top: 92%; left: 10%; width: 39px;  }
    .star-6  { top: 48%; left: 25%; width: 45px;  } /* era 162px, vazava para direita */
    .star-9  { top: 80%; left: 75%; width: 60px;  }

    @keyframes flutuar {
        0%   { transform: translateY(0px) scale(1); }
        50%  { transform: translateY(-10px) scale(1.03); }
        100% { transform: translateY(0px) scale(1); }
    }

    /* Ajusta estrelas que ficam perto das bordas */
    .star-7  { top: 20%; left: 8%;  width: 77px;  }
    .star-8  { top: 15%; left: 76%; width: 100px; }

}