/* StreakPass states — loading, empty, error, success patterns. */

/* skeleton shimmer */
.sp-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--sp-surface-raised);
  border-radius: var(--sp-radius-sm);
  min-height: 1em;
}
.sp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: sp-shimmer 1.4s infinite;
}
@keyframes sp-shimmer { to { transform: translateX(100%); } }

.sp-skeleton--text { height: 0.9em; width: 60%; }
.sp-skeleton--title { height: 1.4em; width: 40%; }
.sp-skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
.sp-skeleton--card { height: 96px; border-radius: var(--sp-radius-lg); }

/* standalone spinner */
.sp-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--sp-surface-raised);
  border-top-color: var(--sp-orange);
  animation: sp-spin 0.7s linear infinite;
}
.sp-spinner--lg { width: 44px; height: 44px; }

/* empty / error / success state blocks */
.sp-state {
  text-align: center;
  padding: var(--sp-space-10) var(--sp-space-5);
}
.sp-state__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--sp-border);
  color: var(--sp-text-subtle);
  font-size: 1.6rem;
}
.sp-state__title { font-size: var(--sp-fs-h3); font-weight: var(--sp-fw-bold); }
.sp-state__body { color: var(--sp-text-muted); font-size: var(--sp-fs-sm); margin-top: var(--sp-space-2); }
.sp-state__action { margin-top: var(--sp-space-5); }

.sp-state--error .sp-state__icon { border-color: rgba(255, 77, 77, 0.4); color: var(--sp-danger); background: var(--sp-danger-dim); }
.sp-state--success .sp-state__icon { border-color: rgba(72, 225, 95, 0.4); color: var(--sp-success); background: var(--sp-success-dim); box-shadow: var(--sp-glow-success); }
.sp-state--done .sp-state__icon { border-color: var(--sp-border-accent-soft); color: var(--sp-orange); background: var(--sp-gradient-ember); box-shadow: var(--sp-glow-soft); }

/* success "credited" pulse (points landing in balance) */
@keyframes sp-pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(72, 225, 95, 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(72, 225, 95, 0); }
}
.sp-pulse-success { animation: sp-pulse-glow 0.9s var(--sp-ease-out) 2; }