/* InternationalVenues.com — Final Footer Skyline Background
   Visual-only enhancement. Skyline lives ONLY in the top band of the footer,
   fading into solid #0F172A. Content is always layered above via z-index.

   Performance: the background-image is only applied once the `iv-footer-bg`
   class is added (after window load / idle) so the asset never competes with
   LCP or render-critical resources. AVIF ~35KB desktop / ~13KB mobile.
*/

footer.iv-footer {
  position: relative;
  background-color: #0F172A;
  isolation: isolate;
}

footer.iv-footer > * {
  position: relative;
  z-index: 1;
}

footer.iv-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 800px;
  z-index: 0;
  pointer-events: none;
  background-image: none;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Image only loads after the page has finished loading (class added in JS) */
footer.iv-footer.iv-footer-bg::before {
  opacity: 1;
  /* WebP fallback for browsers without image-set type() support */
  background-image:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.58) 0%,
      rgba(15, 23, 42, 0.88) 60%,
      rgba(15, 23, 42, 1) 100%
    ),
    url('/assets/footer/skyline-3840.webp');
  background-image:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.58) 0%,
      rgba(15, 23, 42, 0.88) 60%,
      rgba(15, 23, 42, 1) 100%
    ),
    image-set(
      url('/assets/footer/skyline-3840.avif') type('image/avif') 1x,
      url('/assets/footer/skyline-3840.webp') type('image/webp') 1x
    );
}

@media (max-width: 767px) {
  footer.iv-footer::before {
    height: 520px;
  }
  footer.iv-footer.iv-footer-bg::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.68) 0%,
        rgba(15, 23, 42, 0.93) 65%,
        rgba(15, 23, 42, 1) 100%
      ),
      url('/assets/footer/skyline-828.webp');
    background-image:
      linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.68) 0%,
        rgba(15, 23, 42, 0.93) 65%,
        rgba(15, 23, 42, 1) 100%
      ),
      image-set(
        url('/assets/footer/skyline-828.avif') type('image/avif') 1x,
        url('/assets/footer/skyline-828.webp') type('image/webp') 1x
      );
    background-position: top center;
  }
}

@media (prefers-reduced-data: reduce) {
  footer.iv-footer::before,
  footer.iv-footer.iv-footer-bg::before {
    background-image: none;
  }
}