/* ============================================================
   rentie-loader.css — shared pixel-art scooter loading animation.

   Two uses, same animated image everywhere:
     /images/loader-scooter.webp (animated, transparent) with
     /images/loader-scooter.gif  (fallback, only fetched by browsers
                                   without animated-WebP support)

   IT MUST BE AN IMAGE, NOT A <video>. iOS Safari refuses to autoplay
   video in Low Power Mode (and under other conditions) and paints a play
   button over it instead — the loader sat there frozen, asking to be
   tapped. Images are not subject to any autoplay policy, so an animated
   WebP just plays, everywhere, always. Do not "upgrade" this back to a
   <video> element.

   The art is genuinely transparent (verified by decoding the alpha
   plane, not by trusting the encoder), so it sits on any background
   without a visible box. Scaled with nearest-neighbour + pixelated
   rendering so the pixel grid stays crisp instead of turning to mush.

   1. .rz-loader       — drop-in replacement for a shimmer-skeleton block
                          inside any existing "waiting" container. Only the
                          container's CONTENT changes; each page's own
                          show/hide logic (toggling the container's
                          display) is untouched.
   2. .rz-boot-splash   — full-page overlay shown immediately on load,
                          before any data has arrived, faded out once by
                          the page's own init script. Not a spinner that
                          reappears on every navigation — a one-time entry
                          moment, the way a native app's splash screen
                          works.
   ============================================================ */

.rz-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
}
.rz-loader picture { display: contents; }
.rz-loader img {
  width: 140px;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  image-rendering: pixelated;
}
.rz-loader .rz-loader-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--tertiary, #6b6256);
  letter-spacing: .02em;
}

/* Compact variant — for a smaller waiting container (e.g. a modal step)
   where the full padded block would feel oversized. */
.rz-loader.rz-loader-sm { padding: 14px 12px; gap: 6px; }
.rz-loader.rz-loader-sm img { width: 104px; }

.rz-boot-splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--parchment, #fbfaee);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .35s ease;
}
.rz-boot-splash picture { display: contents; }
.rz-boot-splash img {
  width: 200px;
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
}
.rz-boot-splash.rz-hide {
  opacity: 0;
  pointer-events: none;
}