/* ==========================================================
   Logo Grid Gallery - Frontend Styles
   ========================================================== */

.mcb-section .mcb-wrap .mcb-item-ya2raxnrp .mfn-divider-inner .divider-label {
    font-family: 'Syne', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #778AA9 !important;
}

.lgg-grid {
    display: grid;
    grid-template-columns: repeat(var(--lgg-cols-eff, var(--lgg-cols, 9)), minmax(0, 1fr));
    width: calc(100% * var(--lgg-cols-eff, var(--lgg-cols, 9)) / var(--lgg-cols, 9));
    margin-left: var(--lgg-ml, 0);
    margin-right: var(--lgg-mr, auto);
    box-sizing: border-box;
    border-top: var(--lgg-border-width, 1px) var(--lgg-border-style, solid) var(--lgg-border-color, rgba(255,255,255,0.12));
    border-left: var(--lgg-border-width, 1px) var(--lgg-border-style, solid) var(--lgg-border-color, rgba(255,255,255,0.12));
}

.lgg-cell {
    background: var(--lgg-bg, transparent);
    border-right: var(--lgg-border-width, 1px) var(--lgg-border-style, solid) var(--lgg-border-color, rgba(255,255,255,0.12));
    border-bottom: var(--lgg-border-width, 1px) var(--lgg-border-style, solid) var(--lgg-border-color, rgba(255,255,255,0.12));
    border-radius: var(--lgg-radius, 0px);
    aspect-ratio: 1 / 1;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lgg-padding, 22%);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.lgg-cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.lgg-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(100%) opacity(var(--lgg-opacity, 0.55));
    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
    will-change: filter, transform;
}

/* ----- Hover: restore original color ----- */
.lgg-cell:hover .lgg-logo {
    filter: grayscale(0%) opacity(1);
}

/* ----- Animation: Pop / Scale (default) ----- */
.lgg-anim-pop .lgg-cell:hover .lgg-logo {
    transform: scale(1.18);
}

/* ----- Animation: Lift Up ----- */
.lgg-anim-lift .lgg-cell .lgg-logo {
    transition: filter 0.4s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1), opacity 0.4s ease;
}
.lgg-anim-lift .lgg-cell:hover .lgg-logo {
    transform: translateY(-8px) scale(1.05);
}

/* ----- Animation: Flip ----- */
.lgg-anim-flip .lgg-cell {
    perspective: 600px;
}
.lgg-anim-flip .lgg-cell .lgg-logo {
    transition: filter 0.5s ease, transform 0.6s ease, opacity 0.4s ease;
    transform-style: preserve-3d;
}
.lgg-anim-flip .lgg-cell:hover .lgg-logo {
    transform: rotateY(360deg);
}

/* ----- Animation: Pulse ----- */
.lgg-anim-pulse .lgg-cell:hover .lgg-logo {
    animation: lgg-pulse 0.9s ease-in-out infinite;
}
@keyframes lgg-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* ----- Animation: Rotate ----- */
.lgg-anim-rotate .lgg-cell .lgg-logo {
    transition: filter 0.5s ease, transform 0.55s ease, opacity 0.4s ease;
}
.lgg-anim-rotate .lgg-cell:hover .lgg-logo {
    transform: rotate(8deg) scale(1.1);
}

/* ----- Animation: Fade only (no transform) ----- */
.lgg-anim-fade .lgg-cell:hover .lgg-logo {
    transform: none;
}

/* ==========================================================
   Scroll Reveal — "Focus-Rise"
   A slow, premium entrance: each tile drifts up while gently
   scaling to 1 and fading in, cascading tile-by-tile via a
   per-cell stagger (--lgg-i). Triggered by JS adding .lgg-in
   once the grid scrolls into view.

   NOTE: this deliberately animates only opacity + transform on
   the cells. Do NOT add `filter` or a lingering `will-change`
   here — those promote every cell to its own compositing layer
   and make the shared 1px cell borders drop out at fractional
   device pixels (missing grid lines). The blur premium touch is
   applied to the logo image instead (below), which has no border.
   ========================================================== */
.lgg-reveal .lgg-cell {
    opacity: 0;
    transform: translateY(38px) scale(0.96);
    /* Slow, luxurious easing (easeOutExpo-ish) + per-tile stagger. */
    transition:
        opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--lgg-i, 0) * 0.07s);
}

.lgg-reveal.lgg-in .lgg-cell {
    opacity: 1;
    transform: none;
}

/* Premium "focus" touch on the logo only (no borders to break):
   it develops from a soft blur to sharp as its tile rises. The
   slow, staggered timing lives on the .lgg-in state so it only
   applies to the entrance — hover keeps its own snappy 0.4s. */
.lgg-reveal:not(.lgg-in) .lgg-logo {
    filter: grayscale(100%) opacity(var(--lgg-opacity, 0.55)) blur(12px);
}
.lgg-reveal.lgg-in .lgg-logo {
    transition:
        filter 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s ease,
        opacity 0.4s ease;
    transition-delay: calc(var(--lgg-i, 0) * 0.07s);
}
/* Once revealed, hover restores the snappy hover timing. */
.lgg-reveal.lgg-in .lgg-cell:hover .lgg-logo {
    transition:
        filter 0.4s ease,
        transform 0.4s ease,
        opacity 0.4s ease;
    transition-delay: 0s;
}

/* No-JS: show everything immediately so content is never hidden. */
@media (scripting: none) {
    .lgg-reveal .lgg-cell {
        opacity: 1;
        transform: none;
    }
    .lgg-reveal .lgg-logo {
        filter: grayscale(100%) opacity(var(--lgg-opacity, 0.55));
    }
}

/* ----- Incomplete last row: CENTRED logos + filler cells -----
   The last row's logos are explicitly placed in the middle columns (per
   breakpoint) so they stay centred, and the side columns are completed with
   empty filler cells — giving a full bordered rectangle in every column.
   Each breakpoint hides the fillers it doesn't need (its last row is full). */
.lgg-fill {
    pointer-events: none;
}
@media (min-width: 1025px) {
    .lgg-lr-d   { grid-row: var(--r-d); grid-column: var(--c-d); }
    .lgg-fill   { grid-row: var(--fr-d); grid-column: var(--fc-d); }
    .lgg-fill-hd { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .lgg-lr-t   { grid-row: var(--r-t); grid-column: var(--c-t); }
    .lgg-fill   { grid-row: var(--fr-t); grid-column: var(--fc-t); }
    .lgg-fill-ht { display: none !important; }
}
@media (max-width: 600px) {
    .lgg-lr-m   { grid-row: var(--r-m); grid-column: var(--c-m); }
    .lgg-fill   { grid-row: var(--fr-m); grid-column: var(--fc-m); }
    .lgg-fill-hm { display: none !important; }
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .lgg-grid {
        grid-template-columns: repeat(var(--lgg-cols-eff-tab, var(--lgg-cols-tab, 5)), minmax(0, 1fr));
        width: calc(100% * var(--lgg-cols-eff-tab, var(--lgg-cols-tab, 5)) / var(--lgg-cols-tab, 5));
    }
}

@media (max-width: 600px) {
    .lgg-grid {
        grid-template-columns: repeat(var(--lgg-cols-eff-mob, var(--lgg-cols-mob, 3)), minmax(0, 1fr));
        width: calc(100% * var(--lgg-cols-eff-mob, var(--lgg-cols-mob, 3)) / var(--lgg-cols-mob, 3));
    }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .lgg-logo,
    .lgg-cell {
        transition: filter 0.2s ease, opacity 0.2s ease !important;
        animation: none !important;
    }
    .lgg-cell:hover .lgg-logo {
        transform: none !important;
    }
    /* Skip the scroll-reveal entrance entirely. */
    .lgg-reveal .lgg-cell {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    /* Drop the reveal blur so nothing renders out of focus. */
    .lgg-reveal:not(.lgg-in) .lgg-logo {
        filter: grayscale(100%) opacity(var(--lgg-opacity, 0.55)) !important;
    }
}