/* ARCA · shared skeleton loaders.
 * Drop this via <link rel="stylesheet" href="arca-skel.css"> and use:
 *
 *   <div class="arca-skel arca-skel-line"></div>          · single line, ~100% wide
 *   <div class="arca-skel arca-skel-line sm"></div>       · short, ~40% wide
 *   <div class="arca-skel arca-skel-block"></div>         · multi-line block
 *   <div class="arca-skel arca-skel-pill"></div>          · pill / stat placeholder
 *   <div class="arca-skel arca-skel-card"></div>          · card-sized block
 *
 * Toggle visibility via a wrapper class: .is-loading shows skeletons, hides real content.
 *
 *   <div id="nova-result" class="is-loading">
 *     <div class="arca-skel-when-loading"> ... skeletons ... </div>
 *     <div class="arca-skel-hide-when-loading"> ... real content ... </div>
 *   </div>
 *
 * Page JS toggles el.classList.toggle('is-loading', loading).
 */

.arca-skel {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: arca-skel-shimmer 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 8px;
  color: transparent;
}

@keyframes arca-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.arca-skel-line         { height: 14px; width: 100%; margin: 8px 0; }
.arca-skel-line.sm      { width: 40%; }
.arca-skel-line.md      { width: 70%; }
.arca-skel-line.xs      { width: 22%; height: 12px; }

.arca-skel-block {
  height: 120px; width: 100%; margin: 12px 0;
  border-radius: 10px;
}

.arca-skel-pill {
  display: inline-block; height: 22px; width: 72px;
  border-radius: 999px; margin: 4px 6px 4px 0;
}

.arca-skel-card {
  height: 160px; width: 100%;
  border-radius: 14px;
  margin-bottom: 12px;
}

.arca-skel-avatar {
  height: 40px; width: 40px;
  border-radius: 50%;
}

/* Toggle helpers · add .is-loading to a wrapper */
.is-loading .arca-skel-hide-when-loading { display: none; }
.arca-skel-when-loading { display: none; }
.is-loading .arca-skel-when-loading { display: block; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .arca-skel { animation: none; opacity: 0.5; }
}