.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

.skeleton--text {
  width: 100%;
  height: 0.85em;
}

.skeleton--block {
  width: 100%;
  height: 80px;
  border-radius: var(--r-md);
}

.skeleton--circle {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
}

.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--surface-2);
  }
}