/*!
 * loading.css — tasteful, CSS-only loading state for the docs cascarón.
 * No requestAnimationFrame, no canvas, no per-frame shadowBlur (keeps scroll
 * buttery per the fleet canvas-perf rule). Pure CSS keyframes only.
 *
 * Palette pulls the site CSS vars (--ink/--muted/--line/--panel) with safe
 * fallbacks, and the LEMPYRΛ spectrum for the top progress bar.
 */
.lx-loading {
  --lx-spectrum: linear-gradient(90deg,#ff3158,#ff9f1c,#ffe600,#2dff88,#27dfff,#725cff,#ea3cff);
  position: relative;
  min-height: 240px;
}

/* thin spectrum progress bar pinned to the top of the mount */
.lx-loading::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--lx-spectrum);
  background-size: 240% 100%;
  animation: lx-bar 1.1s linear infinite;
  z-index: 2;
}

/* skeleton shimmer block */
.lx-skeleton {
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(24px,5vw,64px) clamp(16px,4vw,40px);
  display: grid;
  gap: 18px;
}
.lx-skeleton .lx-sk {
  height: 16px;
  border-radius: 3px;
  background: var(--panel, rgba(255,255,255,.06));
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(39,223,255,.16) 45%,
    rgba(114,92,255,.16) 55%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: lx-shimmer 1.4s ease-in-out infinite;
}
.lx-skeleton .lx-sk.title { height: 40px; width: 60%; margin-bottom: 8px; }
.lx-skeleton .lx-sk.sub   { height: 14px; width: 38%; margin-bottom: 20px; }
.lx-skeleton .lx-sk.w90 { width: 90%; }
.lx-skeleton .lx-sk.w75 { width: 75%; }
.lx-skeleton .lx-sk.w60 { width: 60%; }
.lx-skeleton .lx-sk.kpis {
  height: 120px; width: 100%; margin-top: 14px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  background-color: transparent;
}

/* fade used when the loader is torn down */
.lx-loading.lx-fade-out { animation: lx-fade .28s ease forwards; }

@keyframes lx-bar { to { background-position: 240% 0; } }
@keyframes lx-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -20% 0; } }
@keyframes lx-fade { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lx-loading::before { animation: none; }
  .lx-skeleton .lx-sk { animation: none; opacity: .6; }
}