/* Smooth category ↔ products transitions (works without a Vite rebuild). */

.category-rail {
    scroll-behavior: smooth;
}

.category-card {
    scroll-snap-align: center;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.category-card-media {
    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-card-active .category-card-media {
    transform: translateY(-3px) scale(1.02);
}

.category-card-title {
    transition: color 0.3s ease;
}

.menu-products-grid {
    transition:
        opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.38s ease;
    will-change: opacity, transform;
}

.menu-products-grid.is-filtering {
    pointer-events: none;
    opacity: 0.35;
    transform: translateY(10px) scale(0.985);
    filter: saturate(0.8) blur(0.4px);
}

@keyframes menu-product-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-product-enter,
.menu-group-enter {
    animation: menu-product-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

#menu-products {
    scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    .menu-product-enter,
    .menu-group-enter {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .menu-products-grid,
    .menu-products-grid.is-filtering,
    .category-rail,
    .category-card-media,
    .category-card {
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .menu-products-grid.is-filtering {
        opacity: 0.55;
        transform: none;
        filter: none;
    }

    .category-card-active .category-card-media {
        transform: none;
    }
}