/**
 * loaders.css — Loader & Skeleton Styles
 *
 * Contains all loading-state styles for the Resonate player:
 *   - CSS custom properties for loader sizing and timing
 *   - Overlay spinner loader (used by js/loaders.js)
 *   - Skeleton loaders for tracks and search results
 *   - Search status message and spinner
 *   - Energy-saver theme overrides to preserve loader animations
 */

/* ===== LOADER CUSTOM PROPERTIES ===== */
:root {
  --loader-size: 24px;
  --loader-border-width: 2px;
  --loader-duration: 2s;
}

/* ===== LOADER ANIMATIONS ===== */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ===== OVERLAY LOADER ===== */
.loader-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); z-index: 10000; backdrop-filter: blur(4px); animation: fadeIn 0.15s ease-in; }
.loader-overlay--hiding { animation: fadeOut 0.2s ease-out forwards; pointer-events: none; }
.loader-container { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 20px; min-width: 140px; background: var(--card); border: 1px solid rgba(var(--primary-rgb), 0.2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.loader-spinner { width: var(--loader-size, 40px); height: var(--loader-size, 40px); border-radius: 50%; border: var(--loader-border-width, 4px) solid rgba(var(--primary-rgb), 0.2); border-top: var(--loader-border-width, 4px) solid var(--primary); animation: spin var(--loader-duration, 2s) linear infinite; }
.loader-progress { font-size: 14px; font-weight: 700; letter-spacing: 0.6px; color: var(--fg); text-shadow: 0 2px 8px rgba(0,0,0,0.4); text-align: center; min-width: 48px; }
.loader-message { font-size: 12px; font-weight: 400; text-align: center; line-height: 1.4; max-width: 280px; margin-top: 4px; opacity: 0.85; color: var(--muted); }
.loader { width: var(--loader-size, 24px); height: var(--loader-size, 24px); border-radius: 50%; border: var(--loader-border-width, 2px) solid rgba(var(--primary-rgb), 0.2); border-top: var(--loader-border-width, 2px) solid var(--primary); animation: spin var(--loader-duration, 2s) linear infinite; }
.search-loading { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--muted); }
.loader-text { color: var(--muted); font-size: 13px; }

/* ===== SKELETON LOADER FOR TRACKS ===== */
.tracks-loading-skeleton {
  padding: 16px;
  animation: fadeIn 0.2s ease-in;
}

.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-track {
  height: 48px;
  background: linear-gradient(
    90deg,
    var(--surface-1, #f5f5f5) 0%,
    var(--surface-2, #ebebeb) 50%,
    var(--surface-1, #f5f5f5) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Dark mode adjustments for skeleton */
@media (prefers-color-scheme: dark) {
  .skeleton-track {
    background: linear-gradient(
      90deg,
      var(--surface-1, #2a2a2a) 0%,
      var(--surface-2, #353535) 50%,
      var(--surface-1, #2a2a2a) 100%
    );
  }
}

/* ===== SEARCH RESULT SKELETON CARDS ===== */
.search-skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-sm);
  padding: 10px;
  animation: fadeIn 0.2s ease-in;
}

.search-skeleton-card {
  background: var(--card);
  border: 1px solid var(--surface-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  height: 280px;
  display: flex;
  flex-direction: column;
}

.search-skeleton-cover {
  width: 100%;
  height: 180px;
  background: linear-gradient(
    90deg,
    var(--surface-1, #f5f5f5) 0%,
    var(--surface-2, #ebebeb) 50%,
    var(--surface-1, #f5f5f5) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.search-skeleton-content {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-skeleton-title {
  height: 20px;
  width: 80%;
  background: linear-gradient(
    90deg,
    var(--surface-1, #f5f5f5) 0%,
    var(--surface-2, #ebebeb) 50%,
    var(--surface-1, #f5f5f5) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
}

.search-skeleton-subtitle {
  height: 16px;
  width: 60%;
  background: linear-gradient(
    90deg,
    var(--surface-1, #f5f5f5) 0%,
    var(--surface-2, #ebebeb) 50%,
    var(--surface-1, #f5f5f5) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

/* Dark mode adjustments for search skeleton */
@media (prefers-color-scheme: dark) {
  .search-skeleton-cover,
  .search-skeleton-title,
  .search-skeleton-subtitle {
    background: linear-gradient(
      90deg,
      var(--surface-1, #2a2a2a) 0%,
      var(--surface-2, #353535) 50%,
      var(--surface-1, #2a2a2a) 100%
    );
  }
}

/* ===== SEARCH STATUS MESSAGE ===== */
.search-status-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 14px;
  animation: fadeIn 0.3s ease-in;
}

.search-status-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface-border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== ENERGY-SAVER THEME OVERRIDES ===== */
/* Exclude loader spinners from reduced-motion so they remain visible */
[data-theme="energy-saver"] .loader-spinner {
  animation-duration: var(--loader-duration, 2s) !important;
}

[data-theme="energy-saver"] .loader {
  animation-duration: var(--loader-duration, 2s) !important;
}