/* Token-based loading placeholder. Subtle shimmer over a line-token base.
   text/block/circle variants. Reduced-motion safe (static, no animation). */
.sivar-skeleton {
  display: block;
  background-color: rgb(var(--sivar-line, 229 231 235));
  background-image: linear-gradient(
    90deg,
    rgb(var(--sivar-line, 229 231 235) / 0) 0%,
    rgb(var(--sivar-paper, 255 255 255) / 0.65) 50%,
    rgb(var(--sivar-line, 229 231 235) / 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: sivar-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ---- text ---- */
.sivar-skeleton--text {
  width: 100%;
  height: 0.75rem;
  border-radius: var(--r-sm, 6px);
}

/* ---- block ---- */
.sivar-skeleton--block {
  width: 100%;
  height: 6rem;
  border-radius: var(--r-md, 12px);
}

/* ---- circle ---- */
.sivar-skeleton--circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

/* ---- stacked text lines ---- */
.sivar-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

@keyframes sivar-skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

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