/* ═══════════════════════════════════════════════════════════════════
   AURA — 8 Premium Loader Animations
   Usage: <div class="loader loader-{id}" style="--accent:#00e5ff"></div>
   ═══════════════════════════════════════════════════════════════════ */

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

/* ── 1. Neon Orbit ──────────────────────────────────────────────────── */
.loader-neon-spin {
  width:60px; height:60px;
}
.loader-neon-spin::before, .loader-neon-spin::after {
  content:''; position:absolute; border-radius:50%;
}
.loader-neon-spin::before {
  inset:0;
  border:3px solid transparent;
  border-top-color: var(--accent,#00e5ff);
  border-right-color: var(--accent,#00e5ff);
  animation: neonSpin 1s linear infinite;
  box-shadow: 0 0 16px var(--accent,#00e5ff), inset 0 0 8px var(--accent,#00e5ff)44;
}
.loader-neon-spin::after {
  inset:8px;
  border:2px solid transparent;
  border-bottom-color: var(--accent,#00e5ff);
  opacity:.6;
  animation: neonSpin .7s linear infinite reverse;
}
@keyframes neonSpin { to { transform:rotate(360deg); } }

/* ── 2. Pulse Bloom ─────────────────────────────────────────────────── */
.loader-pulse-bloom {
  width:60px; height:60px;
}
.loader-pulse-bloom::before, .loader-pulse-bloom::after {
  content:''; position:absolute; border-radius:50%;
  border:2px solid var(--accent,#00e5ff);
}
.loader-pulse-bloom::before {
  inset:0;
  animation: bloom 1.4s ease-out infinite;
}
.loader-pulse-bloom::after {
  inset:10px;
  animation: bloom 1.4s .4s ease-out infinite;
  background: var(--accent,#00e5ff)22;
}
@keyframes bloom {
  0%   { transform:scale(0); opacity:1; }
  100% { transform:scale(1.5); opacity:0; }
}

/* ── 3. Glitch Text ─────────────────────────────────────────────────── */
.loader-glitch {
  width:120px; height:50px;
  font-family:'Syne',system-ui,sans-serif;
  font-size:28px; font-weight:800;
  color:var(--accent,#00e5ff);
  letter-spacing:2px;
  animation: glitchMain 2s infinite;
  position:relative; overflow:visible;
}
.loader-glitch::before {
  content:'AURA';
  position:absolute; inset:0;
  color:#ff0050; left:2px;
  clip-path:polygon(0 20%,100% 20%,100% 45%,0 45%);
  animation: glitchA 2s .1s infinite;
}
.loader-glitch::after {
  content:'AURA';
  position:absolute; inset:0;
  color:#00e5ff; left:-2px;
  clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%);
  animation: glitchB 2s .2s infinite;
}
@keyframes glitchMain {
  0%,90%,100%   { text-shadow:none; }
  91%           { text-shadow:3px 0 #ff0050,-3px 0 #00e5ff; }
  93%           { text-shadow:-3px 0 #ff0050,3px 0 #00e5ff; }
  95%           { text-shadow:none; }
  97%           { text-shadow:3px 0 #ff0050,-3px 0 #00e5ff; }
}
@keyframes glitchA {
  0%,90%,100%   { transform:none; }
  91%           { transform:translate(-4px, 1px); }
  94%           { transform:translate(4px,-1px); }
  97%           { transform:none; }
}
@keyframes glitchB {
  0%,90%,100%   { transform:none; }
  92%           { transform:translate(4px, 2px); }
  95%           { transform:translate(-4px,-2px); }
  98%           { transform:none; }
}

/* ── 4. DNA Helix ───────────────────────────────────────────────────── */
.loader-helix {
  width:40px; height:60px;
  flex-direction:column;
  justify-content:space-between;
  padding:4px 0;
}
.loader-helix .h-row {
  display:flex; justify-content:space-between; align-items:center; width:100%;
}
.loader-helix .h-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--accent,#00e5ff);
  animation: helixPulse 1.2s ease-in-out infinite;
  box-shadow:0 0 8px var(--accent,#00e5ff);
}
.loader-helix .h-dot:nth-child(2){animation-delay:.6s}
.loader-helix .h-row:nth-child(2) .h-dot{animation-delay:.2s}
.loader-helix .h-row:nth-child(2) .h-dot:nth-child(2){animation-delay:.8s}
.loader-helix .h-row:nth-child(3) .h-dot{animation-delay:.4s}
.loader-helix .h-row:nth-child(3) .h-dot:nth-child(2){animation-delay:1s}
@keyframes helixPulse {
  0%,100%{ opacity:.2; transform:scale(.6); }
  50%    { opacity:1;  transform:scale(1); }
}

/* ── 5. Liquid Fill ─────────────────────────────────────────────────── */
.loader-liquid {
  width:50px; height:50px; border-radius:50%;
  background:transparent;
  border:3px solid var(--accent,#00e5ff)44;
  overflow:hidden;
  box-shadow:0 0 16px var(--accent,#00e5ff)33;
}
.loader-liquid::before {
  content:'';
  position:absolute; bottom:-20px;
  width:100px; height:80px;
  background:var(--accent,#00e5ff);
  border-radius:40%;
  animation: liquidSpin 1.8s linear infinite, liquidFill 3s ease-in-out infinite alternate;
  opacity:.8;
}
@keyframes liquidSpin { to { transform:rotate(360deg); } }
@keyframes liquidFill {
  0%   { bottom:-30px; }
  100% { bottom:20px; }
}

/* ── 6. Particles ───────────────────────────────────────────────────── */
.loader-particles {
  width:70px; height:70px;
}
.loader-particles::before {
  content:''; position:absolute;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent,#00e5ff);
  box-shadow:
    22px 0 0 0 var(--accent,#00e5ff),
    -22px 0 0 0 var(--accent,#00e5ff),
    0 22px 0 0 var(--accent,#00e5ff),
    0 -22px 0 0 var(--accent,#00e5ff),
    16px 16px 0 0 var(--accent,#00e5ff),
    -16px 16px 0 0 var(--accent,#00e5ff),
    16px -16px 0 0 var(--accent,#00e5ff),
    -16px -16px 0 0 var(--accent,#00e5ff);
  animation: particleSpin 1.5s linear infinite, particlePulse 1.5s ease-in-out infinite;
}
@keyframes particleSpin { to { transform:rotate(360deg); } }
@keyframes particlePulse {
  0%,100%{ opacity:.3; transform:rotate(0) scale(.8); }
  50%    { opacity:1;  transform:rotate(180deg) scale(1); }
}

/* ── 7. Matrix Rain ─────────────────────────────────────────────────── */
.loader-matrix {
  width:80px; height:60px;
  font-family:'Courier New',monospace;
  font-size:12px;
  color:var(--accent,#00e5ff);
  display:flex; gap:4px; overflow:hidden;
}
.loader-matrix .m-col {
  display:flex; flex-direction:column;
  animation: matrixFall 1.5s linear infinite;
  opacity:.8;
}
.loader-matrix .m-col:nth-child(2){ animation-delay:.2s; }
.loader-matrix .m-col:nth-child(3){ animation-delay:.5s; }
.loader-matrix .m-col:nth-child(4){ animation-delay:.1s; }
.loader-matrix .m-col:nth-child(5){ animation-delay:.35s; }
@keyframes matrixFall {
  0%   { transform:translateY(-100%); opacity:0; }
  20%  { opacity:1; }
  100% { transform:translateY(100%); opacity:0; }
}

/* ── 8. Morph ───────────────────────────────────────────────────────── */
.loader-morph {
  width:60px; height:60px;
}
.loader-morph::before {
  content:'';
  width:50px; height:50px;
  background:transparent;
  border:3px solid var(--accent,#00e5ff);
  box-shadow:0 0 20px var(--accent,#00e5ff)66;
  animation: morphShape 2.5s ease-in-out infinite, morphSpin 5s linear infinite;
}
@keyframes morphShape {
  0%,100%{ border-radius:50%; }
  25%    { border-radius:0 30% 0 30%; }
  50%    { border-radius:30% 0 30% 0; transform:scale(1.1); }
  75%    { border-radius:30px 0; }
}
@keyframes morphSpin {
  to { transform:rotate(360deg); }
}

/* ═══ Loader Screen ══════════════════════════════════════════════════ */
#loaderScreen {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  transition:opacity .7s ease;
}
#loaderScreen.hiding { opacity:0; pointer-events:none; }