/* ================================================================
   Aurora Core — Indeterminate Loaders v5.4.4
   20 recolorable CSS/SVG loaders for indeterminate progress.

   Usage:
     <link rel="stylesheet" href="aurora-loaders.css">
     <div class="aurora-loader aurora-loader-orbit"></div>

   Recolor by setting --aurora-loader-color on the loader or an
   ancestor. Default is the Aurora hero (gold) token.

   Indeterminate progress is a HERO signal (active system state),
   so these glow. Do not route warning (amber) through this color
   knob — the Aurora gold-vs-amber rule still applies.
   ================================================================ */

:where(.aurora-loader) {
  /* Override this to recolor — derivatives re-mix automatically. */
  --aurora-loader-color: var(--accent-gold, #E8D080);
  --aurora-loader-size: 120px;

  --_c: var(--aurora-loader-color);
  --_c-soft:  color-mix(in oklab, var(--_c) 55%, transparent);
  --_c-faint: color-mix(in oklab, var(--_c) 15%, transparent);
  --_c-ghost: color-mix(in oklab, var(--_c) 6%, transparent);

  width: var(--aurora-loader-size);
  height: var(--aurora-loader-size);
  position: relative;
  color: var(--_c);
  /* ARIA hint for screen readers — pair with role="status" in markup. */
}

@keyframes aurora-loader-spin { to { transform: rotate(360deg); } }

/* 01 — ORBIT RING */
.aurora-loader-orbit {
  border-radius: 50%;
  border: 1.5px solid var(--_c-ghost);
}
.aurora-loader-orbit::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--_c);
  border-right-color: var(--_c-soft);
  filter: drop-shadow(0 0 6px var(--_c-soft));
  animation: aurora-loader-spin 1.1s linear infinite;
}

/* 02 — TRIPLE CONCENTRIC */
.aurora-loader-triple, .aurora-loader-triple * { border-radius: 50%; }
.aurora-loader-triple i {
  position: absolute; inset: 0;
  border: 1.5px solid transparent;
  border-top-color: var(--_c);
  animation: aurora-loader-spin 2s linear infinite;
}
.aurora-loader-triple i:nth-child(1) { animation-duration: 2.2s; }
.aurora-loader-triple i:nth-child(2) { inset: 14px; border-top-color: var(--_c-soft); animation-direction: reverse; animation-duration: 1.5s; }
.aurora-loader-triple i:nth-child(3) { inset: 28px; border-top-color: var(--_c); animation-duration: 1s; }

/* 03 — DATA BARS */
.aurora-loader-bars {
  display: flex; gap: 6px;
  align-items: center;
  height: calc(var(--aurora-loader-size) * 0.67);
  width: auto;
}
.aurora-loader-bars i {
  width: 6px; height: 100%;
  background: linear-gradient(var(--_c), var(--_c-soft));
  box-shadow: 0 0 12px var(--_c-soft);
  transform-origin: center;
  animation: aurora-loader-barPulse 1.1s ease-in-out infinite;
}
.aurora-loader-bars i:nth-child(1) { animation-delay: -0.10s; }
.aurora-loader-bars i:nth-child(2) { animation-delay: -0.25s; }
.aurora-loader-bars i:nth-child(3) { animation-delay: -0.40s; }
.aurora-loader-bars i:nth-child(4) { animation-delay: -0.55s; }
.aurora-loader-bars i:nth-child(5) { animation-delay: -0.70s; }
@keyframes aurora-loader-barPulse {
  0%, 100% { transform: scaleY(0.2); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* 04 — HEX SCAN */
.aurora-loader-hex svg { width: 100%; height: 100%; overflow: visible; }
.aurora-loader-hex .aurora-loader-stroke { stroke: var(--_c-ghost); fill: none; stroke-width: 1.5; }
.aurora-loader-hex .aurora-loader-sweep {
  stroke: var(--_c); fill: none; stroke-width: 2;
  stroke-dasharray: 60 300;
  filter: drop-shadow(0 0 6px var(--_c-soft));
  animation: aurora-loader-dashSpin 1.6s linear infinite;
}
@keyframes aurora-loader-dashSpin { to { stroke-dashoffset: -360; } }

/* 05 — SQUARE LOOP */
.aurora-loader-square {
  width: calc(var(--aurora-loader-size) * 0.83);
  height: calc(var(--aurora-loader-size) * 0.83);
  border: 1px solid var(--_c-faint);
}
.aurora-loader-square i {
  position: absolute;
  width: 10px; height: 10px;
  background: var(--_c);
  box-shadow: 0 0 10px var(--_c), 0 0 20px var(--_c-soft);
  top: -5px; left: -5px;
  animation: aurora-loader-perimeter 2s linear infinite;
}
@keyframes aurora-loader-perimeter {
  0%   { top: -5px;              left: -5px; }
  25%  { top: -5px;              left: calc(100% - 5px); }
  50%  { top: calc(100% - 5px);  left: calc(100% - 5px); }
  75%  { top: calc(100% - 5px);  left: -5px; }
  100% { top: -5px;              left: -5px; }
}

/* 06 — GLITCH BLOCK */
.aurora-loader-glitch {
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  gap: 2px;
  width: calc(var(--aurora-loader-size) * 0.83);
  height: calc(var(--aurora-loader-size) * 0.83);
}
.aurora-loader-glitch i {
  background: var(--_c-faint);
  animation: aurora-loader-glitchFill 1.6s steps(1, end) infinite;
}
.aurora-loader-glitch i:nth-child(1)  { animation-delay: 0.00s; }
.aurora-loader-glitch i:nth-child(2)  { animation-delay: 0.10s; }
.aurora-loader-glitch i:nth-child(3)  { animation-delay: 0.05s; }
.aurora-loader-glitch i:nth-child(4)  { animation-delay: 0.25s; }
.aurora-loader-glitch i:nth-child(5)  { animation-delay: 0.20s; }
.aurora-loader-glitch i:nth-child(6)  { animation-delay: 0.35s; }
.aurora-loader-glitch i:nth-child(7)  { animation-delay: 0.15s; }
.aurora-loader-glitch i:nth-child(8)  { animation-delay: 0.45s; }
.aurora-loader-glitch i:nth-child(9)  { animation-delay: 0.30s; }
.aurora-loader-glitch i:nth-child(10) { animation-delay: 0.55s; }
.aurora-loader-glitch i:nth-child(11) { animation-delay: 0.40s; }
.aurora-loader-glitch i:nth-child(12) { animation-delay: 0.65s; }
.aurora-loader-glitch i:nth-child(13) { animation-delay: 0.50s; }
.aurora-loader-glitch i:nth-child(14) { animation-delay: 0.75s; }
.aurora-loader-glitch i:nth-child(15) { animation-delay: 0.60s; }
.aurora-loader-glitch i:nth-child(16) { animation-delay: 0.85s; }
@keyframes aurora-loader-glitchFill {
  0%, 60%, 100% { background: var(--_c-faint); box-shadow: none; }
  30%           { background: var(--_c); box-shadow: 0 0 8px var(--_c-soft); }
}

/* 07 — CROSSHAIR LOCK */
.aurora-loader-cross svg { width: 100%; height: 100%; overflow: visible; }
.aurora-loader-cross .aurora-loader-ring { fill: none; stroke: var(--_c-ghost); stroke-width: 1; }
.aurora-loader-cross .aurora-loader-tick { stroke: var(--_c); stroke-width: 1.5; stroke-linecap: round; }
.aurora-loader-cross .aurora-loader-dot  { fill: var(--_c); filter: drop-shadow(0 0 4px var(--_c)); }
.aurora-loader-cross .aurora-loader-reticle {
  transform-origin: 60px 60px;
  animation: aurora-loader-spin 3s linear infinite;
}
.aurora-loader-cross .aurora-loader-reticle-rev {
  transform-origin: 60px 60px;
  animation: aurora-loader-spin 4s linear infinite reverse;
}

/* 08 — PIXEL PULSE */
.aurora-loader-pixel {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 10px;
  width: calc(var(--aurora-loader-size) * 0.67);
  height: calc(var(--aurora-loader-size) * 0.67);
}
.aurora-loader-pixel i {
  background: var(--_c);
  border-radius: 2px;
  animation: aurora-loader-pixelWave 1.4s ease-in-out infinite;
  opacity: 0.15;
}
.aurora-loader-pixel i:nth-child(1) { animation-delay: 0s; }
.aurora-loader-pixel i:nth-child(2) { animation-delay: 0.1s; }
.aurora-loader-pixel i:nth-child(3) { animation-delay: 0.2s; }
.aurora-loader-pixel i:nth-child(4) { animation-delay: 0.1s; }
.aurora-loader-pixel i:nth-child(5) { animation-delay: 0.2s; }
.aurora-loader-pixel i:nth-child(6) { animation-delay: 0.3s; }
.aurora-loader-pixel i:nth-child(7) { animation-delay: 0.2s; }
.aurora-loader-pixel i:nth-child(8) { animation-delay: 0.3s; }
.aurora-loader-pixel i:nth-child(9) { animation-delay: 0.4s; }
@keyframes aurora-loader-pixelWave {
  0%, 70%, 100% { opacity: 0.15; box-shadow: none; }
  35%           { opacity: 1; box-shadow: 0 0 8px var(--_c); }
}

/* 09 — SIGNAL WAVE */
.aurora-loader-wave svg { width: 100%; height: 100%; overflow: visible; }
.aurora-loader-wave .aurora-loader-grid-ln { stroke: var(--_c-ghost); stroke-width: 0.5; }
.aurora-loader-wave path {
  stroke: var(--_c); fill: none; stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px var(--_c-soft));
  stroke-dasharray: 240 240;
  animation: aurora-loader-waveSlide 1.4s linear infinite;
}
@keyframes aurora-loader-waveSlide { to { stroke-dashoffset: -240; } }

/* 10 — ORB CORE */
.aurora-loader-orb .aurora-loader-core {
  position: absolute; inset: 35px;
  background: var(--_c);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--_c), 0 0 30px var(--_c-soft);
  animation: aurora-loader-corePulse 1.4s ease-in-out infinite;
}
@keyframes aurora-loader-corePulse {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50%      { transform: scale(1);   opacity: 1;   }
}
.aurora-loader-orb .aurora-loader-halo {
  position: absolute; inset: 0;
  border: 1px dashed var(--_c-soft);
  border-radius: 50%;
  animation: aurora-loader-spin 6s linear infinite;
}
.aurora-loader-orb .aurora-loader-halo.inner {
  inset: 18px;
  border-style: dotted;
  animation-duration: 3s;
  animation-direction: reverse;
}

/* 11 — DIAMOND RUNNER */
.aurora-loader-diamond svg { width: 100%; height: 100%; overflow: visible; }
.aurora-loader-diamond polygon.aurora-loader-bg { stroke: var(--_c-ghost); fill: none; stroke-width: 1; }
.aurora-loader-diamond polygon.aurora-loader-fg {
  stroke: var(--_c); fill: none; stroke-width: 2;
  stroke-dasharray: 20 300;
  filter: drop-shadow(0 0 4px var(--_c-soft));
  animation: aurora-loader-dashDiamond 2.2s linear infinite;
}
@keyframes aurora-loader-dashDiamond { to { stroke-dashoffset: -320; } }

/* 12 — DOT TRAIL */
.aurora-loader-trail { animation: aurora-loader-spin 1.2s linear infinite; }
.aurora-loader-trail i {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--_c);
  border-radius: 50%;
}
.aurora-loader-trail i:nth-child(1) { transform: rotate(0deg)   translateY(-48px); opacity: 1;    box-shadow: 0 0 8px var(--_c); }
.aurora-loader-trail i:nth-child(2) { transform: rotate(45deg)  translateY(-48px); opacity: 0.85; }
.aurora-loader-trail i:nth-child(3) { transform: rotate(90deg)  translateY(-48px); opacity: 0.70; }
.aurora-loader-trail i:nth-child(4) { transform: rotate(135deg) translateY(-48px); opacity: 0.55; }
.aurora-loader-trail i:nth-child(5) { transform: rotate(180deg) translateY(-48px); opacity: 0.40; }
.aurora-loader-trail i:nth-child(6) { transform: rotate(225deg) translateY(-48px); opacity: 0.28; }
.aurora-loader-trail i:nth-child(7) { transform: rotate(270deg) translateY(-48px); opacity: 0.18; }
.aurora-loader-trail i:nth-child(8) { transform: rotate(315deg) translateY(-48px); opacity: 0.10; }

/* 13 — SCAN SLAB */
.aurora-loader-scan {
  border: 1px solid var(--_c-faint);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 5px,
      var(--_c-ghost) 5px 6px
    );
}
.aurora-loader-scan::before {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: var(--_c);
  box-shadow: 0 0 12px var(--_c), 0 0 30px var(--_c-soft);
  top: 0;
  animation: aurora-loader-scanMove 1.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes aurora-loader-scanMove {
  0%   { top: 0%; }
  50%  { top: calc(100% - 2px); }
  100% { top: 0%; }
}

/* 14 — STAR SPARK */
.aurora-loader-star i {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 40px;
  margin-left: -1.5px;
  background: linear-gradient(var(--_c), transparent);
  transform-origin: 1.5px 0;
  border-radius: 2px;
  animation: aurora-loader-starSpark 1.2s linear infinite;
  opacity: 0.15;
}
.aurora-loader-star i:nth-child(1) { transform: rotate(0deg);   animation-delay: 0s; }
.aurora-loader-star i:nth-child(2) { transform: rotate(60deg);  animation-delay: 0.2s; }
.aurora-loader-star i:nth-child(3) { transform: rotate(120deg); animation-delay: 0.4s; }
.aurora-loader-star i:nth-child(4) { transform: rotate(180deg); animation-delay: 0.6s; }
.aurora-loader-star i:nth-child(5) { transform: rotate(240deg); animation-delay: 0.8s; }
.aurora-loader-star i:nth-child(6) { transform: rotate(300deg); animation-delay: 1.0s; }
@keyframes aurora-loader-starSpark {
  0%, 80%, 100% { opacity: 0.15; filter: none; }
  20%           { opacity: 1; filter: drop-shadow(0 0 4px var(--_c)); }
}

/* 15 — CIRCUIT TRACE */
.aurora-loader-circuit svg { width: 100%; height: 100%; overflow: visible; }
.aurora-loader-circuit .aurora-loader-node { fill: var(--_c-soft); }
.aurora-loader-circuit .aurora-loader-wire { stroke: var(--_c-ghost); fill: none; stroke-width: 1; }
.aurora-loader-circuit .aurora-loader-trace {
  stroke: var(--_c); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--_c-soft));
  stroke-dasharray: 40 400;
  animation: aurora-loader-dashCircuit 2.4s linear infinite;
}
@keyframes aurora-loader-dashCircuit { to { stroke-dashoffset: -440; } }

/* 16 — HOLO BRACKETS */
.aurora-loader-holo i {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--_c);
  filter: drop-shadow(0 0 3px var(--_c-soft));
}
.aurora-loader-holo i:nth-child(1) { top: 0;    left: 0;    border-right: none; border-bottom: none; }
.aurora-loader-holo i:nth-child(2) { top: 0;    right: 0;   border-left: none;  border-bottom: none; }
.aurora-loader-holo i:nth-child(3) { bottom: 0; right: 0;   border-left: none;  border-top: none;    }
.aurora-loader-holo i:nth-child(4) { bottom: 0; left: 0;    border-right: none; border-top: none;    }
.aurora-loader-holo { animation: aurora-loader-holoPulse 1.8s ease-in-out infinite; }
@keyframes aurora-loader-holoPulse {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%      { transform: scale(0.82); opacity: 1;   }
}
.aurora-loader-holo::before {
  content: "";
  position: absolute; inset: 35%;
  border: 1px solid var(--_c-soft);
  border-radius: 50%;
  animation: aurora-loader-spin 2s linear infinite;
}

/* 17 — SHIFT BLOCKS */
.aurora-loader-shift {
  height: calc(var(--aurora-loader-size) * 0.25);
}
.aurora-loader-shift i {
  position: absolute;
  top: 0; width: 22px; height: 22px;
  background: var(--_c);
  box-shadow: 0 0 10px var(--_c-soft);
  animation: aurora-loader-shift 1.4s cubic-bezier(.7,0,.3,1) infinite;
}
.aurora-loader-shift i:nth-child(1) { left: 0;    animation-delay: 0s; }
.aurora-loader-shift i:nth-child(2) { left: 44px; animation-delay: 0.15s; background: var(--_c-soft); box-shadow: none; }
.aurora-loader-shift i:nth-child(3) { left: 88px; animation-delay: 0.30s; background: var(--_c-faint); box-shadow: none; }
@keyframes aurora-loader-shift {
  0%, 100% { transform: translateY(0)     skewX(0);     }
  40%      { transform: translateY(-12px) skewX(-12deg); }
  60%      { transform: translateY(-12px) skewX(-12deg); }
}

/* 18 — ARC BLOOM */
.aurora-loader-bloom i {
  position: absolute; inset: 0;
  border: 2px solid var(--_c);
  border-radius: 50%;
  opacity: 0;
  animation: aurora-loader-bloom 2s ease-out infinite;
}
.aurora-loader-bloom i:nth-child(1) { animation-delay: 0s; }
.aurora-loader-bloom i:nth-child(2) { animation-delay: 0.55s; }
.aurora-loader-bloom i:nth-child(3) { animation-delay: 1.1s; }
.aurora-loader-bloom::after {
  content: "";
  position: absolute; inset: 48px;
  background: var(--_c);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--_c), 0 0 24px var(--_c-soft);
}
@keyframes aurora-loader-bloom {
  0%   { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(1);   opacity: 0;   }
}

/* 19 — SEGMENT RING */
.aurora-loader-segring { animation: aurora-loader-spin 6s linear infinite; }
.aurora-loader-segring i {
  position: absolute;
  top: 0; left: 50%;
  width: 3px; height: 14px;
  margin-left: -1.5px;
  background: var(--_c);
  border-radius: 2px;
  transform-origin: 1.5px 55px;
  opacity: 0.15;
  animation: aurora-loader-chase 1.2s linear infinite;
}
.aurora-loader-segring i:nth-child(1)  { transform: rotate(0deg);   animation-delay: 0.00s; }
.aurora-loader-segring i:nth-child(2)  { transform: rotate(30deg);  animation-delay: 0.10s; }
.aurora-loader-segring i:nth-child(3)  { transform: rotate(60deg);  animation-delay: 0.20s; }
.aurora-loader-segring i:nth-child(4)  { transform: rotate(90deg);  animation-delay: 0.30s; }
.aurora-loader-segring i:nth-child(5)  { transform: rotate(120deg); animation-delay: 0.40s; }
.aurora-loader-segring i:nth-child(6)  { transform: rotate(150deg); animation-delay: 0.50s; }
.aurora-loader-segring i:nth-child(7)  { transform: rotate(180deg); animation-delay: 0.60s; }
.aurora-loader-segring i:nth-child(8)  { transform: rotate(210deg); animation-delay: 0.70s; }
.aurora-loader-segring i:nth-child(9)  { transform: rotate(240deg); animation-delay: 0.80s; }
.aurora-loader-segring i:nth-child(10) { transform: rotate(270deg); animation-delay: 0.90s; }
.aurora-loader-segring i:nth-child(11) { transform: rotate(300deg); animation-delay: 1.00s; }
.aurora-loader-segring i:nth-child(12) { transform: rotate(330deg); animation-delay: 1.10s; }
@keyframes aurora-loader-chase {
  0%, 80%, 100% { opacity: 0.15; }
  20%           { opacity: 1; box-shadow: 0 0 6px var(--_c); }
}

/* 20 — DUAL HELIX */
.aurora-loader-helix {
  width: calc(var(--aurora-loader-size) * 1.17);
  height: calc(var(--aurora-loader-size) * 0.33);
}
.aurora-loader-helix i {
  position: absolute; top: 14px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--_c);
  box-shadow: 0 0 10px var(--_c), 0 0 20px var(--_c-soft);
  animation: aurora-loader-helix 1.6s ease-in-out infinite;
}
.aurora-loader-helix i:nth-child(2) {
  background: var(--_c-soft);
  box-shadow: 0 0 8px var(--_c-soft);
  animation-delay: -0.8s;
}
@keyframes aurora-loader-helix {
  0%   { left: 0;                     transform: translateY(0)     scale(1); }
  25%  { left: calc(50% - 6px);       transform: translateY(-14px) scale(1.1); }
  50%  { left: calc(100% - 12px);     transform: translateY(0)     scale(1); }
  75%  { left: calc(50% - 6px);       transform: translateY(14px)  scale(0.85); }
  100% { left: 0;                     transform: translateY(0)     scale(1); }
}

/* Reduced motion — soften but do not freeze (indeterminate must still signal). */
@media (prefers-reduced-motion: reduce) {
  .aurora-loader, .aurora-loader *,
  .aurora-loader::before, .aurora-loader::after {
    animation-duration: 3s !important;
  }
}