/* =========================================================
   Breathing Wave Loader — shared loading state
   Drop-in replacement for the old spinner. Usage:
   <div class="bw-loader">
     <span></span><span></span><span></span><span></span>
   </div>
========================================================= */
.bw-loader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.bw-loader span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--purple-600, #7c3aed);
  animation:bw-breathe 1.4s ease-in-out infinite;
  transform-origin:center;
}
.bw-loader span:nth-child(2){ animation-delay:.18s; }
.bw-loader span:nth-child(3){ animation-delay:.36s; }
.bw-loader span:nth-child(4){ animation-delay:.54s; }

/* Compact variant for inline/small contexts (e.g. inside a button or a card) */
.bw-loader.bw-sm span{ width:7px; height:7px; }
.bw-loader.bw-sm{ gap:8px; }

@keyframes bw-breathe{
  0%,100%{
    transform:scale(.55);
    opacity:.25;
    box-shadow:0 0 0 rgba(124,58,237,0);
  }
  20%{
    transform:scale(.9);
    opacity:.65;
  }
  50%{
    transform:scale(1.8);
    opacity:1;
    box-shadow:
      0 0 14px rgba(124,58,237,.35),
      0 0 26px rgba(124,58,237,.18),
      0 0 0 8px rgba(124,58,237,.08);
  }
  80%{
    transform:scale(.95);
    opacity:.6;
  }
}