.lr-soomi-logo-marquee {
    --lr-marquee-width: 90.7407vw;
    --lr-marquee-height: 183px;

    --lr-marquee-gap: 104px;

    --lr-marquee-border-width: 1px;
    --lr-marquee-border-style: solid;
    --lr-marquee-border-color: #B25532;
    --lr-marquee-border-radius: 0px;

    --lr-marquee-background: transparent;

    --lr-marquee-padding-left: 0px;
    --lr-marquee-padding-right: 0px;

    --lr-marquee-image-opacity: 1;
    --lr-marquee-image-filter: none;

    --lr-marquee-hover-scale: 1;
    --lr-marquee-hover-opacity: 1;

    --lr-marquee-transition: 250ms;

    position: relative;

    width: var(--lr-marquee-width);
    max-width: 100%;

    height: var(--lr-marquee-height);

    margin-left: auto;
    margin-right: auto;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;

    background:
        var(--lr-marquee-background);

    border:
        var(--lr-marquee-border-width)
        var(--lr-marquee-border-style)
        var(--lr-marquee-border-color);

    border-radius:
        var(--lr-marquee-border-radius);
}


.lr-soomi-logo-marquee *,
.lr-soomi-logo-marquee *::before,
.lr-soomi-logo-marquee *::after {
    box-sizing: border-box;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.lr-soomi-logo-marquee__viewport {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
    height: 100%;

    padding-left:
        var(--lr-marquee-padding-left);

    padding-right:
        var(--lr-marquee-padding-right);

    overflow: hidden;
}


/* =========================================================
   TRACK
   ========================================================= */

.lr-soomi-logo-marquee__track {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    width: max-content;

    gap:
        var(--lr-marquee-gap);

    transform:
        translate3d(0, 0, 0);

    will-change: transform;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;
}


/* =========================================================
   GROUP
   ========================================================= */

.lr-soomi-logo-marquee__group {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    width: max-content;

    gap:
        var(--lr-marquee-gap);
}


/* =========================================================
   ITEM
   ========================================================= */

.lr-soomi-logo-marquee__item {
    display: flex;

    flex: 0 0 auto;

    align-items: center;

    justify-content: center;

    margin: 0;

    padding: 0;

    line-height: 0;

    text-decoration: none;
}


/* =========================================================
   IMAGE
   ========================================================= */

.lr-soomi-logo-marquee__image {
    display: block;

    flex: 0 0 auto;

    /*
     * Non usiamo moltiplicazioni calc() tra custom properties:
     * la larghezza finale viene pre-calcolata dal controller JS
     * per compatibilità uniforme Chromium / Firefox / Safari.
     */
    width:
        var(
            --lr-logo-rendered-width,
            var(--lr-logo-width)
        );

    height: auto;

    max-width: none;

    margin: 0;

    padding: 0;

    opacity:
        var(
            --lr-logo-rendered-opacity,
            1
        );

    filter:
        var(--lr-marquee-image-filter);

    transform:
        translate3d(
            0,
            var(--lr-logo-offset-y),
            0
        )
        scale(1);

    transform-origin:
        center center;

    transition:
        transform
        var(--lr-marquee-transition)
        ease,
        opacity
        var(--lr-marquee-transition)
        ease;

    user-select: none;

    -webkit-user-select: none;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;
}


/* =========================================================
   HOVER
   ========================================================= */

.lr-soomi-logo-marquee__item:hover
.lr-soomi-logo-marquee__image {
    transform:
        translate3d(
            0,
            var(--lr-logo-offset-y),
            0
        )
        scale(
            var(--lr-marquee-hover-scale)
        );

    opacity:
        var(
            --lr-logo-hover-rendered-opacity,
            var(--lr-logo-rendered-opacity, 1)
        );
}


/* =========================================================
   FOCUS
   ========================================================= */

.lr-soomi-logo-marquee__item:focus-visible {
    outline:
        1px solid
        var(--lr-marquee-border-color);

    outline-offset: 8px;
}


/* =========================================================
   LOADING
   ========================================================= */

.lr-soomi-logo-marquee[data-lr-ready="false"]
.lr-soomi-logo-marquee__track {
    visibility: hidden;
}


.lr-soomi-logo-marquee[data-lr-ready="true"]
.lr-soomi-logo-marquee__track {
    visibility: visible;
}