/* ===========================
   HIGHLIGHTS MARQUEE SECTION
   =========================== */

.marquee-section {
    width: 100%;
    overflow: hidden;
    background: var(--bg-primary); /* Keeps it seamless with about section if it's primary */
    padding: 30px 0; /* Minimal height */
    position: relative;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll-marquee 35s linear infinite;
    will-change: transform;
}

/* Pause on hover for desktop (using hover media query so mobile is unaffected) */
@media (hover: hover) and (pointer: fine) {
    .marquee-section:hover .marquee-track {
        animation-play-state: paused;
    }
}

.marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.marquee-item {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-subtle);
    border: 1px solid color-mix(in srgb, var(--text-subtle) 40%, transparent);
    padding: 8px 16px;
    border-radius: 100px;
    margin: 0 15px; /* Spacing between items */
    white-space: nowrap;
}

/* Seamless loop animation */
@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .marquee-section {
        padding: 20px 0;
    }
    .marquee-item {
        font-size: 0.6rem;
        padding: 6px 12px;
        margin: 0 10px;
    }
}