/* Оптимизации производительности для сайта СпецСервис */

/* ==================== ЗАГРУЗКА КРИТИЧЕСКИХ СТИЛЕЙ ==================== */
/* Эти стили должны быть встроены в head для быстрой отрисовки */

/* Критические стили для первого экрана */
.header {
    will-change: transform;
    contain: layout style paint;
}

.hero {
    will-change: transform;
    contain: layout style paint;
}

.hero-slider {
    will-change: transform;
    transform: translateZ(0); /* Принудительное ускорение GPU */
}

/* ==================== ОПТИМИЗАЦИЯ АНИМАЦИЙ ==================== */
/* Используем transform вместо изменения свойств layout */

.service-card,
.about-item,
.price-card,
.contact-item {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.btn {
    will-change: transform;
    backface-visibility: hidden;
}

/* Оптимизированные переходы */
.service-card:hover,
.about-item:hover,
.price-card:hover {
    transform: translate3d(0, -5px, 0);
}

.btn-primary:hover {
    transform: translate3d(0, -2px, 0);
}

/* ==================== LAZY LOADING ==================== */
/* Изображения, которые не в первом экране */
.service-card img,
.about-item img,
.contact-item img {
    loading: lazy;
}

/* ==================== PRELOAD КРИТИЧЕСКИХ РЕСУРСОВ ==================== */
/* Эти директивы должны быть добавлены в HTML head */
/*
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="js/main.js" as="script">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
*/

/* ==================== СОДЕРЖИМОЕ КОНТЕЙНЕРА ==================== */
/* Оптимизация перерисовки */
.container {
    contain: layout style;
}

.services-grid,
.about-grid,
.prices-grid {
    contain: layout;
}

/* ==================== ОПТИМИЗАЦИЯ СКРОЛЛА ==================== */
/* Плавный скролл только где необходимо */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ==================== ОПТИМИЗАЦИЯ ШРИФТОВ ==================== */
/* Предотвращение FOIT/FOUT */
@font-face {
    font-family: 'Inter';
    font-display: swap; /* Быстрая замена шрифта */
}

/* ==================== КРИТИЧЕСКИЕ СТИЛИ ДЛЯ ПЕРВОГО ЭКРАНА ==================== */
/* Эти стили можно встроить inline в HTML для ускорения загрузки */

/* Базовые стили header и hero для быстрой отрисовки */
.critical-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background: rgba(26, 26, 26, 0.95);
    z-index: 1000;
}

.critical-hero {
    margin-top: 80px;
    height: 100vh;
    background: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================== МИНИФИКАЦИЯ И СЖАТИЕ ==================== */
/* Рекомендации для production:
   1. Минифицировать CSS и JS
   2. Включить gzip/brotli сжатие
   3. Оптимизировать изображения (WebP, AVIF)
   4. Использовать CDN для статических ресурсов
   5. Настроить кеширование браузера
*/

/* ==================== ПРЕДЗАГРУЗКА КРИТИЧЕСКИХ РЕСУРСОВ ==================== */
/* Добавить в HTML head:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="dns-prefetch" href="//api-maps.yandex.ru">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
*/

/* ==================== ОПТИМИЗАЦИЯ ДЛЯ CORE WEB VITALS ==================== */

/* LCP (Largest Contentful Paint) оптимизация */
.hero .slide-title {
    font-display: swap;
}

/* CLS (Cumulative Layout Shift) предотвращение */
.hero-slider {
    min-height: 600px; /* Фиксированная высота предотвращает сдвиг */
}

.service-card,
.about-item {
    min-height: 200px; /* Предотвращение сдвига при загрузке */
}

/* FID (First Input Delay) оптимизация */
.mobile-menu-btn,
.slider-btn,
.btn {
    touch-action: manipulation; /* Убирает задержку на мобильных */
}

/* ==================== ACCESSIBILITY IMPROVEMENTS ==================== */
/* Улучшения доступности */

/* Фокус для клавиатурной навигации */
.nav-link:focus,
.mobile-nav-link:focus,
.btn:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

/* Высокий контраст для текста */
@media (prefers-contrast: high) {
    .slide-description,
    .about-description,
    .service-description {
        color: var(--text-white) !important;
    }
}

/* Уменьшение движения для пользователей с проблемами вестибулярного аппарата */
@media (prefers-reduced-motion: reduce) {
    .hero-slider,
    .slider-btn,
    .service-card,
    .about-item {
        animation: none !important;
        transition: none !important;
    }
}

/* ==================== PRINT OPTIMIZATION ==================== */
/* Дополнительные стили для печати */
@media print {
    * {
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .slide-actions,
    .service-action {
        display: none;
    }
    
    .contact-details a[href^="tel:"]:after {
        content: " (" attr(href) ")";
    }
    
    .contact-details a[href^="mailto:"]:after {
        content: " (" attr(href) ")";
    }
}

/* ==================== DARK MODE SUPPORT ==================== */
/* Поддержка системной темной темы (уже реализовано по умолчанию) */
@media (prefers-color-scheme: dark) {
    /* Сайт уже использует темную тему по умолчанию */
}

/* Дополнительная поддержка светлой темы, если потребуется */
@media (prefers-color-scheme: light) {
    /* Можно добавить светлую тему при необходимости */
}