/* ==========================================================================
   DeL Partners Marquee — Frontend
   v1.1.0

   DESIGN PRINCIPLES
   1. No permanent GPU layers in CSS — JS sets will-change right before
      the animation starts.  Permanent layers exhaust the compositing
      budget on GPU-constrained devices (e.g. A12).
   2. Guard every animation property with !important to prevent theme/
      page-builder overrides (Elementor, Blocksy, etc.).
   3. Use CSS custom properties for all configurable values so the
      shortcode can set them inline and the media query can scale them.
   ========================================================================== */

/* --- Container --------------------------------------------------------- */

.del-partners-marquee {
    --del-logo-height: var( --del-logo-height-base, 64px );
    --del-gap:         var( --del-gap-base, 56px );

    overflow: hidden;
    padding: 16px 0;
}

/* --- Row --------------------------------------------------------------- */

.del-marquee-row {
    overflow: hidden;
    margin-bottom: calc( var( --del-gap ) * 0.6 );

    /* Edge fades — transparent-safe via CSS mask. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
}

.del-marquee-row:last-child {
    margin-bottom: 0;
}

/* --- Track ------------------------------------------------------------- */

.del-marquee-track {
    display: flex;
    width: max-content; /* Overridden by JS with explicit px after measurement. */
}

/* CRITICAL — Guard against global animation overrides.
   Elementor, Blocksy, and other themes/plugins can inject rules like
   `* { animation-timing-function: ease }` or attach entrance animations
   that override our linear timing.  Without these guards the marquee
   accelerates/decelerates on each loop — the "pushed forward" effect.  */
.del-partners-marquee .del-marquee-track {
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
    -webkit-animation-delay: 0s !important;
    animation-delay: 0s !important;
    -webkit-animation-direction: normal !important;
    animation-direction: normal !important;
}

/* --- Playback control -------------------------------------------------- */

/* Hover-pause only on devices with a real pointer (mouse / trackpad).
   On touch devices, scrolling the page can briefly trigger :hover on
   elements under the finger, which would pause the marquee mid-scroll. */
@media ( hover: hover ) {
    .del-marquee-ready:hover .del-marquee-track {
        -webkit-animation-play-state: paused !important;
        animation-play-state: paused !important;
    }
}

.del-marquee-hidden .del-marquee-track {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* --- Set --------------------------------------------------------------- */

.del-marquee-set {
    display: flex;
    align-items: center;
    gap: var( --del-gap );
    flex-shrink: 0;
    padding-right: var( --del-gap );
}

/* --- Logo item --------------------------------------------------------- */

.del-marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

a.del-marquee-item:focus-visible {
    outline: 2px solid #1965B0;
    outline-offset: 4px;
    border-radius: 4px;
}

.del-marquee-item img {
    display: block;
    height: var( --del-logo-height );
    width: auto;
    max-width: 200px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ==========================================================================
   Logo treatments
   ========================================================================== */

.del-style-full_colour .del-marquee-item {
    opacity: 1;
    filter: none;
}

.del-style-greyscale .del-marquee-item {
    opacity: 0.75;
    -webkit-filter: grayscale( 100% );
    filter: grayscale( 100% );
}
.del-style-greyscale .del-marquee-item:hover,
.del-style-greyscale .del-marquee-item:focus-visible {
    opacity: 1;
    -webkit-filter: grayscale( 0 );
    filter: grayscale( 0 );
}

.del-style-opacity .del-marquee-item {
    opacity: 0.7;
}
.del-style-opacity .del-marquee-item:hover,
.del-style-opacity .del-marquee-item:focus-visible {
    opacity: 1;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 768px ) {
    .del-partners-marquee {
        --del-logo-height: calc( var( --del-logo-height-base, 64px ) * 0.7 );
        --del-gap:         calc( var( --del-gap-base, 56px ) * 0.7 );
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
    .del-marquee-track {
        -webkit-animation-play-state: paused !important;
        animation-play-state: paused !important;
    }
}