/* =============================================================================
   Background Images - Optimized for Performance
   
   - WebP format for modern browsers (95% smaller)
   - PNG fallback for older browsers
   - Responsive images for mobile devices
   - Lazy loading for below-fold content
   ============================================================================= */

/* Home page sky band - Above fold, eager load */
.tcrc-home .sky-band {
  /* Mobile: Use small optimized version */
  background-image: url("/assets/backgrounds/optimized/sky-bg-mobile.webp");
  background-image: -webkit-image-set(
    url("/assets/backgrounds/optimized/sky-bg-mobile.webp") 1x
  );
  background-image: image-set(
    url("/assets/backgrounds/optimized/sky-bg-mobile.webp") type("image/webp") 1x,
    url("/assets/backgrounds/optimized/sky-bg-mobile.png") type("image/png") 1x
  );
}

/* Desktop: Use larger optimized version */
@media (min-width: 1025px) {
  .tcrc-home .sky-band {
    background-image: url("/assets/backgrounds/optimized/sky-bg.webp");
    background-image: -webkit-image-set(
      url("/assets/backgrounds/optimized/sky-bg.webp") 1x
    );
    background-image: image-set(
      url("/assets/backgrounds/optimized/sky-bg.webp") type("image/webp") 1x,
      url("/assets/backgrounds/optimized/sky-bg.png") type("image/png") 1x
    );
  }
}

/* Home page blue stars band - Above fold, eager load */
.tcrc-home .stars-wrap,
.tcrc-home .blue-stars {
  /* Mobile: Use small optimized version */
  background-image: url("/assets/backgrounds/optimized/blue-stars-bg-mobile.webp");
  background-image: -webkit-image-set(
    url("/assets/backgrounds/optimized/blue-stars-bg-mobile.webp") 1x
  );
  background-image: image-set(
    url("/assets/backgrounds/optimized/blue-stars-bg-mobile.webp") type("image/webp") 1x,
    url("/assets/backgrounds/optimized/blue-stars-bg-mobile.png") type("image/png") 1x
  );
}

/* Desktop: Use larger optimized version */
@media (min-width: 1025px) {
  .tcrc-home .stars-wrap,
  .tcrc-home .blue-stars {
    background-image: url("/assets/backgrounds/optimized/blue-stars-bg.webp");
    background-image: -webkit-image-set(
      url("/assets/backgrounds/optimized/blue-stars-bg.webp") 1x
    );
    background-image: image-set(
      url("/assets/backgrounds/optimized/blue-stars-bg.webp") type("image/webp") 1x,
      url("/assets/backgrounds/optimized/blue-stars-bg.png") type("image/png") 1x
    );
  }
}

/* Watch/Series page lavender background - Lazy loaded via JS */
.series-page {
  /* Start with no background */
  background-image: none;
}

/* Lavender background loaded class (added by JS after page visible) */
.series-page.bg-loaded {
  /* Mobile: Use small optimized version with fixed star size (not cover) */
  background-image: url("/assets/backgrounds/optimized/lavender-stars-bg-mobile.webp");
  background-image: -webkit-image-set(
    url("/assets/backgrounds/optimized/lavender-stars-bg-mobile.webp") 1x
  );
  background-image: image-set(
    url("/assets/backgrounds/optimized/lavender-stars-bg-mobile.webp") type("image/webp") 1x,
    url("/assets/backgrounds/optimized/lavender-stars-bg-mobile.png") type("image/png") 1x
  );
  /* Keep stars at readable size on mobile, don't stretch */
  background-size: 520px auto !important;
  background-position: center top !important;
  background-repeat: repeat !important;
}

/* Desktop: Use larger optimized version */
@media (min-width: 1025px) {
  .series-page.bg-loaded {
    background-image: url("/assets/backgrounds/optimized/lavender-stars-bg.webp");
    background-image: -webkit-image-set(
      url("/assets/backgrounds/optimized/lavender-stars-bg.webp") 1x
    );
    background-image: image-set(
      url("/assets/backgrounds/optimized/lavender-stars-bg.webp") type("image/webp") 1x,
      url("/assets/backgrounds/optimized/lavender-stars-bg.png") type("image/png") 1x
    );
    /* Desktop can use cover since stars are properly sized */
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
}

/* Contact page blue stars background */
.tcrc-contact .stars-wrap {
  /* Mobile: Use small optimized version */
  background-image: url("/assets/backgrounds/optimized/blue-stars-bg-mobile.webp");
  background-image: -webkit-image-set(
    url("/assets/backgrounds/optimized/blue-stars-bg-mobile.webp") 1x
  );
  background-image: image-set(
    url("/assets/backgrounds/optimized/blue-stars-bg-mobile.webp") type("image/webp") 1x,
    url("/assets/backgrounds/optimized/blue-stars-bg-mobile.png") type("image/png") 1x
  );
}

/* Desktop: Use larger optimized version */
@media (min-width: 1025px) {
  .tcrc-contact .stars-wrap {
    background-image: url("/assets/backgrounds/optimized/blue-stars-bg.webp");
    background-image: -webkit-image-set(
      url("/assets/backgrounds/optimized/blue-stars-bg.webp") 1x
    );
    background-image: image-set(
      url("/assets/backgrounds/optimized/blue-stars-bg.webp") type("image/webp") 1x,
      url("/assets/backgrounds/optimized/blue-stars-bg.png") type("image/png") 1x
    );
  }
}

/* GO button image (must be in public CSS to access /assets/) */
.tcrc-home .go-button,
.go-button {
  background-image: url("/assets/UI/btn-go-01.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0 !important;
  color: transparent !important;
}