/* Reset básico e boa prática para responsividade */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
}

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    text-align: center;
}

/* --- MUDANÇA FINAL DE LÓGICA NO CONTAINER --- */
.container {
    width: 100%;
    
    /* A MÁGICA ESTÁ AQUI:
    Usamos 'padding' para posicionar o bloco de conteúdo.
    15vh = 15% da altura da tela. Isso empurra o conteúdo para baixo do topo.
    5vh = 5% da altura da tela. Isso dá um respiro antes do rodapé.
    */
    padding: 18vh 20px 35vh 20px; /* Cima, Lados, Baixo */

    /* Mantemos isso para alinhar o conteúdo dentro do container */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* O palco da animação não muda */
.animation-wrapper {
    position: relative; 
    height: 90px;
    width: 100%;
}

.title-line {
    position: absolute; 
    width: 100%;       
    left: 0;           
    right: 0;          
    color: #000000;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

#line1 {
    top: 0; 
    font-size: 22px;
    transform: translateX(-105%); 
}

#line2 {
    top: 35px;
    font-size: 2em;
    transform: translateX(105%);
}

#line1.slide-in,
#line2.slide-in {
    opacity: 0.9;
    transform: translateX(0);
}

.start-button {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    font-size: 1.5em;
    padding: 20px 40px;
    text-decoration: none;
    margin-top: 50px; 
    border: none;
    cursor: pointer;
    max-width: 100%;
}

footer {
    /* O footer agora simplesmente aparece no final do fluxo da página */
    padding: 0 20px 20px 20px; /* Espaçamento para o rodapé */
    font-size: 1em;
    color: #000000;
}

footer a {
    color: #000000;
    text-decoration: none;
}