/* NewCon shimmer skeleton primitives.
   Replaces spinner loader dialogs with content-shaped placeholders that
   mirror each page's real layout. Compositor-friendly (animates
   background-position only) and reduced-motion aware. Two themes:
   default (dark tint for light surfaces) and .sk--on-dark (for dark cards). */

:root {
  --sk-base: rgba(15, 23, 42, 0.07);   /* resting block on light surfaces */
  --sk-shine: rgba(15, 23, 42, 0.13);  /* sweeping highlight band */
  --sk-radius: 12px;
  --sk-speed: 1.5s;
}

.sk {
  position: relative;
  overflow: hidden;
  border-radius: var(--sk-radius);
  background-color: var(--sk-base);
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    var(--sk-shine) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  animation: sk-sweep var(--sk-speed) ease-in-out infinite;
}

/* Dark surfaces (navy/slate-900 cards, glass panels) invert the tint. */
.sk--on-dark {
  --sk-base: rgba(255, 255, 255, 0.08);
  --sk-shine: rgba(255, 255, 255, 0.18);
}

/* Tint the shine with the brand gold where a page wants warmth. */
.sk--gold { --sk-shine: rgba(197, 160, 89, 0.28); }

/* Shape helpers */
.sk-line { height: 0.8em; border-radius: 6px; }
.sk-line.sk-sm { height: 0.65em; }
.sk-line.sk-lg { height: 1.15em; }
.sk-circle { border-radius: 9999px; }

/* Stagger so the sweep reads organic, not lock-step. */
.sk-d1 { animation-delay: 0.1s; }
.sk-d2 { animation-delay: 0.2s; }
.sk-d3 { animation-delay: 0.3s; }
.sk-d4 { animation-delay: 0.4s; }
.sk-d5 { animation-delay: 0.5s; }

@keyframes sk-sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* RTL: sweep with the text direction. */
[dir="rtl"] .sk { animation-name: sk-sweep-rtl; }
@keyframes sk-sweep-rtl {
  from { background-position: -80% 0; }
  to   { background-position: 180% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background-image: none; }
}