/* ============================================================================
   Анимации
   ============================================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

main {
    opacity: 0;
    /* Начальное состояние - невидимый контент, появится с fade in эффектом */
    transition: opacity 400ms ease-in-out;
    /* Оптимизация рендеринга для предотвращения ряби */
    will-change: opacity;
    transform: translateZ(0); /* Принудительное аппаратное ускорение */
    backface-visibility: hidden; /* Предотвращает мерцание */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Класс для плавного появления контента */
main.page-loaded {
    opacity: 1;
}

header.app-header {
    opacity: 1;
    /* Header не анимируется для статичности */
    transform: translateZ(0); /* Аппаратное ускорение */
    will-change: auto;
}

/* SPA transitions: плавный fade/slide при смене контента */
main.spa-leave {
    opacity: 0;
    transform: translateY(2px) translateZ(0); /* Уменьшаем смещение для плавности */
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

main.spa-enter {
    opacity: 0;
    transform: translateY(2px) translateZ(0);
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}

main.spa-enter-active {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* Оптимизация для стабильного отображения статичных элементов на дашборде */
.status-filter-panel,
#filtersForm,
.dashboard-substitute-button,
.dashboard-actions-bar {
    /* Аппаратное ускорение для плавности */
    transform: translateZ(0);
    /* Предотвращение перерисовки при SPA навигации */
    will-change: auto;
}