/* ========================================
   MOTION LAYER
   Shared keyframes, shimmer loaders, illustrated empty states, and a
   subtle shine animation for the badges-page progress bars. Honors
   prefers-reduced-motion.

   The XP chip / streak flame / daily challenge / celebration overlay /
   confetti / XP float blocks were removed after user feedback on the
   gamification layer — kept minimal animation primitives only.
   ======================================== */

/* ---------- Keyframes ---------- */

@keyframes toast-slide {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

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

/* ---------- Skeleton loader ---------- */

.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--c-surface-2) 25%,
    var(--c-border) 50%,
    var(--c-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer var(--motion-shimmer) infinite;
  border-radius: var(--radius-sm);
  min-height: 16px;
}
.skeleton-title { height: 20px; width: 60%; margin-bottom: 8px; }
.skeleton-line  { height: 14px; width: 90%; margin-bottom: 6px; }
.skeleton-line.short { width: 40%; }
.skeleton-card  { height: 120px; border-radius: var(--radius-lg); }
.skeleton-circle{ width: 48px; height: 48px; border-radius: 50%; }

/* ---------- Illustrated empty state ---------- */

.empty-illus {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 16px;
  border-radius: var(--radius-xl);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.empty-illus img,
.empty-illus svg {
  width: 120px;
  height: auto;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--c-indigo) 12%, transparent));
}
.empty-illus .empty-illus-title {
  font-weight: 800;
  font-size: var(--fs-lg);
  color: var(--c-ink);
}
.empty-illus .empty-illus-sub {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  font-weight: 600;
  max-width: 36ch;
}