/*
 * Необязательные анимации и переходы элементов интерфейса.
 * Подключаются после основных стилей; не управляют данными и отправкой форм.
 * При отключённой анимации содержимое остаётся доступным.
 */

/*
 * ЕЦК · Необязательные анимации интерфейса
 * Подключать ПОСЛЕ site.css в base.html.
 * Не требуется JavaScript или отдельные библиотеки.
 * В старых браузерах неизвестные CSS-свойства игнорируются.
 * Не задаем opacity:0 / visibility:hidden вне @keyframes — контент всегда виден.
 */

/* 2. Тактильная обратная связь на кнопках, без изменения размеров */
.btn, .mini-button {
    -webkit-transition: background-color .18s ease, border-color .18s ease,
                        box-shadow .18s ease, -webkit-transform .18s ease;
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}
.btn:not([disabled]):hover,
.mini-button:not([disabled]):hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 5px 13px rgba(60,92,180,.13);
}
.btn:not([disabled]):active,
.mini-button:not([disabled]):active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    box-shadow: none;
}

/* 3. Ссылки меню и навигация по этапам */
.wizard-step, .wizard-step-circle, .action-link {
    -webkit-transition: color .18s ease, background-color .18s ease,
                        border-color .18s ease, -webkit-transform .18s ease;
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, transform .18s ease;
}
.action-link:hover .action-icon {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}
.action-icon {
    -webkit-transition: -webkit-transform .18s ease;
    transition: transform .18s ease;
}
.wizard-step:hover .wizard-step-circle {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
}

/* 4. Плавная реакция полей ввода */
input[type="text"], input[type="password"], select, textarea,
input:not([type]) {
    -webkit-transition: border-color .18s ease, box-shadow .18s ease,
                        background-color .18s ease;
    transition: border-color .18s ease, box-shadow .18s ease,
                background-color .18s ease;
}

/* 5. Деликатное появление основных панелей и уведомлений */
.panel, .login-card {
    /* Без fill-mode: после анимации не остаётся transform у карточки. */
    -webkit-animation: eck-rise-in .30s ease-out;
    animation: eck-rise-in .30s ease-out;
}
.notice {
    -webkit-animation: eck-slide-in .25s ease-out both;
    animation: eck-slide-in .25s ease-out both;
}

/* 6. Строки таблиц: без движения, чтобы матрица не прыгала */
.data-table tbody tr td {
    -webkit-transition: background-color .15s ease;
    transition: background-color .15s ease;
}

/* 7. Ключевые кадры анимаций, используемых выше */
@-webkit-keyframes eck-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes eck-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes eck-rise-in {
    from { opacity: 0; -webkit-transform: translateY(8px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes eck-rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes eck-slide-in {
    from { opacity: 0; -webkit-transform: translateY(-8px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes eck-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Учитываем системную настройку уменьшения движения. */
@media (prefers-reduced-motion: reduce) {
    .panel,
    .login-card,
    .notice {
        -webkit-animation: none;
        animation: none;
    }
}