/* ══════════════════════════════════════════════════════════
   CloneCatalog — global page background with parallax
   Loaded on every page via <link rel="stylesheet" href="/cc-global.css" />

   Task 9 perf: image converted from 1.6MB PNG to 113KB WebP
   (93% reduction). JPEG fallback (156KB) for older browsers
   without image-set support.
   ══════════════════════════════════════════════════════════ */

html, body {
  /* Base fallback: compressed JPEG for browsers without image-set */
  background-image: url('/bannerlogo4.jpg');
  /* Modern browsers: pick WebP when supported, else JPEG */
  background-image: -webkit-image-set(
    url('/bannerlogo4.webp') type('image/webp'),
    url('/bannerlogo4.jpg') type('image/jpeg')
  );
  background-image: image-set(
    url('/bannerlogo4.webp') type('image/webp'),
    url('/bannerlogo4.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #0a1a0f;
}

/* Fixed full-page dark overlay sits behind all content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 26, 15, 0.82);
  z-index: -1;
  pointer-events: none;
}

/* Safari/iOS falls back to scroll if fixed attachment isn't supported */
@supports (-webkit-touch-callout: none) {
  html, body { background-attachment: scroll; }
}