/* Performance Optimizations for Mobile */

/* Critical CSS - Above the fold content */
.hero,
.header,
.mobile-menu-btn {
  will-change: transform;
}

/* Optimize animations */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .card,
  .nav a {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .hero__image img {
    transition: transform 0.3s ease;
  }
}

/* GPU acceleration for smooth animations */
.btn,
.card,
.nav a,
.mobile-menu-btn {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize images */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Lazy loading optimization */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Critical resource hints */
.hero__image img {
  content-visibility: auto;
  contain-intrinsic-size: 866px 859px;
}

/* Optimize fonts */
@font-face {
  font-family: 'ShahabCustom';
  src: url('../fonts/Digi Nazanin Plus Bold Circle.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200D, U+25CC;
}

/* Reduce layout shifts */
.container {
  contain: layout;
}

.card {
  contain: layout style;
}

/* Optimize scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Mobile-specific performance */
@media (max-width: 960px) {
  /* Reduce animations on mobile for better performance */
  .btn:hover,
  .card:hover {
    transform: none;
  }
  
  /* Optimize touch interactions */
  .btn,
  .card,
  .nav a {
    touch-action: manipulation;
  }
  
  /* Reduce paint complexity */
  .hero__image img {
    image-rendering: auto;
  }
}

/* Battery saving mode */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
  
  .card {
    border: 2px solid var(--border);
  }
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
  .hero__image img {
    filter: brightness(0.9);
  }
}

/* Print optimizations */
@media print {
  .hero__image img {
    max-width: 300px;
    height: auto;
  }
  
  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}