/* Hover-анимации иконок бокового меню */

.nav-icon {
    overflow: visible;
    perspective: 64px;
}

.nav-icon svg {
    overflow: visible;
}

.nav-icon__layer {
    transform-box: fill-box;
    transform-origin: center;
}

/* ——— Новый расчёт: лёгкое увеличение ——— */
@keyframes nav-icon-calc-new {
    0%,
    100% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.14);
    }
}

.nav-item[data-nav-icon="calc-new"]:hover .nav-icon svg {
    animation: nav-icon-calc-new 0.45s ease;
}

/* ——— Открыть расчёт: приподнять «папку» ——— */
@keyframes nav-icon-calc-open {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }
    40% {
        transform: translateY(-2px) rotate(-4deg);
    }
}

.nav-item[data-nav-icon="calc-open"]:hover .nav-icon svg {
    animation: nav-icon-calc-open 0.5s ease;
    transform-origin: 12px 18px;
}

/* ——— Журнал: перелистывание строк календаря ——— */
@keyframes nav-icon-cal-page {
    0%,
    100% {
        transform: perspective(48px) rotateX(0);
        opacity: 1;
    }
    35% {
        transform: perspective(48px) rotateX(-32deg) translateY(-1px);
        opacity: 0.55;
    }
    55% {
        transform: perspective(48px) rotateX(10deg) translateY(0.5px);
        opacity: 1;
    }
}

.nav-item[data-nav-icon="journal"]:hover .nav-icon__layer--cal-page {
    animation: nav-icon-cal-page 0.55s ease;
    transform-origin: 12px 16px;
}

/* ——— Монтаж: поворот ключа ——— */
@keyframes nav-icon-assembly {
    0%,
    100% {
        transform: rotate(0);
    }
    30% {
        transform: rotate(-18deg);
    }
    60% {
        transform: rotate(12deg);
    }
}

.nav-item[data-nav-icon="assembly"]:hover .nav-icon svg {
    animation: nav-icon-assembly 0.55s ease;
    transform-origin: 10px 10px;
}

/* ——— График работы: смена листа ——— */
@keyframes nav-icon-schedule {
    0%,
    100% {
        transform: rotate(0) scale(1);
    }
    40% {
        transform: rotate(-6deg) scale(1.06);
    }
}

.nav-item[data-nav-icon="schedule"]:hover .nav-icon svg {
    animation: nav-icon-schedule 0.5s ease;
    transform-origin: 12px 12px;
}

/* ——— Замеры: «линейка» ——— */
@keyframes nav-icon-measurer {
    0%,
    100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(1.12);
    }
}

.nav-item[data-nav-icon="measurer"]:hover .nav-icon svg {
    animation: nav-icon-measurer 0.45s ease;
    transform-origin: left center;
}

/* ——— Воронка: блоки по очереди ——— */
@keyframes nav-icon-funnel {
    0%,
    100% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.1);
    }
}

.nav-item[data-nav-icon="funnel"]:hover .nav-icon svg {
    animation: nav-icon-funnel 0.45s ease;
}

/* ——— Заказы: перелистывание листов на планшете ——— */
@keyframes nav-icon-orders-page-1 {
    0%,
    100% {
        transform: perspective(56px) rotateX(0);
        opacity: 1;
    }
    30% {
        transform: perspective(56px) rotateX(-38deg) translateY(-1.5px);
        opacity: 0.35;
    }
    50% {
        transform: perspective(56px) rotateX(14deg) translateY(0.5px);
        opacity: 1;
    }
}

@keyframes nav-icon-orders-page-2 {
    0%,
    100% {
        transform: perspective(56px) rotateX(0);
        opacity: 1;
    }
    38% {
        transform: perspective(56px) rotateX(-28deg) translateY(-1px);
        opacity: 0.45;
    }
    58% {
        transform: perspective(56px) rotateX(10deg);
        opacity: 1;
    }
}

.nav-item[data-nav-icon="orders"]:hover .nav-icon__page--1 {
    animation: nav-icon-orders-page-1 0.65s ease;
    transform-origin: 12px 12px;
}

.nav-item[data-nav-icon="orders"]:hover .nav-icon__page--2 {
    animation: nav-icon-orders-page-2 0.65s ease 0.07s;
    transform-origin: 12px 16px;
}

.nav-item[data-nav-icon="orders"]:hover .nav-icon__layer--clip {
    animation: nav-icon-orders-clip 0.65s ease;
}

@keyframes nav-icon-orders-clip {
    0%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-0.5px);
    }
}

/* ——— Доставка: машина трогается с места ——— */
@keyframes nav-icon-delivery {
    0%,
    100% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(2.5px);
    }
    55% {
        transform: translateX(-0.5px);
    }
}

.nav-item[data-nav-icon="delivery"]:hover .nav-icon svg {
    animation: nav-icon-delivery 0.55s ease;
}

/* ——— Технолог: лёгкий наклон блокнота ——— */
@keyframes nav-icon-technologist {
    0%,
    100% {
        transform: rotate(0);
    }
    45% {
        transform: rotate(-8deg);
    }
}

.nav-item[data-nav-icon="technologist"]:hover .nav-icon svg {
    animation: nav-icon-technologist 0.5s ease;
    transform-origin: 12px 14px;
}

/* ——— Комплектующие: 3D-поворот куба ——— */
@keyframes nav-icon-components {
    0%,
    100% {
        transform: rotateY(0) rotateX(0);
    }
    50% {
        transform: rotateY(22deg) rotateX(-12deg);
    }
}

.nav-item[data-nav-icon="components"]:hover .nav-icon svg {
    animation: nav-icon-components 0.55s ease;
    transform-origin: center;
}

/* ——— Шаблоны: лист поднимается ——— */
@keyframes nav-icon-templates {
    0%,
    100% {
        transform: translateY(0);
    }
    45% {
        transform: translateY(-2px);
    }
}

.nav-item[data-nav-icon="templates"]:hover .nav-icon svg {
    animation: nav-icon-templates 0.45s ease;
}

/* ——— Прайс-листы: пульс щита ——— */
@keyframes nav-icon-prices {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.nav-item[data-nav-icon="prices"]:hover .nav-icon svg {
    animation: nav-icon-prices 0.45s ease;
}

/* ——— Уведомления: звон колокольчика ——— */
@keyframes nav-icon-bell {
    0%,
    100% {
        transform: rotate(0);
    }
    15% {
        transform: rotate(14deg);
    }
    30% {
        transform: rotate(-12deg);
    }
    45% {
        transform: rotate(8deg);
    }
    60% {
        transform: rotate(-5deg);
    }
}

.nav-item[data-nav-icon="notifications"]:hover .nav-icon__layer--bell {
    animation: nav-icon-bell 0.65s ease;
    transform-origin: 12px 4px;
}

@keyframes nav-icon-bell-clapper {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(1px);
    }
    50% {
        transform: translateX(-1px);
    }
}

.nav-item[data-nav-icon="notifications"]:hover .nav-icon__layer--bell-clapper {
    animation: nav-icon-bell-clapper 0.65s ease;
}

/* ——— Дашборд: линия графика «рисуется» ——— */
@keyframes nav-icon-chart-line {
    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-2px);
        opacity: 0.85;
    }
}

.nav-item[data-nav-icon="analytics"]:hover .nav-icon__layer--chart-line {
    animation: nav-icon-chart-line 0.5s ease;
}

/* ——— Техника ОАЗИС: мигание экрана ——— */
@keyframes nav-icon-oasis {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

.nav-item[data-nav-icon="oasis"]:hover .nav-icon svg {
    animation: nav-icon-oasis 0.5s ease;
}

/* ——— Настройки: поворот «солнца» ——— */
@keyframes nav-icon-settings {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(90deg);
    }
}

.nav-item[data-nav-icon="settings"]:hover .nav-icon svg {
    animation: nav-icon-settings 0.55s ease;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .nav-item[data-nav-icon]:hover .nav-icon svg,
    .nav-item[data-nav-icon]:hover .nav-icon__layer {
        animation: none !important;
    }
}