/* =========================================
   HOME — TRUST STRIP (between Hero and Section 2)
   A thin, self-contained logo marquee: certification and
   logistics partner marks scrolling right-to-left forever.

   ---------------------------------------------------------
   HOW THE INFINITE LOOP WORKS
   ---------------------------------------------------------
   The track holds SIX identical groups of the four logos and
   is animated from 0 to -16.6667% — exactly one group's width
   (100% / 6). Because every group is identical, the frame at
   -16.6667% is pixel-identical to the frame at 0, so the
   animation restarting is invisible: the row never ends and
   never shows a gap.

   Six copies (not two) is deliberate: two copies of four logos
   is only ~1000px wide, which is narrower than a desktop
   viewport, so the track ran out and left dead space on the
   right. Six copies span roughly 4500px+, comfortably wider
   than any screen. If you add or remove logos, keep the copy
   count in front-page.php and the -16.6667% below in sync
   (percentage = 100 / number of copies).

   ---------------------------------------------------------
   HOW THE LOGOS ARE SIZED
   ---------------------------------------------------------
   Each logo gets its OWN height rather than one shared value.
   A single shared height does not work: an emblem (BIS) that
   fills a near-square canvas reads far larger than a wide
   all-caps wordmark (Blue Dart) at the same pixel height, and
   marks that include a tagline (Sequel) need extra height for
   the wordmark itself to hold its own.

   The source PNGs have been cropped to their exact ink bounds,
   so the heights below map directly to how big each mark
   actually appears — tune them here and nowhere else.
   ========================================= */

.trust-strip {
    position: relative;
    z-index: 10;
    padding: 2.25rem 0;
    overflow: hidden;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);

    /* ---- Tunables ---- */
    --trust-gap: 5.5rem;
    --trust-speed: 45s;
    --trust-logo-filter: invert(1) grayscale(1) brightness(1.6) contrast(1.05);
    --trust-logo-opacity: 0.62;

    /* Per-logo optical heights (see note above). */
    --trust-h-bis: 46px;
    --trust-h-gjepc: 42px;
    --trust-h-sequel: 34px;
    --trust-h-bluedart: 26px;

    /* Soft fade at both edges so logos drift in and out of view
       instead of being sliced off by the viewport. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.trust-strip__viewport {
    display: flex;
    width: max-content;
    animation: trust-scroll var(--trust-speed) linear infinite;
    will-change: transform;
}

/* Pause on hover so a visitor can actually look at a mark. */
.trust-strip:hover .trust-strip__viewport {
    animation-play-state: paused;
}

.trust-strip__group {
    display: flex;
    align-items: center;
    gap: var(--trust-gap);
    padding-right: var(--trust-gap);
    flex: 0 0 auto;
}

/* Every logo sits in a fixed-height box and is centred inside it,
   so the differing per-logo heights all share one baseline and the
   row cannot jitter vertically as it scrolls. */
.trust-strip__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    flex: 0 0 auto;
}

.trust-strip__logo {
    display: block;
    width: auto;
    max-width: none;
    filter: var(--trust-logo-filter);
    opacity: var(--trust-logo-opacity);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.trust-strip__logo--bis      { height: var(--trust-h-bis); }
.trust-strip__logo--gjepc    { height: var(--trust-h-gjepc); }
.trust-strip__logo--sequel   { height: var(--trust-h-sequel); }
.trust-strip__logo--bluedart { height: var(--trust-h-bluedart); }

.trust-strip__item:hover .trust-strip__logo {
    opacity: 1;
    transform: scale(1.06);
}

@keyframes trust-scroll {
    from { transform: translate3d(0, 0, 0); }
    /* One group width = 100% / 6 copies. */
    to   { transform: translate3d(-16.6667%, 0, 0); }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .trust-strip {
        padding: 1.6rem 0;
        --trust-gap: 3.25rem;
        --trust-speed: 30s;
        --trust-h-bis: 36px;
        --trust-h-gjepc: 33px;
        --trust-h-sequel: 27px;
        --trust-h-bluedart: 20px;
    }

    .trust-strip__item {
        height: 42px;
    }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .trust-strip__viewport {
        animation: none;
        /* Static, centred row — no motion at all. */
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Show only the first group; the other five exist purely to
       feed the scroll. */
    .trust-strip__group ~ .trust-strip__group {
        display: none;
    }

    .trust-strip__group {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.25rem;
        padding-right: 0;
    }
}