/* Image Optimization Styles - High Quality */

/* تحسين التحميل التدريجي للصور عالية الجودة */
img {
  /* منع layout shift */
  display: block;
  height: auto;
  max-width: 100%;
  
  /* تأثير تلاشي سلس عند التحميل */
  transition: opacity 0.3s ease-in-out, filter 0.4s ease-in-out;
  opacity: 1;
  
  /* تحسين الجودة */
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}

/* عند تحميل الصورة بنجاح */
img.loaded {
  opacity: 1;
  filter: blur(0px) brightness(1);
}

/* تأثير التحميل التدريجي */
img:not(.loaded) {
  animation: subtle-fade 0.6s ease-out;
}

@keyframes subtle-fade {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 1;
  }
}

/* تحسين الصور في المعرض والملف الشخصي */
.Projects__img,
.home__img,
.about__img {
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  
  /* الحفاظ على الدقة العالية */
  max-width: 100%;
  height: auto;
  
  /* تحسين شدة الألوان */
  filter: saturate(1.05) contrast(1.02);
}

/* تحسين الأداء على الاتصالات المختلفة */
@media (prefers-reduced-motion: reduce) {
  img {
    animation: none !important;
    transition: none !important;
  }
}

/* دعم الاتصالات المختلفة مع الحفاظ على الجودة */
:root[data-connection="3g"] img {
  /* نفس الجودة لكن مع تحسين بسيط */
  filter: saturate(1) contrast(1);
}

:root[data-connection="slow"] img {
  /* بدء التحميل بجودة عالية لكن بدون تأثيرات إضافية */
  filter: none;
}

:root[data-mode="data-saver"] img {
  /* الحفاظ على الجودة العالية */
  max-width: 100%;
}

/* دعم صيغ محسّنة (WebP, AVIF) */
picture {
  display: contents;
}

.image-placeholder {
  background: linear-gradient(90deg, rgba(200,200,200,0.1), rgba(255,255,255,0.1));
  background-size: 200% 100%;
  animation: subtle-loading 2s infinite;
}

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

/* منع CLS (Cumulative Layout Shift) */
img[width],
img[height] {
  max-width: 100%;
  height: auto;
}

/* تحسين الصور والرسومات */
.nav__logo-circle,
.footer__copy img,
.geometric-box {
  will-change: transform;
  backface-visibility: hidden;
}

/* تحسين جودة الصور على الشاشات عالية الدقة */
@media (min-resolution: 192dpi) {
  img {
    image-rendering: crisp-edges;
  }
}

/* تحسين الصور على أجهزة Retina */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-device-pixel-ratio: 2) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
  }
}

/* تحسين الأداء على الهواتف المحمولة مع الحفاظ على الجودة */
@media (max-width: 768px) {
  .Projects__img,
  .home__img,
  .about__img {
    /* الحفاظ على نفس الجودة */
    filter: saturate(1.05) contrast(1.02);
  }
}

/* تحسين الصور الكبيرة */
@supports (aspect-ratio: 1) {
  img[loading="lazy"] {
    aspect-ratio: auto;
  }
}

/* تحسين الأداء العام */
img[loading="lazy"] {
  content-visibility: auto;
}