/* =====================================================================
   Woulfe's K9 — Media gallery
   Depends on tokens.css.

   Shared slide stack and pagination, used by the training rows and the
   founder portrait. The frame carries `.wk9-gal` and positions itself; this
   file only handles what goes inside it, so each component keeps its own
   radius, ratio and elevation.
   ===================================================================== */

/* One slide per picture or clip, all stacked in the frame. Only the active
   one is visible, so a portrait shot and a landscape one can follow each
   other without the frame changing height. */
.wk9-gal__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--k9-duration-slow) var(--k9-ease);
}

.wk9-gal__slide.is-active { opacity: 1; }

/* Pagination ----------------------------------------------------------- */

/* Segmented bars on the glass. Each bar is also the timer: its fill runs for
   exactly the dwell, so what is on screen and what the clock is doing cannot
   drift apart. Positioned bottom-right by default; components that already
   have something in that corner move it. */
.wk9-gal__pager {
    position: absolute;
    right: var(--k9-space-5);
    bottom: var(--k9-space-5);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--k9-space-2);
    padding: var(--k9-space-3) var(--k9-space-4);
    border-radius: var(--k9-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(var(--k9-black-rgb), 0.42);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--k9-shadow-inset);
}

/* Two classes: BeTheme styles bare <button>, and would otherwise hand this a
   radius and a background of its own. See DESIGN-SYSTEM.md §12, rule 9. */
.wk9-gal .wk9-gal__page {
    position: relative;
    display: block;
    width: 30px;
    height: 3px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--k9-radius-pill);
    background: rgba(255, 255, 255, 0.28);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    overflow: hidden;
    transition:
        width var(--k9-duration) var(--k9-ease),
        background var(--k9-duration-fast) var(--k9-ease);
}

.wk9-gal .wk9-gal__page:hover { background: rgba(255, 255, 255, 0.5); }
.wk9-gal .wk9-gal__page.is-active { width: 46px; }

.wk9-gal .wk9-gal__page:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
}

/* Generous invisible hit area — a 3px-tall target is not a target. */
.wk9-gal__page::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
}

.wk9-gal__page-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--k9-action);
    transform: scaleX(0);
    transform-origin: left center;
}

.wk9-gal__page.is-active .wk9-gal__page-fill {
    animation: wk9-gal-fill var(--wk9-gal-dwell, 5s) linear forwards;
}

/* Paused means paused — the bar has to stop with the pictures, or it runs to
   the end and then nothing happens, which reads as broken. */
.wk9-gal.is-paused .wk9-gal__page.is-active .wk9-gal__page-fill {
    animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
    /* Nothing rotates on its own here, so the active bar simply sits full
       rather than animating toward an advance that never comes. */
    .wk9-gal__page.is-active .wk9-gal__page-fill {
        animation: none;
        transform: scaleX(1);
    }

    .wk9-gal__slide { transition: none; }
}