/* ============================================================
   Микроанимации — единый слой
   Подключается глобально в base.html после cart-ux.css.
   Область: кнопки/иконки + модалки. Дропдауны и мега-меню
   уже анимированы в main.css — здесь не дублируются.
   ============================================================ */

/* --- Кнопки: тактильный отклик при нажатии ---
   Сохраняем исходный `all 0.35s` для цвета/фона и добавляем
   быстрый transform, чтобы press ощущался отзывчиво. */
.btn {
    transition: all 0.35s ease, transform 0.12s ease;
}
.btn:active {
    transform: scale(0.97);
}

/* --- Иконки в шапке: лёгкий подъём на hover.
   Поднимаем весь контейнер .header-nav__icon, чтобы синий бейдж
   счётчика двигался вместе с иконкой, а не оставался на месте. --- */
.header-nav__icon {
    transition: transform 0.25s ease;
}
.header-nav__link:hover .header-nav__icon,
.dropdown-toggler:hover .header-nav__icon {
    transform: translateY(-2px);
}

/* --- Бейдж счётчика: pop при добавлении в корзину/избранное/сравнение.
   Класс badge-pop навешивается из JS (cart.js, wishlist.js, compare.js)
   в момент обновления счётчика. --- */
@keyframes badge-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.6); }
    60%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}
.header-nav__icon span.badge-pop {
    animation: badge-pop 0.45s ease;
}

/* --- Ссылка-стрелка "Перейти к товарам" в карусели брендов:
   стрелка сдвигается вправо на hover --- */
.brands-item__link svg {
    transition: transform 0.3s ease;
}
.brands-item:hover .brands-item__link svg {
    transform: translateX(4px);
}

/* --- Кнопка «В избранное» (и соседние) на странице товара и в карточках:
   иконка плавно синеет на hover и в активном (добавленном) состоянии.
   Активное состояние — класс .active на svg, вешает wishlist.js. --- */
.cart-btn svg path,
.card__nav-item svg path {
    transition: fill 0.25s ease, stroke 0.25s ease;
}
.favorite-init:hover svg path,
.favorite-init .active path {
    fill: #2b2c7c;
    stroke: #2b2c7c;
}

/* --- Модалки: появление scale + fade.
   Анимация перезапускается при каждом открытии, т.к. оверлей
   переходит display:none → block (jQuery fadeIn). --- */
@keyframes micro-modal-in {
    from { opacity: 0; transform: translateY(24px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay .modal {
    animation: micro-modal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Доступность: уважаем системную настройку «уменьшить движение».
   Гасит анимации и transition по всему сайту, не только этот слой. --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}