/* --- 1. Styles de base et centrage du logo --- */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* Couleur d'arrière-plan d'hiver */
    background-color: #0d1a29; 
    overflow: hidden; /* Important pour cacher les bords de l'animation */
}

/* Conteneur de centrage du logo */
.center-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; 
    position: relative; 
}

/* Style du logo */
.logo {
    display: block;
    max-width: 80%;
    width: 300px; 
    height: auto; 
    /* Ombre pour mieux faire ressortir le logo */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

/* --- 2. Animation de la Neige (Flocons Agrandis) --- */

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; 
}

/* Couche 1 : Flocons de taille MOYENNE (2px - rapides) */
.snow-container::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    
    /* Box-shadow : X Y RayonFlou TailleFlocon Couleur */
    box-shadow: 
        100px 0px 2px 2px #fff, 200px 200px 2px 2px #fff, 300px 500px 2px 2px #fff, 400px 100px 2px 2px #fff, 
        500px 700px 2px 2px #fff, 700px 800px 2px 2px #fff, 150px 300px 2px 2px #fff, 450px 900px 2px 2px #fff, 
        650px 400px 2px 2px #fff, 950px 100px 2px 2px #fff, 1050px 300px 2px 2px #fff, 1200px 800px 2px 2px #fff, 
        1300px 500px 2px 2px #fff, 50px 950px 2px 2px #fff, 800px 250px 2px 2px #fff, 1100px 600px 2px 2px #fff,
        1400px 150px 2px 2px #fff, 250px 750px 2px 2px #fff, 750px 50px 2px 2px #fff, 1000px 400px 2px 2px #fff,
        1500px 900px 2px 2px #fff, 500px 150px 2px 2px #fff, 900px 50px 2px 2px #fff, 1250px 750px 2px 2px #fff;
    
    animation: fall 10s linear infinite;
}

/* Couche 2 : Flocons de taille GRANDE (3px - plus lents) */
.snow-container::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background: transparent;
    border-radius: 50%;
    
    /* Box-shadow : X Y RayonFlou TailleFlocon Couleur */
    box-shadow: 
        150px 50px 3px 3px #fff, 450px 800px 3px 3px #fff, 850px 300px 3px 3px #fff, 1150px 650px 3px 3px #fff,
        50px 100px 3px 3px #fff, 350px 600px 3px 3px #fff, 650px 900px 3px 3px #fff, 950px 450px 3px 3px #fff,
        1250px 200px 3px 3px #fff, 250px 700px 3px 3px #fff, 100px 850px 3px 3px #fff, 700px 150px 3px 3px #fff;
    
    animation: fall-slow 15s linear infinite;
}

/* Définition de la chute rapide */
@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

/* Définition de la chute lente */
@keyframes fall-slow {
    to {
        transform: translateY(100vh);
    }
}