/* ============================================================
   OpsTree Logo Marquee — Optimized
   ------------------------------------------------------------
   Changes from original:
   • content-visibility: auto on wrappers (skips paint off-screen)
   • Reserved aspect ratio on .logo-item img (prevents CLS)
   • Marquee respects prefers-reduced-motion
   • Animation play-state controlled by JS via IntersectionObserver
   ============================================================ */

.infinity-main-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
    background: transparent;
    padding: 0 60px;
    box-sizing: border-box;
}

.infinity-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    content-visibility: auto;
    contain-intrinsic-size: 100% 120px;
}

.infinity-track,
.infinity-track-reverse {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    will-change: transform;
}

.infinity-track         { animation: infinite-scroll         32s linear infinite; }
.infinity-track-reverse { animation: infinite-scroll-reverse 32s linear infinite; }

.logo-item {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

@media (min-width: 1025px) { .logo-item { width: calc((100vw - 120px) / 6); } }
@media (max-width: 1024px) { .logo-item { width: calc((100vw - 120px) / 4); } }
@media (max-width: 767px)  { .logo-item { width: calc((100vw - 120px) / 2); } }

.logo-item img {
    height: 75px;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    /* Prevents CLS until image decodes */
    aspect-ratio: 2 / 1;
}

@keyframes infinite-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes infinite-scroll-reverse {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.infinity-wrapper:hover .infinity-track,
.infinity-wrapper:hover .infinity-track-reverse { animation-play-state: paused; }

/* Paused by IntersectionObserver when scrolled off-screen */
.infinity-track.is-paused,
.infinity-track-reverse.is-paused { animation-play-state: paused; }

/* Case-study plus button */
.logo-item--case-study { position: relative; }

.logo-plus-btn {
    position: absolute;
    top: 6px;
    right: 14px;
    height: 26px;
    width: 26px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    overflow: hidden;
    white-space: nowrap;
    transition: width .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cline x1='6' y1='1' x2='6' y2='11' stroke='%23555' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='1' y1='6' x2='11' y2='6' stroke='%23555' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.logo-plus-btn:hover {
    width: 116px;
    background-color: #222;
    background-image: none;
    border-color: #222;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.logo-plus-btn:hover::after {
    content: 'Read Case Study';
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .2px;
    font-family: sans-serif;
}

/* Popup */
.logo-case-study-popup {
    position: fixed;
    z-index: 999999;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 18px 20px 20px;
    width: 300px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    display: none;
    opacity: 0;
    transition: opacity .18s ease;
    font-family: sans-serif;
}
.logo-case-study-popup .popup-company-name { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 8px; }
.logo-case-study-popup .popup-quote-icon   { font-size: 26px; color: #aaa; line-height: 1; margin-bottom: 6px; }
.logo-case-study-popup .popup-quote-text   { font-size: 14px; color: #333; line-height: 1.55; margin-bottom: 12px; }
.logo-case-study-popup .popup-author       { font-size: 13px; color: #666; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .infinity-track,
    .infinity-track-reverse { animation: none !important; }
}