/**
 * style.css
 * Definizioni CSS per la progress bar e le sue animazioni.
 */

/* 🚀 Stile Iniziale della Progress Bar */
#progressBar {
    /* Posizionamento fisso in alto e a sinistra */
    position: absolute;
    top: 0;
    left: 0;

    /* Altezza fissa */
    height: 50px;

    /* Colore e z-index per essere visibile sopra gli altri elementi */
    background-color: #4CAF50; /* Un bel verde */
    z-index: 9999;

    /* Larghezza iniziale e opacità per l'animazione */
    width: 0;
    opacity: 1;

    /* Applicazione dell'animazione */
    animation:
            fillAndFade 2000ms forwards; /* Durata totale (1500ms riempimento + 500ms attesa) */
}

/* ✨ Definizione dell'Animazione */
@keyframes fillAndFade {
    /* 0% - Inizio */
    0% {
        width: 0;
        height: 50px;
        opacity: 1;
    }

    /* 75% - Riempimento Completato (1500ms su 2000ms totali = 75%) */
    75% {
        width: 100vw; /* Riempie tutta la larghezza della viewport */
        height: 50px;
        opacity: 1;
    }

    /* 100% - Fine: Attesa (75% a 100% è l'attesa di 500ms) e Scomparsa */
    100% {
        width: 100vw;
        height: 0; /* Altezza va a zero */
        opacity: 0; /* L'opacità va a zero per una scomparsa più pulita */
    }
}