/* ===========================
   SLIDESHOW PROGRESS — [slideshow_progress]
   Story-style bars, bottom-right of the hero
   =========================== */

.ssp {
    --ssp-color: #ffffff;                       /* filled bar */
    --ssp-track: rgba(255, 255, 255, 0.3);      /* empty bar */
    --ssp-width: clamp(180px, 20vw, 280px);     /* total width */
    --ssp-offset-x: clamp(20px, 4vw, 64px);     /* from the right edge */
    --ssp-offset-y: clamp(20px, 4vw, 48px);     /* from the bottom edge */

    position: absolute;
    right: var(--ssp-offset-x);
    bottom: var(--ssp-offset-y);
    z-index: 5;
    display: flex;
    gap: 8px;
    width: var(--ssp-width);
}

.ssp[hidden] {
    display: none !important;
}

/* Each bar: 2px line with a taller invisible click area */
.ssp .ssp__bar {
    position: relative;
    flex: 1 1 0;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.ssp .ssp__bar::before,
.ssp__fill {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
}

.ssp .ssp__bar::before {
    background: var(--ssp-track);
    transition: background-color 0.2s ease;
}

.ssp .ssp__bar:hover::before {
    background: rgba(255, 255, 255, 0.55);
}

.ssp__fill {
    display: block;
    background: var(--ssp-color);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Slides already shown stay full */
.ssp__bar.is-done .ssp__fill {
    transform: scaleX(1);
}

/* Current slide fills over its duration (set by the script) */
.ssp__bar.is-active .ssp__fill {
    animation: ssp-fill linear forwards;
}

/* Autoplay stopped (e.g. last slide without loop): show the current bar full */
.ssp.is-stopped .ssp__bar.is-active .ssp__fill {
    animation: none;
    transform: scaleX(1);
}

@keyframes ssp-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.ssp .ssp__bar:focus {
    outline: none !important;
}

.ssp .ssp__bar:focus-visible {
    outline: 2px solid var(--ssp-color) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    .ssp__bar.is-active .ssp__fill {
        animation: none;
        transform: scaleX(1);
    }
}