/* ==========================================================================
   MasalSaatim - Shimmering and Skeleton Loading States CSS
   ========================================================================== */

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

.shimmer {
  background: linear-gradient(90deg, 
    var(--color-surface-soft) 25%, 
    calc(var(--color-surface-soft) + #101010) 37%, 
    var(--color-surface-soft) 50%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

[data-applied-theme="dark"] .shimmer {
  background: linear-gradient(90deg, 
    var(--color-surface-soft) 25%, 
    #334155 37%, 
    var(--color-surface-soft) 50%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Skeleton items templates */
.skeleton-card {
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-image {
  width: 100%;
  height: 160px;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.skeleton-title {
  height: 20px;
  width: 70%;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}

.skeleton-text {
  height: 12px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  margin-top: 4px;
}

.skeleton-text-half {
  height: 12px;
  width: 50%;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  margin-top: 4px;
}

/* Loading spinners */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(79, 124, 255, 0.2);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 0.8s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}