/* Instellingen voor de hele pagina */
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #FFFFFF;
    /* Een dikker, robuuster lettertype voor die stoere look */
    font-family: 'Arial Black', Impact, sans-serif; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* Dit voorkomt een scrollbalk als de tekst van buiten het scherm komt */
    overflow-x: hidden; 
}

/* De container houdt alles netjes in het midden */
.container {
    text-align: center;
    max-width: 90%; /* Zorgt dat lange tekst niet tegen de rand van het scherm plakt */
}

/* Styling en animatie voor het logo */
.logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 30px;
    animation: schietErin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0; 
    transform: scale(0);
}

/* Styling voor de eerste zin (Binnenkort Online) */
.zin-1 {
    color: #FFFFFF; /* Wit */
    font-size: 4rem; /* Hele grote letters */
    text-transform: uppercase; /* Alles in hoofdletters */
    margin: 0;
    line-height: 1.1;
    
    /* Animatie: naam, duur, vloeiendheid, en blijven staan aan het eind */
    animation: vliegVanRechts 1s ease-out forwards;
    opacity: 0; 
    /* Startpositie: een heel scherm rechts van het midden */
    transform: translateX(100vw); 
}

/* Styling voor de tweede zin (We zijn hard aan het werk...) */
.zin-2 {
    color: #006491; /* De blauwe hoofdkleur */
    font-size: 2rem; /* Iets kleiner dan de titel, maar nog steeds groot */
    font-weight: bold; /* Dikgedrukt */
    text-transform: uppercase; /* Alles in hoofdletters */
    margin: 10px 0 0 0;
    line-height: 1.2;
    
    /* Animatie: naam, duur, vloeiendheid, en blijven staan aan het eind */
    animation: vliegVanLinks 1s ease-out forwards;
    opacity: 0; 
    /* Startpositie: een heel scherm links van het midden */
    transform: translateX(-100vw); 
}

/* --- De Animaties --- */

@keyframes schietErin {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes vliegVanRechts {
    0% { opacity: 0; transform: translateX(100vw); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes vliegVanLinks {
    0% { opacity: 0; transform: translateX(-100vw); }
    100% { opacity: 1; transform: translateX(0); }
}

/* --- Mobiele weergave --- */
/* Zorgt ervoor dat de gigantische letters op een telefoonscherm wat kleiner worden */
@media (max-width: 768px) {
    .zin-1 { font-size: 2.5rem; }
    .zin-2 { font-size: 1.2rem; }
}