/**
 * Core Web Vitals Optimization CSS
 * Improves LCP, FID, and CLS metrics
 */

/* Lazy loading for images */
img {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Reduce layout shifts by reserving space for images */
img[width], img[height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Prevent layout shift for dynamically loaded content */
.dynamic-content {
  min-height: 100px;
  contain: layout;
}

/* Reduce CLS by reserving space for ads and dynamic elements */
.ad-placeholder, .dynamic-cta {
  min-height: 250px;
}

/* Improve LCP by prioritizing above-the-fold content */
.hero-int, .hero-band {
  contain: layout style paint;
}

/* Reduce animation complexity for better performance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Optimize for mobile performance */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Reduce image sizes on mobile */
  .hero-int img {
    max-height: 300px;
  }
}

/* Preload critical CSS */
.critical-css {
  display: none;
}

/* Optimize for CLS - reserve space for dynamic elements */
.reserve-space {
  min-height: 50px;
}

/* Improve FID by reducing JavaScript execution time */
.interactive-element {
  will-change: transform;
  contain: layout;
}

/* Reduce paint complexity */
.complex-gradient {
  will-change: background;
  backface-visibility: hidden;
}

/* Optimize scroll performance */
main, .section {
  contain: layout style paint;
}

/* Prevent text reflow */
body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Optimize for LCP - prioritize hero content */
.hero-int {
  contain: layout style paint;
  content-visibility: auto;
}

/* Reduce CLS from dynamic content */
.dynamic-section {
  min-height: 200px;
  contain: layout;
}

/* Note: Use HTML attributes for image optimization:
   - loading="lazy" for lazy loading images
   - fetchpriority="high" for above-the-fold images
   These are HTML attributes, not CSS properties
*/