/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ZRNG — 25 Vibrant Loaders                                       ║
   ║  Each loader uses --accent CSS variable for theming              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.loader{display:inline-flex;align-items:center;justify-content:center}

/* ─── 1. Neon Spin ────────────────────────────────────────────── */
.loader-neon-spin{
  width:50px;height:50px;border-radius:50%;
  border:4px solid rgba(255,255,255,.08);
  border-top-color:var(--accent,#00e5ff);
  animation:nspin 1s linear infinite;
  box-shadow:0 0 16px var(--accent,#00e5ff);
}
@keyframes nspin{to{transform:rotate(360deg)}}

/* ─── 2. Pulse Bloom ──────────────────────────────────────────── */
.loader-pulse-bloom{
  width:46px;height:46px;border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 22px var(--accent,#00e5ff);
  animation:pbloom 1.2s ease-in-out infinite;
}
@keyframes pbloom{0%,100%{transform:scale(.55);opacity:.85}50%{transform:scale(1);opacity:1}}

/* ─── 3. Glitch ───────────────────────────────────────────────── */
.loader-glitch{
  font-family:monospace;font-size:18px;font-weight:900;
  color:var(--accent,#00e5ff);letter-spacing:2px;
  text-shadow:2px 0 #ec4899, -2px 0 #06b6d4;
  animation:glitch .65s infinite;
}
@keyframes glitch{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-2px,1px)}
  40%{transform:translate(-1px,-1px)}
  60%{transform:translate(1px,1px)}
  80%{transform:translate(2px,-1px)}
}

/* ─── 4. Helix ────────────────────────────────────────────────── */
.loader-helix{width:46px;height:46px;display:flex;flex-direction:column;gap:3px}
.loader-helix .h-row{display:flex;gap:3px;justify-content:center}
.loader-helix .h-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 8px var(--accent,#00e5ff);
  animation:helix 1.1s ease-in-out infinite;
}
.loader-helix .h-row:nth-child(1) .h-dot:nth-child(1){animation-delay:0s}
.loader-helix .h-row:nth-child(1) .h-dot:nth-child(2){animation-delay:.15s}
.loader-helix .h-row:nth-child(2) .h-dot:nth-child(1){animation-delay:.3s}
.loader-helix .h-row:nth-child(2) .h-dot:nth-child(2){animation-delay:.45s}
@keyframes helix{0%,100%{transform:scale(.5);opacity:.4}50%{transform:scale(1);opacity:1}}

/* ─── 5. Liquid ───────────────────────────────────────────────── */
.loader-liquid{
  width:46px;height:46px;border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 18px var(--accent,#00e5ff);
  animation:liquid 2.4s ease-in-out infinite;
}
@keyframes liquid{
  0%,100%{border-radius:50%;transform:rotate(0)}
  25%{border-radius:60% 40% 40% 60%;transform:rotate(90deg)}
  50%{border-radius:40% 60% 60% 40%;transform:rotate(180deg)}
  75%{border-radius:50% 50% 40% 60%;transform:rotate(270deg)}
}

/* ─── 6. Particles ────────────────────────────────────────────── */
.loader-particles{width:54px;height:54px;position:relative}
.loader-particles::before,.loader-particles::after{
  content:'';position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 10px var(--accent,#00e5ff);
  top:50%;left:50%;margin:-4.5px;
  animation:particle 1.5s linear infinite;
}
.loader-particles::after{animation-delay:.75s;opacity:.5}
@keyframes particle{
  0%{transform:rotate(0) translateX(0);opacity:0}
  15%{opacity:1}
  100%{transform:rotate(360deg) translateX(22px);opacity:0}
}

/* ─── 7. Matrix ───────────────────────────────────────────────── */
.loader-matrix{display:flex;gap:5px;color:var(--accent,#00e5ff)}
.loader-matrix .m-col{
  font-family:monospace;font-size:11px;font-weight:900;
  line-height:1.3;
  text-shadow:0 0 8px var(--accent,#00e5ff);
  animation:matrix .9s ease-in-out infinite;
}
.loader-matrix .m-col:nth-child(2){animation-delay:.3s}
.loader-matrix .m-col:nth-child(3){animation-delay:.6s}
@keyframes matrix{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ─── 8. Morph ────────────────────────────────────────────────── */
.loader-morph{
  width:40px;height:40px;
  border:3px solid var(--accent,#00e5ff);
  box-shadow:0 0 14px var(--accent,#00e5ff);
  animation:morph 2s ease-in-out infinite;
}
@keyframes morph{
  0%,100%{border-radius:0;transform:rotate(0)}
  25%{border-radius:50% 0;transform:rotate(90deg)}
  50%{border-radius:50%;transform:rotate(180deg)}
  75%{border-radius:0 50%;transform:rotate(270deg)}
}

/* ─── 9. Cube ─────────────────────────────────────────────────── */
.loader-cube{
  width:44px;height:44px;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 14px var(--accent,#00e5ff);
  animation:cube 1.6s ease-in-out infinite;
}
@keyframes cube{
  0%,100%{transform:rotate(0);border-radius:6px}
  50%{transform:rotate(180deg);border-radius:50%}
}

/* ─── 10. Snake ──────────────────────────────────────────────── */
.loader-snake{
  width:64px;height:8px;
  background:rgba(255,255,255,.1);
  border-radius:4px;overflow:hidden;position:relative;
}
.loader-snake::before{
  content:'';position:absolute;top:0;left:0;height:100%;width:40%;
  background:var(--accent,#00e5ff);
  border-radius:4px;
  box-shadow:0 0 10px var(--accent,#00e5ff);
  animation:snake 1.4s ease-in-out infinite;
}
@keyframes snake{
  0%  {left:-40%}
  100%{left:100%}
}

/* ─── 11. Bars ───────────────────────────────────────────────── */
.loader-bars{
  width:48px;height:44px;
  display:flex;align-items:flex-end;justify-content:center;gap:5px;
}
.loader-bars::before,.loader-bars span,.loader-bars::after{
  content:'';display:block;width:9px;border-radius:3px 3px 0 0;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 8px var(--accent,#00e5ff);
  animation:barJump 1s ease-in-out infinite;
}
.loader-bars::before{height:30px;animation-delay:0s}
.loader-bars span    {height:20px;animation-delay:.15s}
.loader-bars::after  {height:36px;animation-delay:.3s}
@keyframes barJump{
  0%,100%{transform:scaleY(.5);opacity:.5}
  50%    {transform:scaleY(1);opacity:1}
}

/* ─── 12. Radar ──────────────────────────────────────────────── */
.loader-radar{
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle, transparent 60%, rgba(255,255,255,.06) 62%, transparent 100%);
  border:2px solid rgba(255,255,255,.18);
  position:relative;overflow:hidden;
  box-shadow:0 0 16px var(--accent,#00e5ff),inset 0 0 14px rgba(255,255,255,.04);
}
.loader-radar::before{
  content:'';position:absolute;top:50%;left:50%;
  width:50%;height:2px;
  background:linear-gradient(90deg,var(--accent,#00e5ff),transparent);
  transform-origin:0 50%;
  animation:radar 1.6s linear infinite;
}
@keyframes radar{to{transform:rotate(360deg)}}

/* ─── 13. Dots Circle ────────────────────────────────────────── */
.loader-dots-circle{
  width:48px;height:48px;position:relative;
  animation:dotsCircleSpin 1.2s linear infinite;
}
.loader-dots-circle::before,.loader-dots-circle::after{
  content:'';position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 8px var(--accent,#00e5ff);
  left:50%;margin-left:-5px;
}
.loader-dots-circle::before{top:0}
.loader-dots-circle::after {bottom:0;opacity:.55}
@keyframes dotsCircleSpin{to{transform:rotate(360deg)}}

/* ─── 14. Infinity ───────────────────────────────────────────── */
.loader-infinity{
  width:60px;height:30px;position:relative;
}
.loader-infinity::before,.loader-infinity::after{
  content:'';position:absolute;width:24px;height:24px;
  border:3px solid var(--accent,#00e5ff);border-radius:50%;
  box-shadow:0 0 10px var(--accent,#00e5ff);
  top:3px;
  animation:infinity 1.4s linear infinite;
}
.loader-infinity::before{left:0}
.loader-infinity::after{right:0;animation-delay:-.7s}
@keyframes infinity{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(.6);opacity:.5}
}

/* ─── 15. Neon Cross ─────────────────────────────────────────── */
.loader-neon-cross{
  width:48px;height:48px;position:relative;
  animation:crossSpin 2s linear infinite;
}
.loader-neon-cross::before,.loader-neon-cross::after{
  content:'';position:absolute;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 12px var(--accent,#00e5ff);
  border-radius:2px;
}
.loader-neon-cross::before{
  width:6px;height:100%;left:50%;top:0;
  transform:translateX(-50%);
}
.loader-neon-cross::after{
  width:100%;height:6px;left:0;top:50%;
  transform:translateY(-50%);
}
@keyframes crossSpin{to{transform:rotate(360deg)}}

/* ─── 16. Orbit Dots ─────────────────────────────────────────── */
.loader-orbit-dots{
  width:54px;height:54px;position:relative;
}
.loader-orbit-dots::before,.loader-orbit-dots::after{
  content:'';position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 10px var(--accent,#00e5ff);
  top:50%;left:50%;margin:-5.5px 0 0 -5.5px;
}
.loader-orbit-dots::before{animation:orbitA 1.4s linear infinite}
.loader-orbit-dots::after {animation:orbitB 1.4s linear infinite;opacity:.55}
@keyframes orbitA{
  from{transform:rotate(0deg)   translateX(22px)}
  to  {transform:rotate(360deg) translateX(22px)}
}
@keyframes orbitB{
  from{transform:rotate(180deg) translateX(22px)}
  to  {transform:rotate(540deg) translateX(22px)}
}

/* ─── 17. Aurora ─────────────────────────────────────────────── */
.loader-aurora{
  width:52px;height:52px;border-radius:50%;
  background:conic-gradient(
    var(--accent,#7c3aed),
    #ec4899,
    #06b6d4,
    #10b981,
    #facc15,
    var(--accent,#7c3aed));
  animation:auroraSpin 1.4s linear infinite;
  position:relative;
}
.loader-aurora::after{
  content:'';position:absolute;inset:7px;border-radius:50%;
  background:#0a0616;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}

/* ─── 18. Heart ──────────────────────────────────────────────── */
.loader-heart{
  position:relative;width:48px;height:44px;
  animation:heartScale .85s ease-in-out infinite;
}
.loader-heart::before,.loader-heart::after{
  content:'';position:absolute;top:4px;
  width:24px;height:36px;
  background:var(--accent,#ec4899);
  border-radius:24px 24px 0 0;
  box-shadow:0 4px 18px rgba(236,72,153,.4);
}
.loader-heart::before{left:24px;transform:rotate(-45deg);transform-origin:0 100%}
.loader-heart::after {left:0;  transform:rotate(45deg); transform-origin:100% 100%}
@keyframes heartScale{
  0%,100%{transform:scale(.9)}
  50%    {transform:scale(1.05)}
}

/* ─── 19. Hexagon ────────────────────────────────────────────── */
.loader-hex{
  width:46px;height:46px;
  background:var(--accent,#7c3aed);
  box-shadow:0 0 14px var(--accent,#7c3aed);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation:hexSpin 1.4s ease-in-out infinite;
}
@keyframes hexSpin{
  0%,100%{transform:rotate(0) scale(1)}
  50%    {transform:rotate(180deg) scale(.8)}
}

/* ─── 20. Spectrum ───────────────────────────────────────────── */
.loader-spectrum{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:60px;height:36px;
}
.loader-spectrum::before,.loader-spectrum::after,
.loader-spectrum span{
  content:'';display:block;width:5px;height:30px;border-radius:3px;
  background:var(--accent,#00e5ff);
  box-shadow:0 0 8px var(--accent,#00e5ff);
  animation:spectrum 1s ease-in-out infinite;
}
.loader-spectrum::before        {animation-delay:0s}
.loader-spectrum span:nth-child(1){animation-delay:.12s}
.loader-spectrum span:nth-child(2){animation-delay:.24s}
.loader-spectrum span:nth-child(3){animation-delay:.36s}
.loader-spectrum::after         {animation-delay:.48s}
@keyframes spectrum{
  0%,100%{transform:scaleY(.35);opacity:.5}
  50%    {transform:scaleY(1);opacity:1}
}

/* ─── 21. Star ───────────────────────────────────────────────── */
.loader-star{
  width:50px;height:50px;
  background:var(--accent,#facc15);
  filter:drop-shadow(0 0 10px var(--accent,#facc15));
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation:starSpin 2.4s linear infinite;
}
@keyframes starSpin{
  0%  {transform:rotate(0)     scale(.85)}
  50% {transform:rotate(180deg) scale(1.05)}
  100%{transform:rotate(360deg) scale(.85)}
}

/* ─── Lottie placeholders (rendered via JS) ──────────────────── */
.loader-lottie-circle,
.loader-lottie-orbit,
.loader-lottie-steps,
.loader-lottie-reveal,
.loader-lottie-toast{width:54px;height:54px;display:flex;align-items:center;justify-content:center}