/*
 * Плавна поява випадаючих меню Bootstrap: клас dropdown-animated на .dropdown-menu (меню «Редагувати» на сторінці
 * товару, сортування в каталозі). Підключається сторінкою через @section Styles.
 * Меню завжди в розмітці, закрите — прозоре й visibility: hidden (поза Tab-навігацією й читачами екрана);
 * Bootstrap лише перемикає .show. Кнопці меню потрібен data-bs-display="static": інакше Popper пише свій transform
 * у style і анімація зсуву губиться. Позицію меню (top/left/right) задавати в його власних стилях: Bootstrap знімає
 * data-bs-popper (а з ним і свою позицію) одразу при закритті — без цього меню підстрибує, поки згасає.
 * Налаштування в стилях меню: --dropdown-display (block | flex), --dropdown-origin (звідки меню «виростає»).
 */

.dropdown-menu.dropdown-animated {
    display: var(--dropdown-display, block);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transform-origin: var(--dropdown-origin, top center);
    transition: opacity 0.15s ease-in, transform 0.15s ease-in, visibility 0s linear 0.15s;
}

.dropdown-menu.dropdown-animated.show {
    display: var(--dropdown-display, block);
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s;
}

/* Пункти з'являються слідом один за одним */
.dropdown-animated > * {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s, transform 0.12s;
}

.dropdown-animated.show > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.dropdown-animated.show > :nth-child(2) {
    transition-delay: 0.04s;
}

.dropdown-animated.show > :nth-child(3) {
    transition-delay: 0.08s;
}

.dropdown-animated.show > :nth-child(n + 4) {
    transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.dropdown-animated,
    .dropdown-menu.dropdown-animated.show,
    .dropdown-animated > *,
    .dropdown-animated.show > * {
        transform: none;
        transition: none;
    }
}