/* ========================================
   ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ ДЛЯ СТАРЫХ ПК
   ======================================== */

/* Определение предпочтений пользователя */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Отключение тяжёлых эффектов на слабых устройствах */
/* Определяем слабые устройства через media query */

/* Для устройств с низкой производительностью (мобильные, старые ПК) */
@media (max-width: 1024px), (hover: none) {
    /* Отключаем backdrop-filter - очень тяжёлый эффект */
    .navbar.modern-navbar,
    .balance-wrapper,
    .modern-dropdown,
    .navbar-collapse {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Упрощаем градиентный фон body */
    body::before {
        display: none !important;
    }
    
    /* Отключаем сложные анимации */
    .brand-icon,
    .stat-icon,
    .upload-icon,
    .warning-icon,
    .balance-wrapper .bi-wallet2,
    .feature-badge i {
        animation: none !important;
    }
    
    /* Упрощаем hover эффекты */
    .card:hover,
    .btn:hover,
    .preview-wrapper:hover,
    .service-card:hover {
        transform: none !important;
    }
    
    /* Отключаем тени при hover */
    .card:hover,
    .btn:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    }
    
    /* Упрощаем анимации карточек */
    .card,
    .preview-wrapper {
        animation: none !important;
    }
    
    /* Отключаем ::before и ::after псевдоэлементы с анимациями */
    .card::before,
    .preview-wrapper::before,
    .preview-wrapper::after,
    .preview-image-container::before,
    .preview-image-container::after,
    .upload-section::before,
    .btn::before,
    .navbar-brand::after {
        display: none !important;
    }
}

/* Дополнительная оптимизация для очень старых устройств */
@media (max-width: 768px) {
    /* Полностью отключаем все анимации */
    * {
        animation: none !important;
        transition: none !important;
    }
    
    /* Упрощаем градиенты до простых цветов */
    .navbar.modern-navbar {
        background: #667eea !important;
    }
    
    .btn-primary,
    .btn-orange,
    .service-icon-wrap {
        background: #667eea !important;
    }
    
    .btn-secondary,
    .btn-danger {
        background: #dc3545 !important;
    }
    
    /* Отключаем box-shadow для всех элементов */
    .card,
    .btn,
    .navbar,
    .preview-wrapper {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    /* Отключаем transform */
    *:hover {
        transform: none !important;
    }
}

/* ========================================
   ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ
   ======================================== */

/* Ленивая загрузка для изображений */
img[loading="lazy"] {
    opacity: 1;
}

/* Placeholder для изображений */
img:not([src]) {
    background: #f0f0f0;
}

/* ========================================
   ОПТИМИЗАЦИЯ СКРОЛЛА
   ======================================== */

/* Плавный скролл только для десктопов с мощными GPU */
@media (min-width: 1200px) and (hover: hover) {
    html {
        scroll-behavior: smooth;
    }
}

/* Для остальных - мгновенный скролл */
@media (max-width: 1199px), (hover: none) {
    html {
        scroll-behavior: auto !important;
    }
}

/* ========================================
   ОПТИМИЗАЦИЯ ШРИФТОВ
   ======================================== */

/* Предзагрузка системных шрифтов */
body {
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   WILL-CHANGE ОПТИМИЗАЦИЯ
   ======================================== */

/* Используем will-change только для элементов, которые действительно анимируются */
/* и только на мощных устройствах */
@media (min-width: 1200px) and (hover: hover) {
    .navbar {
        will-change: transform;
    }
}

/* ========================================
   CONTAIN PROPERTY ДЛЯ ИЗОЛЯЦИИ РЕНДЕРИНГА
   ======================================== */

/* Изолируем сложные компоненты */
.card,
.preview-wrapper,
.service-card {
    contain: layout style;
}

/* Изолируем контейнеры со списками */
#previewContainer,
.services-grid,
.themes-grid {
    contain: layout;
}

/* ========================================
   КРИТИЧНЫЙ CSS ДЛЯ ПЕРВОГО ОТОБРАЖЕНИЯ
   ======================================== */

/* Скрываем контент до загрузки стилей */
.js-loading * {
    visibility: hidden;
}

.js-loaded * {
    visibility: visible;
}