/* ===========================================================================
 * MU-PLUGIN CSS: /wp-content/mu-plugins/bar-scroll-hero/assets/css/bar-scroll-hero.css
 * ======================================================================= */
/* Barathonien – Scroll Hero */
.sr-hero {
    position: relative;
    height: var(--hero-h, 70vh);
    min-height: 420px;
    overflow: hidden;
    isolation: isolate;
    background: #000
}

.sr-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0
}

.sr-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0)
}

.sr-hero__marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--hero-offset, 6vh);
    z-index: 1;
    margin: 0;
    pointer-events: none;
    font-family: "Tholes", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    color: var(--hero-color, #fff);
    font-size: var(--hero-font, clamp(48px, 12vw, 220px))
}

.sr-hero__line {
    display: block;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0, 0, 0)
}

/* marge visible + sécurité glyphes pour éviter les lettres “croquées” */
.sr-hero__text {
    padding-inline: calc(var(--edge-gap, 4vw) + 0.6ch)
}

@supports (scroll-timeline: auto) {

    .sr-hero[data-mode="auto"] .sr-hero__line,
    .sr-hero[data-mode="css"] .sr-hero__line {
        animation: sr-hero-x linear both;
        animation-timeline: view();
        /* lié à la LIGNE, pas au bloc */
        animation-range: entry 0% exit 100%;
        /* 0 quand la ligne entre, 100% quand elle sort */
    }

    @keyframes sr-hero-x {
        from {
            transform: translate3d(0, 0, 0)
        }

        to {
            transform: translate3d(calc(-1*var(--max-shift, 0px)), 0, 0)
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-hero__line {
        animation: none !important;
        transform: none !important
    }
}