*,
*::before,
*::after { box-sizing: border-box; }

/* ━━ Wrapper ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.aafe-mrs-wrapper {
    width: 500px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /* NO overflow:hidden — let the absolute panel clip via clip-path only, so hover pop-out effects don't get flattened */
    color: #222;

    --aafe-mrs-row-height: 80px;
    --aafe-mrs-total: 6;
    --aafe-mrs-hover-scale: 1.03;
    --aafe-mrs-hover-lift: 3px;
    --aafe-mrs-glow-color: rgba(59,130,246,0.4);
    --aafe-mrs-slide-px: 8px;
    --aafe-mrs-hover-dur: 200ms;
    --aafe-mrs-divider-color: rgba(0,0,0,0.12);
}

/* ── Row Items (sit BELOW the marquee overlay) ── */
.aafe-mrs-item {
    position: relative;
    height: var(--aafe-mrs-row-height);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    letter-spacing: -0.01em;
    color: #222;
    text-decoration: none;
    /* z-index 1 — marquee panel (z-index 2) sits on top */
    z-index: 1;
    transition: color var(--aafe-mrs-hover-dur, 200ms) ease,
                background-color var(--aafe-mrs-hover-dur, 200ms) ease,
                opacity var(--aafe-mrs-hover-dur, 200ms) ease,
                transform var(--aafe-mrs-hover-dur, 200ms) ease,
                box-shadow var(--aafe-mrs-hover-dur, 200ms) ease;
}

/* Inherit border-radius to prevent background bleeding if applied */
.aafe-mrs-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.aafe-mrs-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Divider between rows */
.aafe-mrs-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    pointer-events: none;
    /* z-index 3 so it draws above the marquee panel on non-active rows */
    z-index: 3;
}
.aafe-mrs-item:last-child::after {
    display: none;
}

/*
 * DIVIDER FIX: The item::after z-index is scoped to the item's stacking context
 * and stays BELOW the marquee panel (z-index 2).
 * Solution: Draw ALL dividers via a wrapper-level ::after at z-index 3 using
 * a repeating-linear-gradient — this layer sits ABOVE the marquee panel.
 */
.aafe-mrs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(var(--aafe-mrs-row-height) - 1px),
        var(--aafe-mrs-divider-color, rgba(0,0,0,0.12)) calc(var(--aafe-mrs-row-height) - 1px),
        var(--aafe-mrs-divider-color, rgba(0,0,0,0.12)) var(--aafe-mrs-row-height)
    );
    /* Don't draw a line after the very last row */
    background-size: 100% calc(var(--aafe-mrs-total) * var(--aafe-mrs-row-height));
    background-repeat: no-repeat;
}

/* ── Hover Effects ────────────────────────────── */
.aafe-mrs-wrapper[data-hover="lift"] .aafe-mrs-item:hover {
    transform: translateY(calc(-1 * var(--aafe-mrs-hover-lift, 3px)));
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.aafe-mrs-wrapper[data-hover="scale"] .aafe-mrs-item:hover {
    transform: scale(var(--aafe-mrs-hover-scale, 1.03));
}
.aafe-mrs-wrapper[data-hover="slide-left"] .aafe-mrs-item:hover {
    transform: translateX(var(--aafe-mrs-slide-px, 8px));
}
.aafe-mrs-wrapper[data-hover="glow"] .aafe-mrs-item:hover {
    box-shadow: inset 0 0 0 1px var(--aafe-mrs-glow-color),
                0 0 18px var(--aafe-mrs-glow-color);
}
.aafe-mrs-wrapper[data-hover="bold"] .aafe-mrs-item:hover {
    font-weight: 700;
}

/* ── Marquee Panel (overlay ON TOP of items) ──── */
.aafe-mrs-marquee-list {
    position: absolute;
    top:    0;
    left:   0;
    right:  0;
    bottom: 0;
    background-color: #fff;
    border-radius: inherit; /* inherit wrapper's border-radius so background doesn't bleed out */

    /* KEY: above items (z-index 1), but pointer-events:none so clicks reach items */
    z-index: 2;
    pointer-events: none;

    overflow: hidden;

    /* start invisible */
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 300ms ease;
    will-change: clip-path;
}

/* Edge fade */
.aafe-mrs-marquee-list.has-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
}

/* ── Marquee Row ──────────────────────────────── */
.aafe-mrs-marquee-row {
    height: var(--aafe-mrs-row-height);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.aafe-mrs-marquee-row img {
    width: 150px;
    height: 50px;
    object-fit: cover;
    border-radius: 99px;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Marquee Inner (scrolling strip) ─────────── */
.aafe-mrs-marquee-inner {
    height: var(--aafe-mrs-row-height);
    width: max-content;
    display: flex;
    align-items: center;
    gap: 48px;
    padding-left: 48px;
    animation: aafe-mrs-marquee linear 12s infinite;
    will-change: transform;
}

.aafe-mrs-marquee-inner span {
    white-space: nowrap;
    opacity: 0.7;
    flex-shrink: 0;
    line-height: 1;
    color: #222;
}

@keyframes aafe-mrs-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}