/* Load after the page styles. Keep the approved texture's grain scale. */
body[data-event-id], body.waitlist-event {
  --launch-paper-image: image-set(url('/assets/v2-paper-1280.webp') 1x, url('/assets/v2-paper-2560.webp') 2x);
  background-image: var(--launch-paper-image);
}

@media (max-width: 512px) {
  .compil-site, body[data-event-id], body.waitlist-event {
    --paper-image: image-set(url('/assets/launch-performance/paper-mobile-512.webp') 1x, url('/assets/launch-performance/paper-mobile-1024.webp') 2x, url('/assets/launch-performance/paper-mobile-1536.webp') 3x);
    --launch-paper-image: var(--paper-image);
  }
  /* Event pages previously used the 2x master even on 3x displays. */
  body[data-event-id], body.waitlist-event {
    --launch-paper-image: image-set(url('/assets/launch-performance/paper-mobile-512.webp') 1x, url('/assets/launch-performance/paper-mobile-1024.webp') 2x);
  }
  .design-hero, .panel-copy, .fleet-intro, .design-panel.calendar-panel,
  .compil-site[data-page='about'], body[data-event-id], body.waitlist-event {
    background-size: 512px 720px;
  }
  .compil-site .invite-dialog {
    --invite-surface: #eee var(--paper-image) center / 512px 720px repeat;
  }
}

/* Enabled only after the observer exists. Without JS, all backgrounds render. */
@media screen {
  .performance-backgrounds .design-panel > .panel-heading:not(.performance-ready),
  .performance-backgrounds .design-panel > .panel-copy:not(.performance-ready),
  .performance-backgrounds .design-panel > .panel-action:not(.performance-ready),
  .performance-backgrounds .design-panel.calendar-panel:not(.performance-ready),
  .performance-backgrounds .fleet-intro:not(.performance-ready) {
    background-image: none !important;
  }
}