/* 1. O Fundo do Espaço e Estilo Geral */
body {
    background-color: #050508;
    color: #e0e0e0;
    /* --- INSERÇÃO DA FONTE DO NÍVEL 3 --- */
    font-family: 'Courier New', Courier, monospace; /* Fonte de terminal */
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease;
}

.container {
    display: flex;
    flex-direction: column; /* Permite colocar conteúdo abaixo do título */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.neon-text {
    color: #fff;
    /* --- AJUSTE DE FONTE PARA O LOGO --- */
    font-family: 'Verdana', sans-serif; /* Fonte forte para o nome da banda */
    text-transform: uppercase;         /* Deixa em maiúsculas para impacto */
    letter-spacing: 8px;               /* Espaçamento maior entre letras */
    
    text-shadow: 
        0 0 5px #fff, 
        0 0 10px #4dfe88, 
        0 0 20px #4dfe88, 
        0 0 40px #4dfe88, 
        0 0 80px #4dfe88;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px; /* Espaço para o conteúdo que vem abaixo */
}

/* 2. Estilo para o Conteúdo (A Transmissão) */
.transmissao-box {
    max-width: 600px;
    background: rgba(0, 0, 0, 0.7); /* Fundo preto semi-transparente */
    border: 1px solid rgba(77, 254, 136, 0.3); /* Borda verde suave */
    padding: 20px;
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1.6;
    color: #4dfe88; /* Texto na cor do neon, mas sem o brilho forte */
}

/* ... Mantenha seus códigos das estrelas e animações abaixo ... */

    /* 1. O Fundo do Espaço Deep Black */
    body {
        background-color: #050508; /* Um preto levemente azulado, mais suave */
        color: #e0e0e0;             /* Texto claro, mas não branco puro (conforto visual) */
        position: relative;          /* Necessário para o posicionamento das estrelas */
        overflow-x: hidden;          /* Evita barras de rolagem estranhas */
        transition: background-color 0.3s ease;
    }

    /* 2. Pseudo-elemento para Criar as Estrelas (Sem alterar o HTML) */
    body::before {
        content: "";
        position: fixed;            /* As estrelas ficam fixas ao rolar a página */
        top: 0;
        left: 0;
        width: 1px;                 /* Cada estrela é um pixel */
        height: 1px;
        background: transparent;
        z-index: -1;                /* Fica atrás de todo o conteúdo */
        
        /* 3. "O Toque de Mestre": Empilhando Centenas de Estrelas Coloridas */
        box-shadow: 
            /* Estrelas Brancas (As principais) */
            10vw 20vh #fff, 25vw 55vh #fff, 40vw 10vh #fff, 60vw 80vh #fff, 
            85vw 30vh #fff, 15vw 90vh #fff, 70vw 20vh #fff, 30vw 40vh #fff, 
            90vw 70vh #fff, 50vw 50vh #fff, 12vw 12vh #fff, 80vw 10vh #fff,
            /* Estrelas Azuladas (Mais frias) - Usando seu --accent-color */
            20vw 30vh #4d90fe, 45vw 60vh #4d90fe, 75vw 15vh #4d90fe, 
            /* Estrelas Amareladas (Mais quentes) */
            35vw 85vh #ffcc00, 65vw 45vh #ffcc00, 95vw 5vh #ffcc00, 5vw 75vh #ffcc00;

        /* 4. "A Sugestão delas Piscarem": Aplicando a Animação */
        animation: twinklingStars 10s ease-in-out infinite;
        opacity: 0.6; /* Brilho geral suave para não cansar */
    }

    /* 5. Definição da Animação (O "Pisca-Pisca") */
    @keyframes twinklingStars {
        0%, 100% {
            opacity: 0.6; /* Brilho Normal */
        }
        30% {
            opacity: 0.2; /* Apaga um pouco, criando o "flicker" */
        }
        50% {
            opacity: 0.8; /* Brilha um pouco mais, para profundidade */
        }
        80% {
            opacity: 0.4; /* Volta a apagar */
        }
    }

.typing-effect {
    display: inline-block; /* Necessário para a animação de largura funcionar */
    overflow: hidden;      /* Esconde o texto que ainda não foi "digitado" */
    border-right: 2px solid #4dfe88; /* O cursor do terminal */
    white-space: nowrap;   /* Mantém o texto em uma única linha durante a animação */
    margin: 0 auto;
    letter-spacing: 2px;
    
    /* Animações: uma para digitar, outra para o cursor piscar */
    animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

/* Animação de Digitação: vai de 0 até 100% da largura */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Animação do Cursor: faz a borda aparecer e desaparecer */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #4dfe88 }
}

.neon-text {
    position: relative; /* Isso cria uma "âncora" para o pseudo-elemento */
    display: inline-block;
}

.neon-text::after {
    content: ""; /* O operário invisível aparece aqui */
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #4dfe88; /* A cor do seu neon */
    box-shadow: 0 0 15px #4dfe88;
    opacity: 0.5;
    
    /* Animação para subir e descer */
    animation: scanline 4s linear infinite;
}

@keyframes scanline {
    0% { top: 0; }
    50% { top: 100%; }
    100% { top: 0; }
}