/* website/static/css/base/spinners.css */

/* ------------------------------------------------------------
   GLOBAL SPINNER SYSTEM (Theme-Aware + Glass + Unified Motion)
   website/static/css/base/spinners.css
------------------------------------------------------------
   PURPOSE:
   A luxury, theme-aware loading indicator system used across:
   ✓ Buttons
   ✓ Modals
   ✓ Global loaders
   ✓ Cards & grids

   GOALS:
   - 100% variable-driven
   - Consistent with global glass system
   - Uses global animations (spin + glowPulse)
   - Clean, scalable, future-proof
------------------------------------------------------------ */


/* ============================================================
   1) BASE SPINNER
============================================================ */
.spinner {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  border: 4px solid var(--glass-border);
  border-top-color: var(--color-gold);

  animation: spin 1s linear infinite;

  margin: auto;
}



/* ============================================================
   2) SIZE VARIANTS
============================================================ */
.spinner-small {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.spinner-large {
  width: 48px;
  height: 48px;
  border-width: 5px;
}



/* ============================================================
   3) BUTTON SPINNER
============================================================ */
.btn .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;

  margin-left: 8px;
  vertical-align: middle;
}



/* ============================================================
   4) GLOW VARIANT
============================================================ */
.spinner-glow {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  border: 4px solid var(--glass-border);
  border-top-color: var(--color-primary);

  animation:
    spin 1s linear infinite,
    glowPulse 1.5s infinite;
}



/* ============================================================
   5) SPINNER CONTAINER (Fade-in)
============================================================ */
.spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;

  opacity: 0;
  animation: fadeIn var(--transition-medium) forwards;
}



/* ============================================================
   6) ANIMATIONS
   (spin + glowPulse come from global animation system)
============================================================ */

/* Spin (global) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Glow pulse (global) */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 var(--color-primary); }
  50%  { box-shadow: 0 0 16px var(--color-primary); }
  100% { box-shadow: 0 0 0 var(--color-primary); }
}