/*!
 * SDS Motion Forge — loaders.css
 * Loader animations (Section 5).
 * Part of the lossless v5 category split — combined entry: src/motion.css
 */

/* ============================================================
   SECTION 5 — LOADER ANIMATIONS
   Namespace: .sds-loader-*
   ============================================================ */

/* 67 · Orbital System -------------------------------------- */

.sds-loader-orbital {
  position: relative;
  width: 48px;
  height: 48px;
}

.sds-loader-orbital::before,
.sds-loader-orbital::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sds-primary);
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -4px;
}

.sds-loader-orbital::before {
  animation: sds-orbitalA 1.2s linear infinite;
}

.sds-loader-orbital::after {
  animation: sds-orbitalB 1.8s linear infinite;
}

@keyframes sds-orbitalA {
  from {
    transform: rotate(0deg) translateX(18px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(18px) rotate(-360deg);
  }
}

@keyframes sds-orbitalB {
  from {
    transform: rotate(120deg) translateX(26px) rotate(-120deg);
  }
  to {
    transform: rotate(480deg) translateX(26px) rotate(-480deg);
  }
}

/* 68 · Fluid Flow ------------------------------------------ */

.sds-loader-fluid {
  width: 36px;
  height: 36px;
  background: var(--sds-primary);
  animation: sds-fluidFlow 2s ease infinite;
}

@keyframes sds-fluidFlow {
  0% {
    border-radius: 50%;
    transform: scale(1) rotate(0);
  }
  25% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: scale(1.15) rotate(45deg);
  }
  50% {
    border-radius: 50%;
    transform: scale(0.9) rotate(90deg);
  }
  75% {
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    transform: scale(1.1) rotate(135deg);
  }
  100% {
    border-radius: 50%;
    transform: scale(1) rotate(180deg);
  }
}

/* 69 · Particle Sync --------------------------------------- */

.sds-loader-dots {
  display: inline-flex;
  gap: 6px;
}

.sds-loader-dots > * {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-particleSync 1s ease infinite;
}

.sds-loader-dots > *:nth-child(2) {
  animation-delay: 0.2s;
}

.sds-loader-dots > *:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes sds-particleSync {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(0);
    opacity: 0;
  }
}

/* 70 · Comet Trail ----------------------------------------- */

.sds-loader-comet {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--sds-primary-dim);
}

.sds-loader-comet::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--sds-primary);
  animation: sds-cometSpin 1s linear infinite;
}

@keyframes sds-cometSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 71 · Waveform -------------------------------------------- */

.sds-loader-wave {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 32px;
}

.sds-loader-wave > * {
  width: 4px;
  border-radius: 2px;
  background: var(--sds-primary);
  animation: sds-waveBar 0.9s ease infinite;
}

.sds-loader-wave > *:nth-child(1) {
  animation-delay: 0s;
  height: 60%;
}

.sds-loader-wave > *:nth-child(2) {
  animation-delay: 0.15s;
  height: 90%;
}

.sds-loader-wave > *:nth-child(3) {
  animation-delay: 0.3s;
  height: 50%;
}

.sds-loader-wave > *:nth-child(4) {
  animation-delay: 0.1s;
  height: 80%;
}

.sds-loader-wave > *:nth-child(5) {
  animation-delay: 0.25s;
  height: 65%;
}

@keyframes sds-waveBar {
  0%,
  100% {
    transform: scaleY(0.2);
  }
  50% {
    transform: scaleY(1);
  }
}

/* 72 · Ping Cascade ---------------------------------------- */

.sds-loader-ping {
  position: relative;
  width: 16px;
  height: 16px;
}

/* Pseudo-elements get content:''; real <span> does not need it */

.sds-loader-ping::before,
.sds-loader-ping::after {
  content: "";
}

.sds-loader-ping::before,
.sds-loader-ping::after,
.sds-loader-ping > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--sds-primary);
  animation: sds-pingCascade 2s ease infinite;
}

.sds-loader-ping::after {
  animation-delay: 0.6s;
}

.sds-loader-ping > span {
  animation-delay: 1.2s;
}

@keyframes sds-pingCascade {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* 73 · Progress Glow --------------------------------------- */

/*   Uses transform:scaleX to avoid width-animation reflow    */

.sds-loader-progress {
  width: 100%;
  height: 4px;
  background: var(--sds-primary-dim);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.sds-loader-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sds-primary);
  border-radius: 99px;
  transform-origin: left center;
  animation: sds-progressGlow 2s ease infinite;
}

@keyframes sds-progressGlow {
  0% {
    transform: scaleX(0);
    box-shadow: none;
  }
  50% {
    box-shadow:
      0 0 12px var(--sds-primary-glow),
      4px 0 16px var(--sds-primary-glow);
  }
  85% {
    transform: scaleX(1);
    box-shadow: 0 0 8px var(--sds-primary-glow);
  }
  100% {
    transform: scaleX(1);
    box-shadow: 0 0 8px var(--sds-primary-glow);
  }
}

/* 74 · Skeleton Pulse -------------------------------------- */

.sds-loader-skeleton {
  background: linear-gradient(
    90deg,
    var(--sds-primary-dim) 25%,
    rgba(0, 21, 209, 0.04) 50%,
    var(--sds-primary-dim) 75%
  );
  background-size: 400% 100%;
  animation: sds-skeletonPulse 1.6s ease infinite;
  border-radius: 4px;
}

@keyframes sds-skeletonPulse {
  0% {
    background-position: -300% 0;
  }
  100% {
    background-position: 300% 0;
  }
}

/* 75 · Vortex Spin ----------------------------------------- */

.sds-loader-vortex {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(
    var(--sds-primary),
    var(--sds-accent),
    var(--sds-primary)
  );
  animation: sds-vortexSpin 1.6s ease infinite;
}

@keyframes sds-vortexSpin {
  from {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(0.7);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

/* 76 · Typewriter Loader ----------------------------------- */

.sds-loader-type {
  font-family: monospace;
  border-right: 2px solid var(--sds-primary);
  overflow: hidden;
  white-space: nowrap;
  animation:
    sds-typewriterPrem 2s steps(10) infinite alternate,
    sds-cursorBlink var(--sds-duration-base, 0.8s) step-end infinite;
}

/* 77 · Target Lock ----------------------------------------- */

.sds-loader-target {
  position: relative;
  width: 40px;
  height: 40px;
}

.sds-loader-target::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(0, 21, 209, 0.3);
  animation: sds-cometSpin 4s linear infinite;
}

/* 78 · DNA Helix ------------------------------------------- */

.sds-loader-dna {
  position: relative;
  width: 10px;
  height: 48px;
}

.sds-loader-dna::before,
.sds-loader-dna::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 0;
  animation: sds-loaderDna var(--sds-duration-slow, 1.4s) ease-in-out infinite;
}

.sds-loader-dna::before {
  background: var(--sds-primary);
}

.sds-loader-dna::after {
  background: var(--sds-accent);
  animation-delay: 0.7s;
}

@keyframes sds-loaderDna {
  0%,
  100% {
    top: 0;
    transform: scaleX(1);
    opacity: 1;
  }
  25% {
    transform: scaleX(0.4);
    opacity: 0.4;
  }
  50% {
    top: 38px;
    transform: scaleX(1);
    opacity: 1;
  }
  75% {
    transform: scaleX(0.4);
    opacity: 0.4;
  }
}

/* 79 · Pulse ------------------------------------------- */

.sds-loader-pulse {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderPulse 1s ease-in-out infinite;
}

@keyframes sds-loaderPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.4;
  }
}

/* 80 · Arc -------------------------------------------- */

.sds-loader-arc {
  position: relative;
  width: 44px;
  height: 44px;
}

.sds-loader-arc::before,
.sds-loader-arc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.sds-loader-arc::before {
  border-top-color: var(--sds-primary);
  border-right-color: var(--sds-primary);
  animation: sds-cometSpin 0.9s linear infinite;
}

.sds-loader-arc::after {
  border-bottom-color: var(--sds-accent);
  border-left-color: var(--sds-accent);
  animation: sds-cometSpin var(--sds-duration-slow, 1.4s) linear infinite reverse;
  inset: 6px;
}

/* 81 · Signal Bars ------------------------------------- */

.sds-loader-signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
}

.sds-loader-signal > * {
  width: 7px;
  border-radius: 3px 3px 0 0;
  background: var(--sds-primary);
  animation: sds-loaderSignal 1.2s ease-in-out infinite;
}

.sds-loader-signal > *:nth-child(1) {
  height: 35%;
  animation-delay: 0s;
}

.sds-loader-signal > *:nth-child(2) {
  height: 60%;
  animation-delay: 0.15s;
}

.sds-loader-signal > *:nth-child(3) {
  height: 85%;
  animation-delay: 0.3s;
}

.sds-loader-signal > *:nth-child(4) {
  height: 100%;
  animation-delay: 0.45s;
}

@keyframes sds-loaderSignal {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* 82 · Bounce ----------------------------------------- */

.sds-loader-bounce {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderBounce var(--sds-duration-base, 0.8s) var(--sds-ease-emphasized, cubic-bezier(0.215, 0.61, 0.355, 1)) infinite;
}

@keyframes sds-loaderBounce {
  0%,
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
  20% {
    transform: translateY(-22px) scaleY(1.08) scaleX(0.94);
  }
  80% {
    transform: translateY(0) scaleY(0.72) scaleX(1.28);
  }
  90% {
    transform: translateY(0) scaleY(1.04) scaleX(0.97);
  }
}

/* 83 · Radar ------------------------------------------ */

.sds-loader-radar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 21, 209, 0.2);
  overflow: hidden;
}

.sds-loader-radar::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sds-primary));
  top: 50%;
  left: 50%;
  transform-origin: left center;
  animation: sds-cometSpin 2s linear infinite;
}

.sds-loader-radar::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--sds-primary);
}

/* 84 · Morph ------------------------------------------ */

.sds-loader-morph {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--sds-primary), var(--sds-accent));
  animation: sds-loaderMorph var(--sds-duration-slower, 2.2s) ease-in-out infinite;
}

@keyframes sds-loaderMorph {
  0%,
  100% {
    border-radius: 50%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 20% 80% 80% 20% / 20% 20% 80% 80%;
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    transform: rotate(180deg) scale(0.9);
  }
  75% {
    border-radius: 80% 20% 20% 80% / 80% 20% 80% 20%;
    transform: rotate(270deg) scale(1.05);
  }
}

/* 85 · Cascade Bars ------------------------------------ */

.sds-loader-cascade {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
}

.sds-loader-cascade > * {
  width: 6px;
  border-radius: 3px;
  background: var(--sds-primary);
  animation: sds-loaderCascade 1s ease infinite;
}

.sds-loader-cascade > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-loader-cascade > *:nth-child(2) {
  animation-delay: 0.1s;
}

.sds-loader-cascade > *:nth-child(3) {
  animation-delay: 0.2s;
}

.sds-loader-cascade > *:nth-child(4) {
  animation-delay: 0.3s;
}

.sds-loader-cascade > *:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes sds-loaderCascade {
  0%,
  100% {
    height: 8px;
    opacity: 0.4;
  }
  50% {
    height: 36px;
    opacity: 1;
  }
}

/* 86 · Dot Grid --------------------------------------- */

.sds-loader-grid {
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 5px;
}

.sds-loader-grid > * {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderGrid 1.6s ease-in-out infinite;
}

.sds-loader-grid > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-loader-grid > *:nth-child(2) {
  animation-delay: 0.1s;
}

.sds-loader-grid > *:nth-child(3) {
  animation-delay: 0.2s;
}

.sds-loader-grid > *:nth-child(4) {
  animation-delay: 0.3s;
}

.sds-loader-grid > *:nth-child(5) {
  animation-delay: 0.4s;
}

.sds-loader-grid > *:nth-child(6) {
  animation-delay: 0.5s;
}

.sds-loader-grid > *:nth-child(7) {
  animation-delay: 0.6s;
}

.sds-loader-grid > *:nth-child(8) {
  animation-delay: 0.7s;
}

.sds-loader-grid > *:nth-child(9) {
  animation-delay: 0.8s;
}

@keyframes sds-loaderGrid {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.2);
    opacity: 0.1;
  }
}

/* 87 · Ring System ------------------------------------ */

.sds-loader-ring {
  position: relative;
  width: 44px;
  height: 44px;
}

.sds-loader-ring::before,
.sds-loader-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

.sds-loader-ring::before {
  inset: 0;
  border-top-color: var(--sds-primary);
  animation: sds-cometSpin 1s linear infinite;
}

.sds-loader-ring::after {
  inset: 8px;
  border-bottom-color: var(--sds-accent);
  animation: sds-cometSpin 1.6s linear infinite reverse;
}

/* 88 · Ripple Rings ----------------------------------- */

.sds-loader-ripple {
  position: relative;
  width: 44px;
  height: 44px;
}

.sds-loader-ripple::before,
.sds-loader-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sds-primary);
  animation: sds-loaderRipple 2s ease-out infinite;
}

.sds-loader-ripple::after {
  animation-delay: 0.8s;
}

@keyframes sds-loaderRipple {
  0% {
    transform: scale(0.2);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 89 · Neon Ring -------------------------------------- */

.sds-loader-neon-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--sds-primary);
  animation:
    sds-cometSpin 1s linear infinite,
    sds-loaderNeonRing 2s ease-in-out infinite;
}

@keyframes sds-loaderNeonRing {
  0%,
  100% {
    box-shadow:
      0 0 8px var(--sds-primary-glow),
      inset 0 0 8px var(--sds-primary-dim);
  }
  50% {
    box-shadow:
      0 0 20px var(--sds-primary-glow),
      inset 0 0 16px var(--sds-primary-dim);
  }
}

/* 90 · Triple Orbit ----------------------------------- */

.sds-loader-orbit-3 {
  position: relative;
  width: 44px;
  height: 44px;
}

.sds-loader-orbit-3::before,
.sds-loader-orbit-3::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -3.5px 0 0 -3.5px;
}

.sds-loader-orbit-3::before {
  background: var(--sds-primary);
  animation: sds-orbitalA 1s linear infinite;
}

.sds-loader-orbit-3::after {
  background: var(--sds-accent);
  animation: sds-orbitalB var(--sds-duration-slow, 1.4s) linear infinite;
}

/* 91 · Electric Arc ----------------------------------- */

.sds-loader-electric {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(0, 21, 209, 0.15);
  animation: sds-loaderElectric 1.5s ease infinite;
}

@keyframes sds-loaderElectric {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 21, 209, 0);
    border-color: rgba(0, 21, 209, 0.15);
  }
  10% {
    box-shadow: 0 0 12px var(--sds-primary-glow);
    border-color: var(--sds-primary);
  }
  12% {
    box-shadow: 0 0 2px rgba(0, 21, 209, 0.1);
    border-color: rgba(0, 21, 209, 0.15);
  }
  30% {
    box-shadow: 0 0 8px var(--sds-primary-glow);
    border-color: rgba(0, 21, 209, 0.5);
  }
  32% {
    box-shadow: none;
    border-color: rgba(0, 21, 209, 0.15);
  }
}

/* 92 · Expand ----------------------------------------- */

.sds-loader-expand {
  width: 12px;
  height: 12px;
  background: var(--sds-primary);
  animation: sds-loaderExpand 1.6s ease-in-out infinite;
}

@keyframes sds-loaderExpand {
  0%,
  100% {
    transform: scale(1);
    border-radius: 4px;
  }
  50% {
    transform: scale(2.5);
    border-radius: 50%;
    opacity: 0.5;
  }
}

/* 93 · Prism ------------------------------------------ */

.sds-loader-prism {
  width: 36px;
  height: 36px;
  background: conic-gradient(
    var(--sds-primary),
    #8b5cf6,
    var(--sds-accent),
    #06b6d4,
    #10b981,
    var(--sds-primary)
  );
  border-radius: 50%;
  animation: sds-cometSpin 2s linear infinite;
}

/* 94 · Neural ----------------------------------------- */

.sds-loader-neural {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 21, 209, 0.2);
  animation: sds-loaderNeural var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-loaderNeural {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(0, 21, 209, 0.15),
      0 0 0 0 rgba(0, 21, 209, 0.05);
  }
  33% {
    box-shadow:
      0 0 0 6px rgba(0, 21, 209, 0.1),
      0 0 0 12px rgba(0, 21, 209, 0.03);
  }
  66% {
    box-shadow:
      0 0 0 10px rgba(0, 21, 209, 0.06),
      0 0 0 20px rgba(0, 21, 209, 0.02);
  }
}

/* 95 · Breath ----------------------------------------- */

.sds-loader-breath {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderBreath 2s ease-in-out infinite;
}

@keyframes sds-loaderBreath {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 96 · Pendulum --------------------------------------- */

.sds-loader-pendulum {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderPendulum 1.2s ease-in-out infinite;
  transform-origin: center -18px;
}

@keyframes sds-loaderPendulum {
  0%,
  100% {
    transform: rotate(-28deg);
  }
  50% {
    transform: rotate(28deg);
  }
}

/* 97 · Cube ------------------------------------------- */

.sds-loader-cube {
  width: 28px;
  height: 28px;
  background: var(--sds-primary);
  animation: sds-loaderCube 2s ease-in-out infinite;
}

@keyframes sds-loaderCube {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    border-radius: 4px;
  }
  25% {
    transform: perspective(200px) rotateX(90deg) rotateY(0deg);
    border-radius: 50%;
  }
  50% {
    transform: perspective(200px) rotateX(90deg) rotateY(90deg);
    border-radius: 4px;
  }
  75% {
    transform: perspective(200px) rotateX(0deg) rotateY(90deg);
    border-radius: 50%;
  }
  100% {
    transform: perspective(200px) rotateX(0deg) rotateY(180deg);
    border-radius: 4px;
  }
}

/* 98 · Solar ------------------------------------------ */

.sds-loader-solar {
  position: relative;
  width: 44px;
  height: 44px;
}

.sds-loader-solar::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderSolar 2s ease-in-out infinite;
}

.sds-loader-solar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 21, 209, 0.4);
  animation: sds-cometSpin var(--sds-duration-dramatic, 3s) linear infinite;
}

@keyframes sds-loaderSolar {
  0%,
  100% {
    box-shadow: 0 0 8px var(--sds-primary-glow);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 20px var(--sds-primary-glow),
      0 0 40px rgba(0, 21, 209, 0.1);
    transform: scale(1.15);
  }
}

/* 99 · Infinity --------------------------------------- */

.sds-loader-infinity {
  position: relative;
  width: 56px;
  height: 28px;
}

.sds-loader-infinity::before,
.sds-loader-infinity::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--sds-primary);
  top: 50%;
  margin-top: -10px;
}

.sds-loader-infinity::before {
  left: 0;
  animation: sds-cometSpin 1.2s linear infinite;
  border-top-color: transparent;
}

.sds-loader-infinity::after {
  right: 0;
  animation: sds-cometSpin 1.2s linear infinite reverse;
  border-bottom-color: transparent;
}

/* 100 · Star ------------------------------------------ */

.sds-loader-star {
  width: 36px;
  height: 36px;
  background: var(--sds-primary);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation:
    sds-cometSpin 2s linear infinite,
    sds-loaderStar 2s ease-in-out infinite;
}

@keyframes sds-loaderStar {
  0%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8) rotate(180deg);
  }
}

/* 101 · Matrix Bars ----------------------------------- */

.sds-loader-matrix {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
}

.sds-loader-matrix > * {
  width: 4px;
  border-radius: 2px;
  background: var(--sds-primary);
  animation: sds-loaderMatrix 1.2s steps(4) infinite;
}

.sds-loader-matrix > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-loader-matrix > *:nth-child(2) {
  animation-delay: 0.1s;
}

.sds-loader-matrix > *:nth-child(3) {
  animation-delay: 0.2s;
}

.sds-loader-matrix > *:nth-child(4) {
  animation-delay: 0.3s;
}

.sds-loader-matrix > *:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes sds-loaderMatrix {
  0% {
    height: 100%;
    opacity: 1;
  }
  25% {
    height: 40%;
    opacity: 0.6;
  }
  50% {
    height: 80%;
    opacity: 0.9;
  }
  75% {
    height: 20%;
    opacity: 0.3;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}

/* 102 · Snake ----------------------------------------- */

.sds-loader-snake {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--sds-primary-dim);
}

.sds-loader-snake::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--sds-primary);
  border-right-color: var(--sds-primary);
  animation: sds-cometSpin 1.2s var(--sds-ease-bounce, cubic-bezier(0.68, -0.55, 0.27, 1.55)) infinite;
}

/* 103 · Glitch ---------------------------------------- */

.sds-loader-glitch {
  width: 36px;
  height: 36px;
  background: var(--sds-primary);
  border-radius: 4px;
  animation: sds-loaderGlitch 2s steps(1) infinite;
}

@keyframes sds-loaderGlitch {
  0%,
  100% {
    transform: none;
    opacity: 1;
    filter: none;
  }
  8% {
    transform: translate(3px, -2px) scaleX(1.1);
    filter: hue-rotate(60deg);
  }
  9% {
    transform: none;
    filter: none;
  }
  40% {
    transform: translate(-2px, 1px);
    opacity: 0.7;
  }
  41% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: scaleY(1.2) scaleX(0.9);
  }
  76% {
    transform: none;
  }
}

/* 104 · Warp ------------------------------------------ */

.sds-loader-warp {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--sds-primary),
    var(--sds-primary-dim),
    var(--sds-primary)
  );
  animation:
    sds-cometSpin 1.2s linear infinite,
    sds-loaderWarp 2s ease-in-out infinite;
}

@keyframes sds-loaderWarp {
  0%,
  100% {
    transform: scale(1) rotate(0);
  }
  50% {
    transform: scale(0.7) rotate(180deg);
  }
}

/* 105 · Hex ------------------------------------------- */

.sds-loader-hex {
  width: 36px;
  height: 36px;
  background: var(--sds-primary);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation:
    sds-cometSpin 2s linear infinite,
    sds-loaderHex 2s ease-in-out infinite;
}

@keyframes sds-loaderHex {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.6;
    filter: brightness(1.4);
  }
}

/* 106 · Quantum --------------------------------------- */

.sds-loader-quantum {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderQuantum 1.6s steps(1) infinite;
}

@keyframes sds-loaderQuantum {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  10% {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 1;
    transform: scale(1.2);
  }
  30% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.4);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 107 · Liquid Ring ----------------------------------- */

.sds-loader-liquid-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--sds-primary);
  border-bottom-color: var(--sds-accent);
  animation:
    sds-cometSpin 1s linear infinite,
    sds-loaderLiquidRing var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-loaderLiquidRing {
  0%,
  100% {
    filter: blur(0);
  }
  50% {
    filter: blur(1px) brightness(1.3);
  }
}

/* 108 · Hourglass ------------------------------------- */

.sds-loader-hourglass {
  width: 20px;
  height: 36px;
  background: var(--sds-primary);
  clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%, 40% 50%);
  animation: sds-loaderHourglass 1.8s ease-in-out infinite;
}

@keyframes sds-loaderHourglass {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}

/* 109 · Crystal --------------------------------------- */

.sds-loader-crystal {
  width: 32px;
  height: 32px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.6),
    var(--sds-primary),
    rgba(139, 92, 246, 0.6)
  );
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation:
    sds-cometSpin var(--sds-duration-dramatic, 3s) linear infinite,
    sds-loaderCrystal var(--sds-duration-dramatic, 3s) ease-in-out infinite;
}

@keyframes sds-loaderCrystal {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5) saturate(1.4);
  }
}

/* 110 · Plasma Ring ----------------------------------- */

.sds-loader-plasma-ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation:
    sds-cometSpin 1.6s linear infinite,
    sds-loaderPlasmaRing 2.4s ease-in-out infinite;
  border: 2px solid var(--sds-primary);
}

@keyframes sds-loaderPlasmaRing {
  0%,
  100% {
    box-shadow:
      0 0 8px var(--sds-primary-glow),
      inset 0 0 8px var(--sds-primary-dim);
    filter: hue-rotate(0deg);
  }
  33% {
    box-shadow:
      0 0 16px rgba(139, 92, 246, 0.4),
      inset 0 0 12px rgba(139, 92, 246, 0.1);
    filter: hue-rotate(120deg);
  }
  66% {
    box-shadow:
      0 0 12px rgba(209, 0, 40, 0.3),
      inset 0 0 8px rgba(209, 0, 40, 0.08);
    filter: hue-rotate(240deg);
  }
}

/* 111 · Helix Dots ------------------------------------ */

.sds-loader-helix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}

.sds-loader-helix > * {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderHelix 1.2s ease-in-out infinite;
}

.sds-loader-helix > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-loader-helix > *:nth-child(2) {
  animation-delay: 0.12s;
  background: color-mix(in srgb, var(--sds-primary) 70%, var(--sds-accent));
}

.sds-loader-helix > *:nth-child(3) {
  animation-delay: 0.24s;
}

.sds-loader-helix > *:nth-child(4) {
  animation-delay: 0.36s;
  background: color-mix(in srgb, var(--sds-primary) 70%, var(--sds-accent));
}

.sds-loader-helix > *:nth-child(5) {
  animation-delay: 0.48s;
}

@keyframes sds-loaderHelix {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-16px) scale(0.7);
    opacity: 0.5;
  }
}

/* 112 · Clock ----------------------------------------- */

.sds-loader-clock {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(0, 21, 209, 0.25);
}

.sds-loader-clock::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 40%;
  background: var(--sds-primary);
  top: 10%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  animation: sds-cometSpin 2s linear infinite;
}

.sds-loader-clock::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 30%;
  background: var(--sds-accent);
  top: 20%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  animation: sds-cometSpin 24s linear infinite;
}

/* 113 · Mosaic ---------------------------------------- */

.sds-loader-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 12px);
  gap: 3px;
}

.sds-loader-mosaic > * {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--sds-primary);
  animation: sds-loaderMosaic 1.8s ease-in-out infinite;
}

.sds-loader-mosaic > *:nth-child(1) {
  animation-delay: 0s;
}

.sds-loader-mosaic > *:nth-child(2) {
  animation-delay: 0.1s;
}

.sds-loader-mosaic > *:nth-child(3) {
  animation-delay: 0.2s;
}

.sds-loader-mosaic > *:nth-child(4) {
  animation-delay: 0.3s;
}

.sds-loader-mosaic > *:nth-child(5) {
  animation-delay: 0.4s;
  background: var(--sds-accent);
}

.sds-loader-mosaic > *:nth-child(6) {
  animation-delay: 0.5s;
}

.sds-loader-mosaic > *:nth-child(7) {
  animation-delay: 0.6s;
}

.sds-loader-mosaic > *:nth-child(8) {
  animation-delay: 0.7s;
}

.sds-loader-mosaic > *:nth-child(9) {
  animation-delay: 0.8s;
}

@keyframes sds-loaderMosaic {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0);
    opacity: 0;
  }
}

/* 114 · Data ------------------------------------------ */

.sds-loader-data {
  width: 44px;
  height: 6px;
  border-radius: 3px;
  background: var(--sds-primary-dim);
  overflow: hidden;
  position: relative;
}

.sds-loader-data::before {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--sds-primary);
  animation: sds-loaderData var(--sds-duration-slow, 1.4s) ease-in-out infinite;
}

@keyframes sds-loaderData {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateX(260%);
    opacity: 0.4;
  }
}

/* 115 · Bar ------------------------------------------- */

.sds-loader-bar {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--sds-primary-dim);
  overflow: hidden;
  position: relative;
}

.sds-loader-bar::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sds-primary), #8b5cf6);
  animation: sds-loaderBar 1.8s ease-in-out infinite;
}

@keyframes sds-loaderBar {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left;
  }
  55% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* 116 · Spark ----------------------------------------- */

.sds-loader-spark {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--sds-primary);
  animation: sds-loaderSpark 1.8s ease-in-out infinite;
}

.sds-loader-spark::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--sds-primary);
  animation: sds-loaderPulse 1.8s ease-in-out infinite;
}

@keyframes sds-loaderSpark {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 21, 209, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 16px var(--sds-primary-glow);
  }
}

.sds-loader-progress-glow {
  animation: sds-progressGlow 2.4s ease infinite;
}

/*  GPU compositing hints (loaders) — split from the global will-change rule; must stay after the class definitions above  */

.sds-loader-vortex,
.sds-loader-fluid,
.sds-loader-morph,
.sds-loader-prism,
.sds-loader-warp,
.sds-loader-plasma-ring,
.sds-loader-orbital::before,
.sds-loader-orbital::after {
  will-change: transform, opacity;
}


/* ====================================================================
   BATCH 12 — Loaders: Dots & Blobs (7) + Ring & Circle (6)
   ==================================================================== */

/* -- Dots & Blobs -------------------------------------------------- */

/* 117 · Dots Wave — children Y-wave in sequence */
@keyframes sds-dotsWaveKf {
  0%,60%,100% { transform: translateY(0px); }
  30%         { transform: translateY(-10px); }
}
.sds-loader-dots-wave {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.sds-loader-dots-wave > * {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-dotsWaveKf .9s ease-in-out infinite;
}
.sds-loader-dots-wave > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-dots-wave > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-dots-wave > *:nth-child(4) { animation-delay: .45s; }

/* 118 · Dots Fade — children opacity pulse in sequence */
@keyframes sds-dotsFadeKf {
  0%,80%,100% { opacity: .2; }
  40%         { opacity: 1; }
}
.sds-loader-dots-fade {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.sds-loader-dots-fade > * {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-dotsFadeKf .9s ease-in-out infinite;
}
.sds-loader-dots-fade > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-dots-fade > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-dots-fade > *:nth-child(4) { animation-delay: .45s; }

/* 119 · Dots Flip — children rotateY flip in sequence */
@keyframes sds-dotsFlipKf {
  0%,50%,100% { transform: rotateY(0deg); }
  25%         { transform: rotateY(180deg); }
}
.sds-loader-dots-flip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  perspective: 60px;
}
.sds-loader-dots-flip > * {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-dotsFlipKf 1.2s ease-in-out infinite;
}
.sds-loader-dots-flip > *:nth-child(2) { animation-delay: .2s; }
.sds-loader-dots-flip > *:nth-child(3) { animation-delay: .4s; }
.sds-loader-dots-flip > *:nth-child(4) { animation-delay: .6s; }

/* 120 · Dots Bounce — children Y bounce with gravity curve */
@keyframes sds-dotsBounceKf {
  0%,20%,50%,80%,100% { transform: translateY(0px); }
  40%                  { transform: translateY(-12px); }
  60%                  { transform: translateY(-5px); }
}
.sds-loader-dots-bounce {
  display: inline-flex;
  gap: 5px;
  align-items: flex-end;
}
.sds-loader-dots-bounce > * {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-dotsBounceKf 1.1s ease infinite;
}
.sds-loader-dots-bounce > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-dots-bounce > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-dots-bounce > *:nth-child(4) { animation-delay: .45s; }

/* 121 · Dots Expand — children scale 0?1?0 in sequence */
@keyframes sds-dotsExpandKf {
  0%,100% { transform: scale(0); opacity: 0; }
  40%,60% { transform: scale(1); opacity: 1; }
}
.sds-loader-dots-expand {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.sds-loader-dots-expand > * {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-dotsExpandKf 1.2s ease-in-out infinite;
}
.sds-loader-dots-expand > *:nth-child(2) { animation-delay: .2s; }
.sds-loader-dots-expand > *:nth-child(3) { animation-delay: .4s; }
.sds-loader-dots-expand > *:nth-child(4) { animation-delay: .6s; }

/* 122 · Blob — clip-path polygon morphing organic shape */
@keyframes sds-blobMorphKf {
  0%,100% { clip-path: polygon(50% 5%, 93% 25%, 93% 75%, 50% 95%, 7% 75%, 7% 25%); }
  33%     { clip-path: polygon(28% 0%, 100% 28%, 78% 100%, 22% 100%, 0% 28%, 22% 0%); }
  66%     { clip-path: polygon(50% 0%, 100% 22%, 100% 78%, 50% 100%, 0% 78%, 0% 22%); }
}
.sds-loader-blob {
  display: inline-block;
  width: 36px; height: 36px;
  background: var(--sds-primary, currentColor);
  animation: sds-blobMorphKf 2.4s ease-in-out infinite;
}

/* 123 · Bubble — ring expands and pops on loop */
@keyframes sds-bubblePopKf {
  0%   { transform: scale(.15); opacity: .9; }
  70%  { transform: scale(1);   opacity: .3; }
  100% { transform: scale(1.3); opacity: 0; }
}
.sds-loader-bubble {
  display: inline-block;
  width: 28px; height: 28px;
  border: 2px solid var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-bubblePopKf 1.2s ease-out infinite;
}

/* -- Ring & Circle ------------------------------------------------- */

/* 124 · Dual Ring — concentric rings spinning opposite directions */
@keyframes sds-dualRingCW  { to { transform: rotate(360deg); } }
@keyframes sds-dualRingCCW { to { transform: rotate(-360deg); } }
.sds-loader-dual-ring {
  display: inline-block;
  position: relative;
  width: 36px; height: 36px;
  border: 3px solid transparent;
  border-top-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-dualRingCW .8s linear infinite;
}
.sds-loader-dual-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid transparent;
  border-bottom-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-dualRingCCW .6s linear infinite;
}

/* 125 · Ring Split — two opposing half-arcs counter-rotate */
@keyframes sds-ringSplitCW  { to { transform: rotate(360deg); } }
@keyframes sds-ringSplitCCW { to { transform: rotate(-360deg); } }
.sds-loader-ring-split {
  display: inline-block;
  position: relative;
  width: 36px; height: 36px;
  border: 3px solid transparent;
  border-top-color: var(--sds-primary, currentColor);
  border-right-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ringSplitCW .9s linear infinite;
}
.sds-loader-ring-split::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 3px solid transparent;
  border-bottom-color: var(--sds-primary, currentColor);
  border-left-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ringSplitCCW .9s linear infinite;
}

/* 126 · Spin Dot — ring with orbiting bead via offset-path */
@keyframes sds-spinDotOrbit { to { transform: rotate(360deg); } }
@keyframes sds-spinDotBead  { to { offset-distance: 100%; } }
.sds-loader-spin-dot {
  display: inline-block;
  position: relative;
  width: 36px; height: 36px;
  border: 2px solid rgba(0, 0, 0, .14);
  border-radius: 50%;
  animation: sds-spinDotOrbit 2.4s linear infinite;
}
.sds-loader-spin-dot::before {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: var(--sds-primary, currentColor);
  border-radius: 50%;
  offset-path: border-box;
  offset-distance: 0%;
  animation: sds-spinDotBead 1s linear infinite;
}

/* 127 · Ring Chase — twin beads chase each other around border-box */
@keyframes sds-ringChaseKf { to { offset-distance: 100%; } }
.sds-loader-ring-chase {
  display: inline-block;
  position: relative;
  width: 36px; height: 36px;
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 50%;
}
.sds-loader-ring-chase::before {
  content: "";
  position: absolute;
  width: 32%; height: 3px;
  background: var(--sds-primary, currentColor);
  border-radius: 3px;
  offset-path: border-box;
  offset-distance: 0%;
  animation: sds-ringChaseKf 1.2s cubic-bezier(.4,0,.6,1) infinite;
}
.sds-loader-ring-chase::after {
  content: "";
  position: absolute;
  width: 22%; height: 3px;
  background: var(--sds-primary, currentColor);
  border-radius: 3px;
  offset-path: border-box;
  offset-distance: 48%;
  animation: sds-ringChaseKf 1.2s cubic-bezier(.4,0,.6,1) infinite .35s;
}

/* 128 · Eclipse — two discs slide past each other */
@keyframes sds-eclipseKf {
  0%,100% { transform: translateX(-7px); opacity: .75; }
  50%     { transform: translateX(7px);  opacity: .9; }
}
.sds-loader-eclipse {
  display: inline-block;
  position: relative;
  width: 40px; height: 20px;
}
.sds-loader-eclipse::before,
.sds-loader-eclipse::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
}
.sds-loader-eclipse::before {
  left: 0;
  animation: sds-eclipseKf 1.5s ease-in-out infinite;
}
.sds-loader-eclipse::after {
  right: 0;
  animation: sds-eclipseKf 1.5s ease-in-out infinite .75s;
}

/* 129 · Halo — two staggered expanding-fading rings */
@keyframes sds-haloExpandKf {
  0%   { transform: scale(.2); opacity: .85; }
  100% { transform: scale(2);  opacity: 0; }
}
.sds-loader-halo {
  display: inline-block;
  position: relative;
  width: 28px; height: 28px;
  border: 2px solid var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-haloExpandKf 1.4s ease-out infinite;
}
.sds-loader-halo::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-haloExpandKf 1.4s ease-out infinite .7s;
}


/* ====================================================================
   BATCH 13 — Loaders: Line & Bar (6) + Morph & Shape (6)
   ==================================================================== */

/* -- Line & Bar ---------------------------------------------------- */

/* 130 · Fill Bar — progress fill sweeps left?right then fades */
@keyframes sds-ldBarFill {
  0%   { transform: scaleX(0); opacity: 1; }
  65%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.sds-loader-fill-bar {
  display: inline-block;
  position: relative;
  width: 60px; height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .12);
  overflow: hidden;
}
.sds-loader-fill-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--sds-primary, currentColor);
  transform-origin: left;
  animation: sds-ldBarFill 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* 131 · Bar Pulse — bar breathes scale on center axis */
@keyframes sds-ldBarPulse {
  0%,100% { transform: scaleX(.2); opacity: .45; }
  50%     { transform: scaleX(1);  opacity: 1; }
}
.sds-loader-bar-pulse {
  display: inline-block;
  width: 60px; height: 6px;
  border-radius: 3px;
  background: var(--sds-primary, currentColor);
  transform-origin: center;
  animation: sds-ldBarPulse 1.2s ease-in-out infinite;
}

/* 132 · Bar Swing — bright sliver slides end to end across track */
@keyframes sds-ldBarSwing {
  0%   { transform: translateX(-16px); }
  100% { transform: translateX(76px); }
}
.sds-loader-bar-swing {
  display: inline-block;
  position: relative;
  width: 60px; height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .12);
  overflow: hidden;
}
.sds-loader-bar-swing::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 12px;
  border-radius: 3px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldBarSwing 1s cubic-bezier(.4, 0, .6, 1) infinite alternate;
}

/* 133 · Track — dot races back and forth along a rail */
@keyframes sds-ldTrackRun {
  0%   { transform: translateX(0)    translateY(-50%); }
  100% { transform: translateX(40px) translateY(-50%); }
}
.sds-loader-track {
  display: inline-block;
  position: relative;
  width: 56px; height: 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .12);
}
.sds-loader-track::before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldTrackRun 1s cubic-bezier(.4, 0, .6, 1) infinite alternate;
}

/* 134 · Stripes — diagonal stripe pattern scrolls across bar */
@keyframes sds-ldStripes {
  from { transform: translateX(0); }
  to   { transform: translateX(14px); }
}
.sds-loader-stripes {
  display: inline-block;
  position: relative;
  width: 64px; height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .1);
  overflow: hidden;
}
.sds-loader-stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 200%;
  background: repeating-linear-gradient(
    -45deg,
    var(--sds-primary, currentColor) 0px,
    var(--sds-primary, currentColor) 5px,
    transparent 5px,
    transparent 14px
  );
  animation: sds-ldStripes .7s linear infinite;
}

/* 135 · Equalizer — 4 bars pulse to different heights (requiresChildren) */
@keyframes sds-ldEqualizerA { 0%,100% { transform: scaleY(.2); } 50% { transform: scaleY(1);    } }
@keyframes sds-ldEqualizerB { 0%,100% { transform: scaleY(.7); } 50% { transform: scaleY(.25); } }
@keyframes sds-ldEqualizerC { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(.85); } }
@keyframes sds-ldEqualizerD { 0%,100% { transform: scaleY(.9); } 50% { transform: scaleY(.3);  } }
.sds-loader-equalizer {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
  height: 24px;
}
.sds-loader-equalizer > * {
  width: 5px; height: 24px;
  border-radius: 2px 2px 0 0;
  background: var(--sds-primary, currentColor);
  transform-origin: bottom;
}
.sds-loader-equalizer > *:nth-child(1) { animation: sds-ldEqualizerA .8s ease-in-out infinite; }
.sds-loader-equalizer > *:nth-child(2) { animation: sds-ldEqualizerB .8s ease-in-out infinite .1s; }
.sds-loader-equalizer > *:nth-child(3) { animation: sds-ldEqualizerC .8s ease-in-out infinite .2s; }
.sds-loader-equalizer > *:nth-child(4) { animation: sds-ldEqualizerD .8s ease-in-out infinite .3s; }

/* -- Morph & Shape ------------------------------------------------- */

/* 136 · Morph Geo — square ? diamond ? circle via clip-path */
@keyframes sds-ldMorphGeo {
  0%,100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  33%     { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
  66%     { clip-path: circle(50% at 50% 50%); }
}
.sds-loader-morph-geo {
  display: inline-block;
  width: 28px; height: 28px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldMorphGeo 1.8s ease-in-out infinite;
}

/* 137 · Fold — square folds in 3D perspective on each axis in turn */
@keyframes sds-ldFold {
  0%,100% { transform: perspective(60px) rotateX(0deg)   rotateY(0deg); }
  25%     { transform: perspective(60px) rotateX(0deg)   rotateY(180deg); }
  50%     { transform: perspective(60px) rotateX(180deg) rotateY(180deg); }
  75%     { transform: perspective(60px) rotateX(180deg) rotateY(0deg); }
}
.sds-loader-fold {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldFold 1.6s ease-in-out infinite;
}

/* 138 · Pinwheel — 4 petal-dots fade in sequence (requiresChildren) */
@keyframes sds-ldPinwheelFade { 0%,100% { opacity: .1; } 50% { opacity: 1; } }
.sds-loader-pinwheel {
  display: inline-block;
  position: relative;
  width: 28px; height: 28px;
}
.sds-loader-pinwheel > * {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldPinwheelFade .8s ease-in-out infinite;
}
.sds-loader-pinwheel > *:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.sds-loader-pinwheel > *:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); animation-delay: .2s; }
.sds-loader-pinwheel > *:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: .4s; }
.sds-loader-pinwheel > *:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); animation-delay: .6s; }

/* 139 · Coil — three nested arcs spinning at different speeds */
@keyframes sds-ldCoilCW  { to { transform: rotate(360deg); } }
@keyframes sds-ldCoilCCW { to { transform: rotate(-360deg); } }
.sds-loader-coil {
  display: inline-block;
  position: relative;
  width: 30px; height: 30px;
  border: 3px solid transparent;
  border-top-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ldCoilCW .8s linear infinite;
}
.sds-loader-coil::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid transparent;
  border-top-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ldCoilCCW .5s linear infinite;
}
.sds-loader-coil::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid transparent;
  border-top-color: var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ldCoilCW .3s linear infinite;
}

/* 140 · Flip Card — rectangle flips on Y axis like turning a card */
@keyframes sds-ldFlipCard {
  0%   { transform: perspective(80px) rotateY(0deg); }
  49%  { transform: perspective(80px) rotateY(90deg); opacity: .3; }
  51%  { transform: perspective(80px) rotateY(-90deg); opacity: .3; }
  100% { transform: perspective(80px) rotateY(0deg); }
}
.sds-loader-flip-card {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--sds-primary, currentColor);
  border-radius: 3px;
  animation: sds-ldFlipCard 1.2s ease-in-out infinite;
}

/* 141 · Diamond — square rotates 180° and pulses scale */
@keyframes sds-ldDiamond {
  0%,100% { transform: rotate(45deg) scale(1);   opacity: 1; }
  50%     { transform: rotate(225deg) scale(.6); opacity: .45; }
}
.sds-loader-diamond {
  display: inline-block;
  width: 20px; height: 20px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldDiamond 1.2s ease-in-out infinite;
}


/* ====================================================================
   BATCH 14 — Loaders: Geometric Spinners (6) + Glow & Filter (6)
   ==================================================================== */

/* -- Geometric Spinners -------------------------------------------- */

/* 142 · Squares — 2×2 grid cells pop in rolling sequence (requiresChildren) */
@keyframes sds-ldSquaresKf {
  0%,100% { transform: scale(0); opacity: 0; }
  50%     { transform: scale(1); opacity: 1; }
}
.sds-loader-squares {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 24px; height: 24px;
}
.sds-loader-squares > * {
  background: var(--sds-primary, currentColor);
  border-radius: 2px;
  animation: sds-ldSquaresKf .9s ease-in-out infinite;
}
.sds-loader-squares > *:nth-child(1) { animation-delay: 0s; }
.sds-loader-squares > *:nth-child(2) { animation-delay: .15s; }
.sds-loader-squares > *:nth-child(3) { animation-delay: .3s; }
.sds-loader-squares > *:nth-child(4) { animation-delay: .45s; }

/* 143 · Isocube — square spins on a tilted perspective axis */
@keyframes sds-ldIsocube { to { transform: perspective(60px) rotateX(-22deg) rotateY(360deg); } }
.sds-loader-isocube {
  display: inline-block;
  width: 22px; height: 22px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldIsocube 1.8s linear infinite;
}

/* 144 · Metronome — thin bar pivots left-right from its base */
@keyframes sds-ldMetronome {
  0%,100% { transform: rotate(-38deg); }
  50%     { transform: rotate(38deg); }
}
.sds-loader-metronome {
  display: inline-block;
  width: 4px; height: 30px;
  border-radius: 2px;
  background: var(--sds-primary, currentColor);
  transform-origin: bottom center;
  animation: sds-ldMetronome 1s ease-in-out infinite;
}

/* 145 · Tape — ball squashes and stretches on each bounce */
@keyframes sds-ldTape {
  0%,100% { transform: translateY(-10px) scaleX(.8)  scaleY(1.25); }
  40%     { transform: translateY(4px)   scaleX(1.25) scaleY(.75); }
  60%     { transform: translateY(-6px)  scaleX(.9)  scaleY(1.1); }
}
.sds-loader-tape {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldTape .85s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* 146 · Chase Box — bead races along host border via offset-path */
@keyframes sds-ldChaseBox { to { offset-distance: 100%; } }
.sds-loader-chase-box {
  display: inline-block;
  position: relative;
  width: 32px; height: 32px;
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
}
.sds-loader-chase-box::before {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: var(--sds-primary, currentColor);
  border-radius: 2px;
  offset-path: border-box;
  offset-distance: 0%;
  animation: sds-ldChaseBox 1.2s linear infinite;
}

/* 147 · Windmill — 4 rectangular blades fade in cardinal sequence (requiresChildren) */
@keyframes sds-ldWindmillFade { 0%,100% { opacity: .08; } 50% { opacity: 1; } }
.sds-loader-windmill {
  display: inline-block;
  position: relative;
  width: 28px; height: 28px;
}
.sds-loader-windmill > * {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 4px;
  border-radius: 2px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldWindmillFade 1s ease-in-out infinite;
}
.sds-loader-windmill > *:nth-child(1) { transform: translate(-50%, -14px) rotate(0deg);   animation-delay: 0s; }
.sds-loader-windmill > *:nth-child(2) { transform: translate(4px, -50%)   rotate(90deg);  animation-delay: .25s; }
.sds-loader-windmill > *:nth-child(3) { transform: translate(-50%, 10px)  rotate(0deg);   animation-delay: .5s; }
.sds-loader-windmill > *:nth-child(4) { transform: translate(-14px, -50%) rotate(90deg);  animation-delay: .75s; }

/* -- Glow & Filter ------------------------------------------------- */

/* 148 · Glow Pulse — dot radiates a breathing drop-shadow glow */
@keyframes sds-ldGlowPulse {
  0%,100% { filter: drop-shadow(0 0 2px currentColor); transform: scale(.88); opacity: .65; }
  50%     { filter: drop-shadow(0 0 14px currentColor); transform: scale(1.1); opacity: 1; }
}
.sds-loader-glow-pulse {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldGlowPulse 1.5s ease-in-out infinite;
}

/* 149 · Neon Flicker — bar sputters like a neon tube warming up */
@keyframes sds-ldNeonFlicker {
  0%,18%,22%,55%,57%,100% { opacity: 1;   filter: drop-shadow(0 0 8px currentColor); }
  20%,56%                 { opacity: .12; filter: none; }
}
.sds-loader-neon-flicker {
  display: inline-block;
  width: 4px; height: 28px;
  border-radius: 2px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldNeonFlicker 2.4s ease-in-out infinite;
}

/* 150 · Scanner — horizontal scan line sweeps down a bordered box */
@keyframes sds-ldScanner {
  0%   { transform: translateY(0); opacity: 1; }
  90%  { transform: translateY(36px); opacity: .3; }
  100% { transform: translateY(0); opacity: 0; }
}
.sds-loader-scanner {
  display: inline-block;
  position: relative;
  width: 36px; height: 36px;
  border: 2px solid rgba(0, 0, 0, .12);
  border-radius: 3px;
  overflow: hidden;
}
.sds-loader-scanner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 1px;
  background: var(--sds-primary, currentColor);
  filter: drop-shadow(0 2px 4px currentColor);
  animation: sds-ldScanner 1.6s ease-in-out infinite;
}

/* 151 · Spotlight — conic wedge sweeps in a circle like a spotlight */
@keyframes sds-ldSpotlight { to { transform: rotate(360deg); } }
.sds-loader-spotlight {
  display: inline-block;
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, .07);
}
.sds-loader-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 255deg,
    var(--sds-primary, currentColor) 272deg,
    transparent 289deg
  );
  animation: sds-ldSpotlight 1.2s linear infinite;
}

/* 152 · Beam — bar wipes in from left then exits right via clip-path */
@keyframes sds-ldBeam {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; }
  45%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  55%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); opacity: 0; }
}
.sds-loader-beam {
  display: inline-block;
  width: 44px; height: 3px;
  border-radius: 2px;
  background: var(--sds-primary, currentColor);
  filter: drop-shadow(0 0 4px currentColor);
  animation: sds-ldBeam 1.4s ease-in-out infinite;
}

/* 153 · Blur Pulse — dot dissolves in and out through a blur */
@keyframes sds-ldBlurPulse {
  0%,100% { filter: blur(7px); transform: scale(1.5); opacity: 0; }
  50%     { filter: blur(0px); transform: scale(1);   opacity: 1; }
}
.sds-loader-blur-pulse {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldBlurPulse 1.6s ease-in-out infinite;
}


/* ====================================================================
   BATCH 15 — Loaders: Finale mix (12) — loaders complete at 100/100
   ==================================================================== */

/* 154 · Timer — pie-fill sweeps around like a countdown clock */
@keyframes sds-ldTimerKf {
  0%   { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
  25%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%); }
  50%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%); }
  75%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); }
  100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); }
}
.sds-loader-timer {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldTimerKf 1.8s linear infinite;
}

/* 155 · Cursor — hard-blinking I-beam using step-end */
@keyframes sds-ldCursor {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}
.sds-loader-cursor {
  display: inline-block;
  width: 2px; height: 22px;
  border-radius: 1px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldCursor .9s step-end infinite;
}

/* 156 · Bounce Bar — 4 bars translate-Y bounce in sequence (requiresChildren) */
@keyframes sds-ldBounceBar {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-14px); }
  60%     { transform: translateY(-5px); }
}
.sds-loader-bounce-bar {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
  height: 24px;
}
.sds-loader-bounce-bar > * {
  width: 5px; height: 16px;
  border-radius: 2px 2px 0 0;
  background: var(--sds-primary, currentColor);
}
.sds-loader-bounce-bar > *:nth-child(1) { animation: sds-ldBounceBar .8s ease-in-out infinite; }
.sds-loader-bounce-bar > *:nth-child(2) { animation: sds-ldBounceBar .8s ease-in-out infinite .13s; }
.sds-loader-bounce-bar > *:nth-child(3) { animation: sds-ldBounceBar .8s ease-in-out infinite .26s; }
.sds-loader-bounce-bar > *:nth-child(4) { animation: sds-ldBounceBar .8s ease-in-out infinite .39s; }

/* 157 · Ripple Dot — central dot radiates two expanding ring waves */
@keyframes sds-ldRippleDotRing {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3.2); opacity: 0; }
}
.sds-loader-ripple-dot {
  display: inline-block;
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
}
.sds-loader-ripple-dot::before,
.sds-loader-ripple-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ldRippleDotRing 1.6s ease-out infinite;
}
.sds-loader-ripple-dot::after { animation-delay: .8s; }

/* 158 · Yo-Yo — ball drops, mini-bounces at bottom, snaps back */
@keyframes sds-ldYoYo {
  0%,100% { transform: translateY(-14px); }
  40%     { transform: translateY(4px); }
  55%     { transform: translateY(-4px); }
  70%     { transform: translateY(2px); }
}
.sds-loader-yo-yo {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldYoYo 1s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* 159 · Swivel — dot oscillates side to side with alternate timing */
@keyframes sds-ldSwivel {
  0%,100% { transform: translateX(-14px) scaleY(.85); }
  50%     { transform: translateX(14px)  scaleY(1.15); }
}
.sds-loader-swivel {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldSwivel 1s cubic-bezier(.4, 0, .6, 1) infinite alternate;
}

/* 160 · Gear — jagged polygon rotates like a mechanical cog */
@keyframes sds-ldGearSpin { to { transform: rotate(360deg); } }
.sds-loader-gear {
  display: inline-block;
  width: 28px; height: 28px;
  background: var(--sds-primary, currentColor);
  clip-path: polygon(
    50% 0%,  63% 11%, 79% 7%,  83% 23%,
    98% 32%, 93% 48%, 100% 62%, 87% 71%,
    88% 88%, 71% 89%, 62% 100%, 47% 93%,
    31% 98%, 26% 82%, 10% 76%, 15% 60%,
    3% 47%,  16% 37%, 13% 20%, 30% 18%, 37% 3%
  );
  animation: sds-ldGearSpin 2s linear infinite;
}

/* 161 · Drop — teardrop shape squashes on impact and lifts off */
@keyframes sds-ldDropKf {
  0%,100% { transform: translateY(-8px)  scaleX(1)    scaleY(1.25); }
  60%     { transform: translateY(5px)   scaleX(1.35) scaleY(.7); }
  75%     { transform: translateY(2px)   scaleX(.9)   scaleY(1.1); }
  88%     { transform: translateY(4px)   scaleX(1.1)  scaleY(.95); }
}
.sds-loader-drop {
  display: inline-block;
  width: 16px; height: 20px;
  background: var(--sds-primary, currentColor);
  clip-path: polygon(50% 0%, 100% 55%, 80% 100%, 20% 100%, 0% 55%);
  animation: sds-ldDropKf 1.1s ease-in infinite;
}

/* 162 · Ticker — rectangle flips on X axis like a flip-board tile */
@keyframes sds-ldTickerFlip {
  0%   { transform: perspective(50px) rotateX(0deg);   opacity: 1; }
  44%  { transform: perspective(50px) rotateX(-90deg); opacity: 0; }
  56%  { transform: perspective(50px) rotateX(90deg);  opacity: 0; }
  100% { transform: perspective(50px) rotateX(0deg);   opacity: 1; }
}
.sds-loader-ticker {
  display: inline-block;
  width: 22px; height: 16px;
  border-radius: 3px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldTickerFlip 1.2s ease-in-out infinite;
}

/* 163 · Expand Ring — three concentric rings radiate outward */
@keyframes sds-ldExpandRingKf {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
.sds-loader-expand-ring {
  display: inline-block;
  position: relative;
  width: 16px; height: 16px;
  border: 2px solid var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ldExpandRingKf 1.6s ease-out infinite;
}
.sds-loader-expand-ring::before,
.sds-loader-expand-ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--sds-primary, currentColor);
  border-radius: 50%;
  animation: sds-ldExpandRingKf 1.6s ease-out infinite;
}
.sds-loader-expand-ring::before { animation-delay: .5s; }
.sds-loader-expand-ring::after  { animation-delay: 1s; }

/* 164 · Spin Fade — 4 horizontal bars fade in rotational sequence (requiresChildren) */
@keyframes sds-ldSpinFadeKf { 0%,100% { opacity: .08; } 50% { opacity: 1; } }
.sds-loader-spin-fade {
  display: inline-block;
  position: relative;
  width: 28px; height: 28px;
}
.sds-loader-spin-fade > * {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 3px;
  border-radius: 3px;
  background: var(--sds-primary, currentColor);
  animation: sds-ldSpinFadeKf 1s ease-in-out infinite;
}
.sds-loader-spin-fade > *:nth-child(1) { transform: translate(-50%, -11px) rotate(0deg);   animation-delay: 0s; }
.sds-loader-spin-fade > *:nth-child(2) { transform: translate(1px, -50%)   rotate(90deg);  animation-delay: .25s; }
.sds-loader-spin-fade > *:nth-child(3) { transform: translate(-50%, 8px)   rotate(0deg);   animation-delay: .5s; }
.sds-loader-spin-fade > *:nth-child(4) { transform: translate(-13px, -50%) rotate(90deg);  animation-delay: .75s; }

/* 165 · Throb — energetic overshoot pulse, more forceful than breath */
@keyframes sds-ldThrob {
  0%,100% { transform: scale(1);   opacity: .8; }
  40%     { transform: scale(1.45); opacity: 1; }
  60%     { transform: scale(.88); opacity: .9; }
}
.sds-loader-throb {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--sds-primary, currentColor);
  animation: sds-ldThrob 1.1s ease-in-out infinite;
}