/* ============================================
   PERFORMANCE OPTIMIZATIONS
   Global performance enhancements
   ============================================ */

/* Font Smoothing - Better rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reduce repaints and reflows */
img {
  content-visibility: auto;
  max-width: 100%;
  height: auto;
}

/* Optimize rendering for static sections */
.shopify-hero-section,
.shopify-media-content,
.shopify-collection-list,
.collection-title-section {
  contain: layout style paint;
}

/* Optimize animations - use transform and opacity only */
@media (prefers-reduced-motion: no-preference) {
  * {
    /* Ensure only GPU-accelerated properties are animated */
  }
}

/* Reduce layout shifts */
.media-image,
.collage-image,
.frame-image,
.collage-main-img {
  aspect-ratio: attr(width) / attr(height);
}

/* Optimize scroll performance */
html {
  scroll-behavior: smooth;
}

/* Performance: Reduce paint complexity */
.hero-overlay-dark,
.collage-overlay {
  will-change: opacity; /* Only when animating */
}

/* Remove will-change when not needed */
* {
  will-change: auto; /* Reset by default */
}

/* Optimize button interactions */
button,
a,
[role="button"] {
  touch-action: manipulation; /* Faster tap response */
}

/* Optimize image loading */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Optimize image decoding */
img {
  decoding: async;
}

/* Critical images should load eagerly */
img[fetchpriority="high"] {
  loading: eager;
  fetchpriority: high;
}

/* Reduce composite layers */
.shopify-hero-section,
.shopify-media-content {
  isolation: isolate;
}