/**
 * Performance-optimized CSS for stylix.ai
 * Font optimization and layout stability
 */

/* Ensure web fonts use swap to prevent FOIT/FOUT delays */
@font-face {
  font-family: 'Montserrat';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCJq5nH6xNYXA.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTURjIg1_i6t8kCJq5nH6xNYXA.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/montserrat/v26/JTURjIg1_i6t8kCJq5nH6xNYXA.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFrLrG3OqA.woff2') format('woff2');
}

/* Preload critical images (LCP candidates) */
.bg-feature-image.output-feature-image,
.mobile-image-bg {
  content-visibility: auto;
}

/* Optimize images for faster painting */
img {
  content-visibility: auto;
}

/* Reduce layout shift with explicit sizing */
[width]:not([width="100%"]):not([width="Auto"]),
[height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Essential media queries for responsive images */
@media (max-width: 768px) {
  .hero-images-grid img,
  .cta-images-grid img {
    width: 100%;
    height: auto;
  }
}