/* ===== "Connect all your work" integration pills =====
   Shared by the static public pages that carry the homepage's integrations
   marquee (lp/ai-priorities.html, partners.html). Mirrors
   src/assets/styles/css/home.css (.integration-pills*) value for value. */

/* Pills bleed to the viewport edges, past the section's side margins, and
   fade out over the outer 10% each side (Figma overlay 14909:72951). A mask
   rather than an overlay so hovered pills fade the same way. */
.ap-pills {
    display: flex;
    flex-direction: column;
    gap: 0.9875rem; /* 15.8px between rows */
    width: 100vw;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* 1920 frame: the chips stop at the content box, inside the margins. */
@media (min-width: 90rem) {
    .ap-pills {
        width: 100%;
    }
}

/* Classic marquee: each row's pills are rendered twice and the row
   slides by exactly -50%, so the loop reset is seamless. The second
   row plays in reverse. --marquee-duration is set from the row width. */
@keyframes ap-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ap-pills-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5133rem; /* 8.21px */
    width: max-content;
    min-width: 100%;
    animation: ap-marquee var(--marquee-duration, 60s) linear infinite;
}

.ap-pills-row:nth-child(2) {
    animation-direction: reverse;
}

/* Figma "chip": the same 58.66px chip in every frame. */
.ap-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.88rem;
    height: 3.6664rem;
    padding: 0 1.7599rem 0 1.4666rem;
    border: 0.0473rem solid var(--color-greyscale-700);
    border-radius: 100rem;
    font-size: 1.1rem;
    line-height: 1.4666rem;
    color: var(--color-greyscale-50);
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ap-pill img {
    flex-shrink: 0;
    width: 1.1732rem;
    height: 1.1732rem;
    object-fit: contain;
}

/* The marquee keeps running underneath on hover (PR #2153). */
@media (hover: hover) and (pointer: fine) {
    .ap-pill:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-white);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-pills {
        overflow-x: auto;
    }

    .ap-pills-row {
        animation: none;
    }

    /* Hide the aria-hidden duplicates that only exist for the loop. */
    .ap-pills-row [aria-hidden="true"] {
        display: none !important;
    }
}