/* ============================================================
   VEXORA — LOADER (Spark breathing animation)
   Reusable: Fullscreen-Overlay + Inline-Spinner
   Premium-Niveau: weiches Licht, dezenter Glow (Supabase/Linear)
   ============================================================ */

/* Spark mark animation */
.vx-spark {
  position: relative;
  width: 72px;
  height: 72px;
  transform-box: fill-box;
  transform-origin: center;
  animation: vxBreathe 1.4s ease-in-out infinite;
  /* dezenter violetter Glow um den Blitz */
  filter: drop-shadow(0 4px 14px rgba(103, 61, 230, 0.38));
}
.vx-spark--sm { width: 40px; height: 40px; }
.vx-spark--lg { width: 104px; height: 104px; }
.vx-spark .u { animation: vxChg 1.4s ease-in-out infinite; }
.vx-spark .l { animation: vxChg 1.4s ease-in-out 0.22s infinite; }
@keyframes vxChg { 0%, 100% { opacity: 0.42; } 50% { opacity: 1; } }
@keyframes vxBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Halo hinter dem Spark — pulsierendes weiches Licht */
.vx-spark-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.vx-spark-wrap::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 61, 230, 0.22) 0%, rgba(103, 61, 230, 0.06) 40%, transparent 70%);
  animation: vxHalo 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vxHalo {
  0%, 100% { transform: scale(0.9); opacity: 0.55; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Fullscreen overlay */
.vx-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  /* weiches Licht statt grellem Weiß */
  background:
    radial-gradient(circle at 50% 42%, rgba(103, 61, 230, 0.07), transparent 55%),
    linear-gradient(180deg, #fbfbfe 0%, #f3f1fb 100%);
  transition: opacity 0.4s var(--vx-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.vx-loader[hidden] { display: none; }
.vx-loader.is-leaving { opacity: 0; pointer-events: none; }
.vx-loader__label {
  position: relative;
  font-family: var(--vx-font, "Geist", -apple-system, system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vx-muted, #6b6b80);
  letter-spacing: 0.04em;
}

/* Inline loader (in cards/buttons) */
.vx-loader-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 20px;
}
.vx-loader-inline .vx-loader__label { font-size: 13px; }

/* Dark variant (for dark backgrounds) */
.vx-loader--dark {
  background:
    radial-gradient(circle at 50% 42%, rgba(138, 102, 242, 0.16), transparent 55%),
    linear-gradient(160deg, #1a1340 0%, #0c0a1f 100%);
}
.vx-loader--dark .vx-loader__label { color: rgba(255, 255, 255, 0.62); }
.vx-loader--dark .vx-spark { filter: drop-shadow(0 4px 18px rgba(138, 102, 242, 0.55)); }
.vx-loader--dark .vx-spark-wrap::before {
  background: radial-gradient(circle, rgba(138, 102, 242, 0.30) 0%, rgba(138, 102, 242, 0.08) 40%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .vx-spark, .vx-spark .u, .vx-spark .l,
  .vx-spark-wrap::before { animation: none; }
}