/* ===========================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   =========================================== */

/* CSS для предотвращения FOUC и CLS */
.preload {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loaded {
  opacity: 1;
}

/* Критичные стили для предотвращения layout shift */
.img-container {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

.img-container::before {
  content: '';
  display: block;
  padding-bottom: 56.25%; /* 16:9 aspect ratio по умолчанию */
}

.img-container.aspect-1-1::before {
  padding-bottom: 100%; /* 1:1 aspect ratio */
}

.img-container.aspect-4-3::before {
  padding-bottom: 75%; /* 4:3 aspect ratio */
}

.img-container.aspect-3-2::before {
  padding-bottom: 66.67%; /* 3:2 aspect ratio */
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Lazy loading placeholder */
.lazy-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Оптимизация производительности */
.will-change-transform {
  will-change: transform;
}

.will-change-scroll {
  will-change: scroll-position;
}

.will-change-opacity {
  will-change: opacity;
}

/* GPU acceleration для анимаций */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Smooth scrolling с учетом prefers-reduced-motion */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch feedback для мобильных */
.touch-feedback {
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2);
  tap-highlight-color: rgba(255, 107, 53, 0.2);
}

.touch-active {
  transform: scale(0.98);
  opacity: 0.8;
  transition: all 0.1s ease;
}

/* Оптимизация для ретина дисплеев */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .retina-optimized {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Системные шрифты для лучшей производительности */
.system-font {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 
               'Fira Sans', 'Droid Sans', 'Helvetica Neue', 
               sans-serif;
}

/* Оптимизация рендеринга текста */
.optimized-text {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Предотвращение layout thrashing */
.no-layout-thrash {
  contain: layout style paint;
}

/* Безопасная область для устройств с вырезами */
.safe-area {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Динамическая высота viewport для мобильных браузеров */
:root {
  --vh: 1vh;
}

.full-height {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100);
}

/* Оптимизация для печати */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tr,
  img {
    page-break-inside: avoid;
  }
  
  img {
    max-width: 100% !important;
  }
  
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}