/*
 * De voortgangsstreep bovenaan het venster.
 *
 * Hoever de bezoeker in een lang stuk tekst is. Staat op een blogartikel
 * (single.css) en op een informatiepagina (informatie.css), en daarom hier: één
 * ontwerp voor hetzelfde ding, en niet twee kopieën die na de eerste wijziging
 * uit elkaar lopen.
 *
 * Geen animatie maar een uitlezing: de balk staat op de scrollpositie, net als
 * een schuifbalk. Daarom hangt hij in een gewone scroll-listener en niet aan
 * Motion (baserules regel 7).
 *
 * Zonder JavaScript blijft hij op scaleX(0) staan en is er dus niets te zien —
 * de baan zelf is doorzichtig. Er hoeft daarom niets verborgen te worden.
 */

.leesBalk {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;
    height: 3px;
    pointer-events: none;
}

.leesBalkVoortgang {
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, var(--kleurOranje) 0%, #ffb44d 100%);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Op papier is er geen scrollpositie, dus ook geen balk die er iets over zegt. */
@media print {
    .leesBalk {
        display: none;
    }
}