/* Категории — компактная 3D-карусель VELORA */
.categories {
    position: relative;
    padding: 0 0 2px;
    background: transparent;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

.categories-stage {
    position: relative;
    touch-action: none;
}

.categories-carousel {
    position: relative;
    width: 100%;
    height: 64px;
    touch-action: none;
    user-select: none;
    perspective: 820px;
    overscroll-behavior: none;
}

.categories-carousel::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(46, 230, 214, 0.08),
        rgba(255, 255, 255, 0.16),
        rgba(46, 230, 214, 0.08),
        transparent
    );
    pointer-events: none;
}

.category {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 124px;
    height: 40px;
    margin-left: -62px;
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(12, 17, 26, 0.88);
    color: rgba(238, 243, 248, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    will-change: transform, opacity, filter;
    transition:
        transform 0.48s cubic-bezier(.22, 1, .36, 1),
        opacity 0.4s ease,
        filter 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease,
        color 0.4s ease,
        box-shadow 0.4s ease;
    -webkit-tap-highlight-color: transparent;
}

.category.active {
    width: 148px;
    height: 44px;
    margin-left: -74px;
    margin-top: -22px;
    color: #ffffff;
    border-color: rgba(46, 230, 214, 0.55);
    background:
        linear-gradient(180deg, rgba(46, 230, 214, 0.22), rgba(12, 17, 26, 0.96) 72%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.38),
        0 0 22px rgba(46, 230, 214, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.category.active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 42%);
    pointer-events: none;
}

.category-icon {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.48s cubic-bezier(.22, 1, .36, 1);
}

.category.active .category-icon {
    transform: scale(1.12) rotate(-6deg);
    filter: drop-shadow(0 0 8px rgba(46, 230, 214, 0.45));
}

.category-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.category.active .category-name {
    font-size: 12px;
}

.category.active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2EE6D6;
    box-shadow:
        0 0 8px #2EE6D6,
        0 0 16px rgba(46, 230, 214, 0.55);
}

.categories-fade {
    position: absolute;
    top: 0;
    width: 18%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

.categories-fade.left {
    left: 0;
    background: linear-gradient(90deg, #05070D, transparent);
}

.categories-fade.right {
    right: 0;
    background: linear-gradient(-90deg, #05070D, transparent);
}

.categories-chevron {
    position: absolute;
    top: 50%;
    z-index: 24;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(8, 12, 20, 0.72);
    color: rgba(122, 240, 230, 0.82);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.categories-chevron svg {
    width: 12px;
    height: 12px;
}

.categories-chevron.is-left {
    left: 8px;
}

.categories-chevron.is-right {
    right: 8px;
}

.categories-chevron:active {
    transform: scale(0.94);
    background: rgba(46, 230, 214, 0.18);
}

.categories-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(238, 243, 248, 0.28);
}

.categories-hint-arrow {
    display: inline-flex;
    color: rgba(46, 230, 214, 0.55);
    animation: categoryHintPulse 1.8s ease-in-out infinite;
}

.categories-hint-arrow.is-right {
    animation-delay: 0.9s;
}

.categories-hint-arrow svg {
    width: 10px;
    height: 10px;
}

@keyframes categoryHintPulse {
    0%, 100% { opacity: 0.28; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(0); }
}

.categories-orbit,
.categories-edge,
.categories-deck,
.categories-grid,
.categories-rail,
.category-featured,
.category-tile,
.category-btn {
    display: none;
}

@media (max-width: 500px) {
    .categories-carousel {
        height: 62px;
    }

    .category {
        width: 114px;
        margin-left: -57px;
    }

    .category.active {
        width: 138px;
        margin-left: -69px;
    }

    .categories-fade {
        width: 14%;
    }

    .categories-chevron.is-left {
        left: 4px;
    }

    .categories-chevron.is-right {
        right: 4px;
    }
}