/* Image Optimization - P2
   Switch all images to WebP versions (with fallback)
   Reduces total asset size by ~60-70%
*/

:root {
  /* Hero images - WebP optimized */
  --base-image: url('assets/images/7723c53ea2c5ae.webp');
  --reveal-image: url('assets/images/a158ef7dc36d90.webp');

  /* Section backgrounds - WebP optimized */
  --section-ambient-image: url('assets/images/27c5b50f3ba316.webp');
  --section-floral-image: url('assets/images/25da75721affd2.webp');

  /* Product images - WebP optimized */
  --product-image-1: url('assets/images/product-wizytowka.webp');
  --product-image-2: url('assets/images/product-firmowa.webp');
  --product-image-3: url('assets/images/product-autorski-crm.webp');

  /* Vision/cinema section - WebP optimized */
  --vision-image: url('assets/images/6072796ab1761b.webp');

  /* Story images - WebP optimized */
  --story-image-1: url('assets/images/bef9c0b89246c3.webp');
  --story-image-2: url('assets/images/strony firmowe.webp');
  --story-image-3: url('assets/images/aa153ad2ddbc54.webp');
  --story-image-4: url('assets/images/c88adab6324a02.webp');
  --story-image-5: url('assets/images/0522b89d8a2634.webp');
}

/* Fallback for browsers without WebP support (IE11 compat) */
@supports (not (background-image: url('data:image/webp;base64,UklGRiYAAABXRUJQ'))) {
  :root {
    --base-image: url('assets/images/7723c53ea2c5ae.png');
    --reveal-image: url('assets/images/a158ef7dc36d90.png');
    --section-ambient-image: url('assets/images/27c5b50f3ba316.jpg');
    --section-floral-image: url('assets/images/25da75721affd2.jpg');
    --product-image-1: url('assets/images/product-wizytowka.jpg');
    --product-image-2: url('assets/images/product-firmowa.jpg');
    --product-image-3: url('assets/images/product-autorski-crm.png');
    --vision-image: url('assets/images/6072796ab1761b.jpg');
    --story-image-1: url('assets/images/bef9c0b89246c3.jpg');
    --story-image-2: url('assets/images/strony firmowe.jpg');
    --story-image-3: url('assets/images/aa153ad2ddbc54.jpg');
    --story-image-4: url('assets/images/c88adab6324a02.jpg');
    --story-image-5: url('assets/images/0522b89d8a2634.jpg');
  }
}

/* Image loading optimization hints */
/* Lazy load non-critical gallery images */
.story-card-img,
.archive-tile-img {
  content-visibility: auto;
  will-change: transform;
}

/* Ensure proper aspect ratio for images to prevent CLS */
.story-card-img,
.archive-tile-img,
.cinema-frame-img {
  aspect-ratio: auto;
}