/* The "working" screen every page puts up during an AJAX call: T.loading() on the
   hotel admin and the lobby, opjs.loading() on guests' booking pages, and the
   n / Dcjs / BA copies. Each appends <div id="box-loading">, a page-wide sheet
   that also stops clicks, and <img id="img-loading" src="public/img/loading.svg">.

   Linked from the admin's and the guest site's includes, after the old rules. Those
   rules exist in six stylesheets: they placed the picture's corner at 49% / 45%
   instead of centring it, and stacked it under the sheet (z-index 5 vs 1000), so
   it showed through the dimming. The rules here are one step more specific
   (body >), so they win wherever they are loaded. Colours are written out: guest
   pages do not load tokens.css. The values match tokens.css (--ink, --slate-200).

   The selectors match only the <img> loader. The backoffice payment page puts a
   CSS roller in a <div id="img-loading">; that one is left alone. */

body > #box-loading {
  background: #0c2439;   /* --ink: the same dim, in the brand's navy instead of black */
  opacity: .24;
  /* Most calls answer within a quarter second. The sheet stops clicks at once
     but only shows when a call is actually slow, so a quick save no longer
     flashes the page. */
  animation: be-loading-in .2s ease-out .25s backwards;
}

body > img#img-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;          /* above the sheet (1000), still under Bootstrap's modals, as before */
  box-sizing: border-box;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  padding: 12px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(12, 36, 57, .24), 0 0 0 1px rgba(12, 36, 57, .06);
  animation: be-loading-in .2s ease-out .25s backwards;
}

@keyframes be-loading-in { from { opacity: 0; } }

/* motion off: still the quarter-second wait, but no fade; the picture stands still too */
@media (prefers-reduced-motion: reduce) {
  body > #box-loading,
  body > img#img-loading { animation-duration: 0s; }
}