.carousel-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    margin-top: var(--space-8);
}

.carousel-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    mask-image: linear-gradient(to right,
            transparent,
            black 10%,
            black 90%,
            transparent);
    -webkit-mask-image: linear-gradient(to right,
            transparent,
            black 10%,
            black 90%,
            transparent);
}

.carousel-track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.carousel-row:hover .carousel-track {
    animation-play-state: paused;
}

.scroll-left .carousel-track {
    animation-name: scrollLeft;
    animation-duration: 35s;
}

.carousel-row:nth-child(1) .carousel-track {
    animation-duration: 40s;
}

.carousel-row:nth-child(2) .carousel-track {
    animation-duration: 28s;
}

.carousel-row:nth-child(3) .carousel-track {
    animation-duration: 35s;
}

.carousel-row:nth-child(4) .carousel-track {
    animation-duration: 32s;
}

.scroll-right .carousel-track {
    animation-name: scrollRight;
    animation-duration: 30s;
}

.tech-card {
    flex-shrink: 0;
    width: 180px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);

    background: linear-gradient(135deg,
            rgba(45, 45, 45, 0.8) 0%,
            rgba(35, 35, 35, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm), var(--shadow-inner);
    transition: all 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tech-card.language {
    --border-color: rgba(66, 133, 244, 0.4);
}

.tech-card.frontend {
    --border-color: rgba(0, 230, 118, 0.4);
}

.tech-card.backend {
    --border-color: rgba(255, 152, 0, 0.4);
}

.tech-card.hardware {
    --border-color: rgba(156, 39, 176, 0.4);
}

.tech-card__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tech-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.3px;
}

.tech-card__category {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}