/**
 * sklare. Logo Marquee — Apple Product Lineup Edition
 *
 * Surface gray bg. Infinite scroll. Desaturated logos.
 */


/* =================================================================
   SECTION
   ================================================================= */

.sklare-marquee-section {
    position: relative;
    width: 100%;
    padding: 50px 0;
    overflow: hidden;
}

.sklare-marquee-section__label {
    text-align: center;
    margin-bottom: 20px;
}

.sklare-marquee-section__label span {
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--text-muted);
}


/* =================================================================
   WRAPPER
   ================================================================= */

.marquee-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}


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

.marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: marquee 55s linear infinite;
    will-change: transform;
}


/* =================================================================
   LOGOS
   ================================================================= */

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.logo-item img {
    height: 100%;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.2);
    transition: filter 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%) opacity(1);
}


/* =================================================================
   KEYFRAME
   ================================================================= */

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}


/* =================================================================
   REDUCED MOTION & RESPONSIVE
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

@media (max-width: 767px) {
    .sklare-marquee-section { padding: 30px 0; }
    .logo-item { height: 28px; }
    .marquee-track { gap: 48px; }
}