/* IMAGE OPTIMIZATION & RESPONSIVE IMAGES */

/* Hero background image optimization with responsive versions */
.hero-bg {
  /* Default for desktop */
  background-image: url('/images/hero-1440.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Fallback for browsers that don't support WebP */
@supports not (background-image: url('/test.webp')) {
  .hero-bg {
    background-image: url('/images/hero-1440.png');
  }
}

/* Mobile: use smaller image (640px) */
@media (max-width: 640px) {
  .hero-bg {
    background-image: url('/images/hero-640.webp');
    background-attachment: scroll;
  }

  @supports not (background-image: url('/test.webp')) {
    .hero-bg {
      background-image: url('/images/hero-640.png');
    }
  }
}

/* Tablet: use medium image (1024px) */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-bg {
    background-image: url('/images/hero-1024.webp');
  }

  @supports not (background-image: url('/test.webp')) {
    .hero-bg {
      background-image: url('/images/hero-1024.png');
    }
  }
}

/* Large screens: use full resolution (1440px) */
@media (min-width: 1024px) {
  .hero-bg {
    background-image: url('/images/hero-1440.webp');
  }

  @supports not (background-image: url('/test.webp')) {
    .hero-bg {
      background-image: url('/images/hero-1440.png');
    }
  }
}

/* Very large screens: use original */
@media (min-width: 1920px) {
  .hero-bg {
    background-image: url('/images/hero.webp');
  }

  @supports not (background-image: url('/test.webp')) {
    .hero-bg {
      background-image: url('/images/hero.png');
    }
  }
}

/* Logo optimization */
.header-logo img {
  display: block;
  height: auto;
  width: auto;
  max-height: 60px;
  max-width: 200px;
  loading: lazy;
}

/* All img tags with responsive loading */
img {
  display: block;
  max-width: 100%;
  height: auto;
  loading: lazy;
}

/* Picture elements for better browser support */
picture {
  display: block;
}

picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Image performance optimization */
img[loading='lazy'] {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Blur up effect for lazy loaded images */
@supports (filter: blur(20px)) {
  img[loading='lazy']:not([src*='webp']) {
    filter: blur(0);
  }
}

/* High DPI displays: optimize rendering */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Reduce image quality on slow networks */
@media (max-width: 400px) {
  img {
    max-width: 100%;
  }

  .hero-bg {
    background-size: cover;
    background-position: center;
  }
}

/* Print optimization - don't print images at full resolution */
@media print {
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  .hero-bg {
    background-image: none !important;
  }
}

/* Reduced data mode - simpler images */
@media (prefers-reduced-data: reduce) {
  img {
    background-image: none !important;
  }

  .hero-bg {
    background-color: #0a2647;
    background-image: none !important;
  }
}

/* Preload critical images for faster loading */
link[rel='preload'][as='image'] {
  importance: high;
}

/* Fade in effect for loaded images */
@keyframes imageLoad {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

img {
  animation: imageLoad 0.3s ease-in-out;
}