/* ================================
   KEYWORDS CAROUSEL - Premium Minimal
   ================================ */
.kw-carousel-section {
    margin: var(--spacing-3xl) 0;
    overflow: hidden;
    position: relative;
}

/* Ambient glow behind carousel */
.kw-carousel-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 300%;
    background: radial-gradient(ellipse at center,
        rgba(152, 37, 152, 0.08) 0%,
        transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.kw-carousel-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xl);
    text-align: left;
    letter-spacing: var(--letter-spacing-tight);
}

.kw-carousel-container {
    position: relative;
    mask-image: linear-gradient(90deg,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%);
}

.kw-carousel-static {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: flex-start;
}

.kw-carousel-row {
    display: flex;
    gap: var(--spacing-sm);
    white-space: nowrap;
    will-change: transform;
}

.kw-carousel-row.animate {
    animation: scroll-left 180s linear infinite;
}

.kw-carousel-row.animate-reverse {
    animation: scroll-right 200s linear infinite;
}

.kw-carousel-row.animate-slow {
    animation: scroll-left 220s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.kw-item {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    min-height: 44px;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.kw-item:hover {
    background: rgba(152, 37, 152, 0.15);
    border-color: rgba(228, 145, 201, 0.4);
    color: var(--color-text-primary);
    transform: scale(1.02);
}

.kw-item.active {
    background: linear-gradient(135deg,
        rgba(152, 37, 152, 0.3) 0%,
        rgba(228, 145, 201, 0.2) 100%);
    border-color: #E491C9;
    color: white;
    box-shadow: 0 4px 20px rgba(152, 37, 152, 0.3);
}

/* Preloaded Content */
.kw-content-container {
    margin-top: var(--spacing-2xl);
}

.kw-content {
    display: none;
    padding: var(--spacing-xl);
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(152, 37, 152, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    animation: contentFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-card);
}

.kw-content.active {
    display: block;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pause animation on hover */
.kw-carousel-row:hover {
    animation-play-state: paused;
}