/* ==========================================================================
   app/loader.css: the five-panel loading mark (public/app/loader.js).
   The panels pulse outward from the centre: .xl-r0, then .xl-r1, then .xl-r2.
   ========================================================================== */

.xl-mark { display: block; width: 120px; height: 100px; overflow: visible; }
.xl-mark .xl-fig { fill: #140B05; }
.xl-mark .xl-edge { fill: none; stroke: #FFD08A; stroke-width: .8; stroke-linejoin: round; opacity: .55; }
.xl-mark .xl-r0 .xl-edge { opacity: .9; }
.xl-mark .xl-panel { transform-box: fill-box; transform-origin: center; }

.xl-mark:not(.is-still) .xl-panel { animation: xl-pulse 1.2s cubic-bezier(.4, 0, .2, 1) infinite both; }
.xl-mark:not(.is-still) .xl-r1 { animation-delay: .16s; }
.xl-mark:not(.is-still) .xl-r2 { animation-delay: .32s; }

@keyframes xl-pulse {
  0%   { opacity: .38; transform: scale(.94); filter: none; }
  28%  { opacity: 1;   transform: scale(1.05); filter: drop-shadow(0 0 5px rgba(255,138,61,.75)); }
  60%  { opacity: .38; transform: scale(.94); filter: none; }
  100% { opacity: .38; transform: scale(.94); filter: none; }
}

/* The cover. Over the whole page for a short wait: it is a transition between
   screens, not a place to stay. */
.xl-load {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(11, 11, 14, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.xl-load.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease; }
.xl-load .xl-mark { width: 132px; height: 110px; }
.xl-load-t {
  margin: 0; font-family: var(--font-label); font-size: var(--fs-xs, 12px); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  .xl-mark .xl-panel { animation: none !important; opacity: 1; transform: none; }
  .xl-load { transition: none; }
}