/**
 * Отклик на наведение мыши (только ПК): плитки недель в «Готовых наборах» и «Свободном меню» и
 * плашки разделов («Завтраки», «Супы»…) на странице недели и на корне «Меню текущей недели»
 * (там список разделов — ul.categories-tile внутри .__menu_setup__block, но выглядит плашками, а не плитками).
 * Элемент чуть вырастает (2,5 %) и приподнимается, серый фон переливается теми же цветами :root, что и нижняя
 * плашка при приёме блюда (menu-plate.js); перелив идёт, пока мышь на элементе. Только устройства с мышью;
 * при reduced-motion — без увеличения и движения. Увеличивается лист без вложенных fixed-окон, трансформ безопасен.
 */
@media (hover: hover) and (pointer: fine) {
    /* Что подсвечиваем: плитка недели (весь li) и плашка раздела (её видимая часть — span внутри li) */
    :is(.categories-tile > li.categories-icons__item:not(.__menu_setup__block *),
        .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner) {
        --vv-hover-shadow: 0 10px 24px rgba(0, 0, 0, .14);
        position: relative;
        isolation: isolate;                 /* перелив лежит под текстом и над серым фоном */
        cursor: pointer;
        transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background-color .2s !important;
    }
    .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner {
        --vv-hover-shadow: 0 3px 8px rgba(0, 0, 0, .13);
    }
    :is(.categories-tile > li.categories-icons__item:not(.__menu_setup__block *),
        .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(110deg, transparent 0, var(--vv-cream2, #ffeee6) 22%, var(--vv-blue, #d3f5ff) 42%,
            var(--vv-fiolet, #f5e2ff) 62%, var(--vv-cream, #ffdbc3) 82%, transparent 100%);
        background-size: 300% 100%;
        transition: opacity .3s ease;
    }
    :is(.categories-tile > li.categories-icons__item:not(.__menu_setup__block *),
        .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner):is(:hover, :focus-within) {
        z-index: 2;
        transform: scale(1.025);
        box-shadow: var(--vv-hover-shadow) !important;
    }
    /* у плашки раздела фон при наведении не темнеет (его красит перелив) */
    .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner:hover {
        background: var(--vv-gray4);
    }
    :is(.categories-tile > li.categories-icons__item:not(.__menu_setup__block *),
        .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner):is(:hover, :focus-within)::after {
        opacity: .75;
        animation: vv-card-sheen 2.6s ease-in-out infinite alternate;
    }
    /* лента плашек режет всё, что выходит за её край (overflow-y: hidden) — даём воздух для тени и увеличения */
    .__menu_setup__block ul:is(.categories-icons, .categories-tile) {
        padding: 6px 10px 14px;
        margin: -6px -10px -14px;
        width: calc(100% + 20px);
    }
    @keyframes vv-card-sheen {
        from { background-position: 100% 0; }
        to   { background-position: 0 0; }
    }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    :is(.categories-tile > li.categories-icons__item:not(.__menu_setup__block *),
        .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner):is(:hover, :focus-within) { transform: none; }
    :is(.categories-tile > li.categories-icons__item:not(.__menu_setup__block *),
        .__menu_setup__block ul:is(.categories-icons, .categories-tile) .categories-icons__item > .categories-icons__inner):is(:hover, :focus-within)::after { animation: none; }
}