/**
 * Лёгкие микро-анимации: только transform/opacity/цвета, без layout.
 * Подключается после styles.css — не блокирует отрисовку.
 */
:root {
  --motion-fast: 140ms;
  --motion-base: 180ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* —— Кнопки —— */
.btn {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease-out);
}

.btn:active:not(:disabled):not([disabled]):not(.btn-icon) {
  transform: scale(0.97);
}

.btn:disabled,
.btn[disabled] {
  transition: opacity var(--motion-fast) ease;
}

/* —— Ссылки и навигация —— */
a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) {
  transition: color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

.navbar .nav-link {
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

/* —— Поля форм —— */
.form-control,
.form-select,
.form-check-input {
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

/* —— Карточки каталога на главной —— */
.cat {
  transition:
    transform var(--motion-base) var(--motion-ease-out),
    box-shadow var(--motion-base) ease,
    border-color var(--motion-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(18, 19, 26, 0.1);
  }
}

/* —— Модальные окна и offcanvas —— */
.modal.fade .modal-dialog {
  transition: transform var(--motion-base) var(--motion-ease-out);
}

.offcanvas {
  transition: transform var(--motion-base) var(--motion-ease-out);
}

.modal-backdrop.fade {
  transition: opacity var(--motion-base) ease;
}

/* —— Пагинация Bootstrap —— */
.pagination .page-link {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease-out);
}

.pagination .page-link:active:not(.disabled) {
  transform: scale(0.96);
}

/* —— Аккордеон —— */
.accordion-button {
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.accordion-button::after {
  transition: transform var(--motion-base) var(--motion-ease-out);
}

/* —— Админка —— */
.admin-nav__link {
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease-out);
}

.admin-main .btn:not(.btn-icon) {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease-out);
}

.admin-card {
  transition:
    box-shadow var(--motion-base) ease,
    border-color var(--motion-base) ease;
}

.catalog-tree-link,
.catalog-addons-admin__panel {
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

/* —— Тосты и мини-корзина —— */
.florista-min-order-toast,
.florista-cart-added-toast,
.mini-cart {
  transition:
    opacity var(--motion-base) var(--motion-ease-out),
    transform var(--motion-base) var(--motion-ease-out);
}

/* —— Состояние «загрузка» для кнопок с aria-busy —— */
.btn[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
  }

  .btn:active:not(:disabled):not([disabled]):not(.btn-icon),
  .pagination .page-link:active:not(.disabled) {
    transform: none;
  }

  .cat:hover {
    transform: none;
  }
}