/**
 * BV Reading Progress - Frontend styles.
 * Lightweight, uses CSS variables for dynamic configuration.
 */

.bv-reading-progress-bar {
    position: fixed;
    top: var(--bv-rp-offset, 0px);
    left: 0;
    width: 100%;
    height: var(--bv-rp-height, 3px);
    background-color: var(--bv-rp-bg, transparent);
    z-index: 99999;
    pointer-events: none;
    opacity: var(--bv-rp-opacity, 1);
    box-shadow: var(--bv-rp-shadow, none);
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.bv-reading-progress-bar__fill {
    display: block;
    height: 100%;
    width: 0%;
    background-color: var(--bv-rp-color, #0073aa);
    border-radius: var(--bv-rp-radius, 0px);
    will-change: width;
    transform: translateZ(0);
    transition: width 0.05s linear;
}

/* Hide when completed (optional). */
.bv-reading-progress-bar.bv-rp-hide-complete[data-complete="true"] {
    opacity: 0;
    visibility: hidden;
}

/* Always show: keep minimum width visible. */
.bv-reading-progress-bar.bv-rp-always-show .bv-reading-progress-bar__fill {
    min-width: 2%;
}

/* Hide on mobile. */
@media (max-width: 782px) {
    .bv-reading-progress-bar.bv-rp-hide-mobile {
        display: none;
    }
}

/* Reduced motion preference. */
@media (prefers-reduced-motion: reduce) {
    .bv-reading-progress-bar__fill {
        transition: none;
    }
}