/* ================================================================
   Site Activity + AI Brand Marquee
   Light: Claude Design System  |  Dark: Binance Design System
   ================================================================ */

/* Big-tech "hairline divider" treatment: a thin border above and below
   the activity strip so it reads as a calm separator between hero and
   the rest of the page, instead of just floating in whitespace. */
.site-activity-section {
    padding: var(--bn-space-md, 16px) 0;
    position: relative;
    z-index: 0;
    border-block: 1px solid var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .site-activity-section {
    border-block-color: var(--bn-hairline-on-dark, #2b3139);
}

/* ── Side-by-side row ── */
.site-activity-row {
    display: flex;
    align-items: center;
    gap: var(--bn-space-lg, 24px);
}

.site-activity-col {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 35%;
}

.ai-brands-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}


/* ================================================================
   Left: Site Activity – Fade-in/out vertical rotation
   ================================================================ */

.site-activity {
    position: relative;
    height: 48px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 280px;
}

/* ── Item ── */
.site-activity__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bn-space-sm, 12px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--bn-ease-out, ease),
                transform 0.5s var(--bn-ease-out, ease);
    pointer-events: none;
    white-space: nowrap;
}

.site-activity__item.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.site-activity__item.is-leaving {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* ── Avatar ── */
.site-activity__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--bn-hairline-on-light, #f0eee6);
}

[data-bs-theme="dark"] .site-activity__avatar {
    box-shadow: 0 0 0 1px var(--bn-hairline-on-dark, #2b3139);
}

/* ── Name ── */
.site-activity__name {
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--bn-ink, #141413);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .site-activity__name {
    color: var(--bn-on-dark, #ffffff);
}

/* ── Info text ── */
.site-activity__info {
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 13px;
    color: var(--bn-muted, #5e5d59);
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-activity__info a {
    color: var(--bn-muted, #5e5d59);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-activity__info a:hover {
    color: var(--bn-primary, #c96442);
}

[data-bs-theme="dark"] .site-activity__info,
[data-bs-theme="dark"] .site-activity__info a {
    color: var(--bn-muted, #707a8a);
}

[data-bs-theme="dark"] .site-activity__info a:hover {
    color: var(--bn-primary, #fcd535);
}

/* ── Time ── */
.site-activity__time {
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 12px;
    color: var(--bn-border-strong, #d1cfc5);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .site-activity__time {
    color: var(--bn-hairline-on-dark, #2b3139);
}


/* ================================================================
   Right: AI Brand Marquee
   ================================================================ */

.ai-brands {
    overflow: hidden;
    -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%);
}

.ai-brands__track {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: scroll-brands-half 25s linear infinite;
}

.ai-brands__track[data-repeat="4"] {
    animation-name: scroll-brands-quarter;
}

.ai-brands:hover .ai-brands__track {
    animation-play-state: paused;
}

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

@keyframes scroll-brands-quarter {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}

/* ── Tag (pill) ──
   Hover state shifts to a soft background fill (instead of a border /
   shadow change) so the row reads as quiet chips that gently emphasize
   on hover, matching big-tech "tag-row" patterns. */
.ai-brands__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 8px;
    border-radius: var(--bn-radius-pill, 999px);
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s var(--bn-ease-out, ease),
                border-color 0.2s var(--bn-ease-out, ease);
    cursor: default;

    background: var(--bn-canvas-light, #ffffff);
    border: 1px solid var(--bn-hairline-on-light, #f0eee6);
}

a.ai-brands__tag {
    cursor: pointer;
}

a.ai-brands__tag:hover,
a.ai-brands__tag:focus-visible {
    background: var(--bn-surface-strong-light, #e8e6dc);
    border-color: var(--bn-border-strong, #d1cfc5);
}

[data-bs-theme="dark"] .ai-brands__tag {
    background: var(--bn-surface-card-dark, #1e2329);
    border-color: var(--bn-hairline-on-dark, #2b3139);
}

[data-bs-theme="dark"] a.ai-brands__tag:hover,
[data-bs-theme="dark"] a.ai-brands__tag:focus-visible {
    background: var(--bn-surface-elevated-dark, #2b3139);
    border-color: var(--bn-muted, #707a8a);
}

/* ── Logo ── */
.ai-brands__logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Brand name ── */
.ai-brands__name {
    font-family: var(--bn-font-body, Inter, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--bn-ink, #141413);
}

[data-bs-theme="dark"] .ai-brands__name {
    color: var(--bn-on-dark, #ffffff);
}


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

@media (max-width: 991.98px) {
    .site-activity {
        min-width: 240px;
    }
}

@media (max-width: 767.98px) {
    .site-activity-section {
        padding: var(--bn-space-sm, 12px) 0;
    }

    .site-activity-row {
        flex-direction: column;
        gap: var(--bn-space-sm, 12px);
        align-items: stretch;
    }

    .site-activity-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .site-activity {
        min-width: 0;
        justify-content: center;
    }

    .site-activity {
        height: 40px;
    }

    .site-activity__avatar {
        width: 20px;
        height: 20px;
    }

    .site-activity__name {
        font-size: 12px;
    }

    .site-activity__info {
        font-size: 12px;
        max-width: 180px;
    }

    .site-activity__time {
        display: none;
    }

    .ai-brands__logo {
        width: 20px;
        height: 20px;
    }

    .ai-brands__name {
        font-size: 12px;
    }

    .ai-brands__tag {
        padding: 4px 12px 4px 6px;
    }
}

@media (max-width: 575.98px) {
    .site-activity__info {
        max-width: 140px;
    }

    .site-activity__item {
        gap: 6px;
    }

    .ai-brands__track {
        gap: 8px;
    }
}