/* Adapted loading animations from the supplied jq22 collection.
   Variant 9 is intentionally excluded. Colors inherit the current app theme. */
.loading-animation {
  --loader-accent: var(--accent, #484c7f);
  --loader-accent-2: var(--info, #0ea5e9);
  --loader-accent-soft: var(--accent-soft, #eef2ff);
  --loader-track: color-mix(in srgb, var(--loader-accent) 16%, transparent);
  --loader-muted: var(--muted, #6b7280);
  --loader-size: 78px;
  --loader-scale: 1;
  display: grid;
  place-items: center;
  width: var(--loader-size);
  height: var(--loader-size);
  color: var(--loader-accent);
  flex: 0 0 auto;
}

.loading-animation--compact {
  --loader-size: 22px;
  --loader-compact-scale: .28;
}

.loading-animation--overlay {
  width: min(156px, 100%);
  height: 78px;
  margin: 0 auto 10px;
}

.loading-animation .loader-core {
  position: relative;
  display: block;
  width: 78px;
  height: 78px;
  transform-origin: center;
}

.loading-animation--compact .loader-core {
  transform: scale(var(--loader-compact-scale));
}

.loading-animation--compact[data-loader-variant="5"],
.loading-animation--compact[data-loader-variant="8"],
.loading-animation--compact[data-loader-variant="10"] {
  --loader-compact-scale: .14;
}

/* 1. Orbiting dots */
.loader-v1 { animation: loader-v1-spin 1.4s linear infinite; }
.loader-v1-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: var(--loader-accent);
  transform: rotate(calc(var(--loader-index, 0) * 45deg)) translateY(-25px);
  animation: loader-v1-pulse 1.1s ease-in-out infinite;
}
.loader-v1-dot:nth-child(2) { --loader-index: 1; animation-delay: .12s; }
.loader-v1-dot:nth-child(3) { --loader-index: 2; animation-delay: .24s; }
.loader-v1-dot:nth-child(4) { --loader-index: 3; animation-delay: .36s; }
.loader-v1-dot:nth-child(5) { --loader-index: 4; animation-delay: .48s; }
.loader-v1-dot:nth-child(6) { --loader-index: 5; animation-delay: .60s; }
.loader-v1-dot:nth-child(7) { --loader-index: 6; animation-delay: .72s; }
.loader-v1-dot:nth-child(8) { --loader-index: 7; animation-delay: .84s; }
.loader-v1-dot:nth-child(3n) { background: var(--loader-accent-2); }

/* 2. Morphing square */
.loader-v2 { display: grid !important; place-items: center; }
.loader-v2-shape {
  display: block;
  width: 48px;
  height: 48px;
  border: 7px solid var(--loader-accent);
  border-radius: 8px;
  background: var(--loader-accent-soft);
  animation: loader-v2-morph 1.8s cubic-bezier(.75, 0, .5, 1) infinite;
}

/* 3. Rotating ring */
.loader-v3 { display: grid !important; place-items: center; }
.loader-v3-ring {
  position: absolute;
  inset: 12px;
  border: 6px solid var(--loader-track);
  border-top-color: var(--loader-accent);
  border-right-color: var(--loader-accent-2);
  border-radius: 50%;
  animation: loader-v3-rotate 1.15s linear infinite;
}
.loader-v3-ring-alt {
  inset: 25px;
  border-width: 4px;
  border-color: transparent var(--loader-accent) var(--loader-accent-2) transparent;
  animation-direction: reverse;
  animation-duration: .8s;
}

/* 4. Three pulsing circles */
.loader-v4 { display: flex !important; align-items: center; justify-content: center; gap: 6px; }
.loader-v4-circle {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  color: transparent;
  background: var(--loader-accent);
  animation: loader-v4-pulse 1.35s ease-in-out infinite;
}
.loader-v4-circle:nth-child(2) { background: var(--loader-accent-2); animation-delay: .16s; }
.loader-v4-circle:nth-child(3) { background: var(--loader-accent); animation-delay: .32s; }

/* 5. Bouncing letters */
.loader-v5 { display: flex !important; align-items: center; justify-content: center; gap: 1px; width: 150px !important; }
.loader-v5-letter {
  color: var(--loader-accent);
  font: 700 17px/1 var(--font, "Inter", sans-serif);
  text-transform: uppercase;
  animation: loader-v5-bounce 1.25s ease-in-out infinite;
}
.loader-v5-letter:nth-child(2) { animation-delay: .08s; }
.loader-v5-letter:nth-child(3) { animation-delay: .16s; }
.loader-v5-letter:nth-child(4) { animation-delay: .24s; }
.loader-v5-letter:nth-child(5) { animation-delay: .32s; }
.loader-v5-letter:nth-child(6) { animation-delay: .40s; }
.loader-v5-letter:nth-child(7) { animation-delay: .48s; }
.loader-v5-letter:nth-child(odd) { color: var(--loader-accent-2); }

/* 6. Bouncing balls with shadows */
.loader-v6 { display: flex !important; align-items: center; justify-content: center; gap: 5px; }
.loader-v6-ball {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--loader-accent);
  animation: loader-v6-bounce 1.15s ease-in-out infinite;
}
.loader-v6-ball::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -13px;
  width: 10px;
  height: 4px;
  border-radius: 50%;
  background: var(--loader-track);
  animation: loader-v6-shadow 1.15s ease-in-out infinite;
}
.loader-v6-ball:nth-child(2) { background: var(--loader-accent-2); animation-delay: .1s; }
.loader-v6-ball:nth-child(3) { animation-delay: .2s; }
.loader-v6-ball:nth-child(4) { background: var(--loader-accent-2); animation-delay: .3s; }
.loader-v6-ball:nth-child(5) { animation-delay: .4s; }
.loader-v6-ball:nth-child(6) { background: var(--loader-accent-2); animation-delay: .5s; }
.loader-v6-ball:nth-child(7) { animation-delay: .6s; }

/* 7. Rising bubbles */
.loader-v7 { display: flex !important; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 14px; }
.loader-v7-bubble {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--loader-accent);
  animation: loader-v7-rise 1.15s ease-in-out infinite alternate;
}
.loader-v7-bubble:nth-child(2n) { background: var(--loader-accent-2); animation-delay: .16s; }
.loader-v7-bubble:nth-child(3n) { animation-delay: .32s; }
.loader-v7-bubble:nth-child(4n) { animation-delay: .48s; }
.loader-v7-bubble:nth-child(5n) { animation-delay: .64s; }

/* 8. Line reveal */
.loader-v8 { display: grid !important; place-items: center; width: 150px !important; }
.loader-v8-line {
  display: block;
  width: 132px;
  overflow: hidden;
  border-bottom: 4px solid var(--loader-accent);
  color: var(--loader-accent);
  font: 700 17px/1.4 var(--font, "Inter", sans-serif);
  text-transform: uppercase;
  white-space: nowrap;
  animation: loader-v8-line 1.8s ease-in-out infinite;
}
.loader-v8-cap {
  position: absolute;
  left: 0;
  width: 132px;
  height: 30px;
  border-bottom: 4px solid var(--loader-accent-soft);
  background: var(--loader-accent-soft);
  animation: loader-v8-cap 1.8s ease-in-out infinite;
}

/* 10. Falling letters and dots */
.loader-v10 { display: flex !important; align-items: center; justify-content: center; gap: 1px; width: 150px !important; }
.loader-v10-letter {
  color: var(--loader-accent);
  font: 700 15px/1 var(--font, "Inter", sans-serif);
  text-transform: uppercase;
  animation: loader-v10-fall 1.45s linear infinite;
}
.loader-v10-letter:nth-child(2) { animation-delay: .1s; }
.loader-v10-letter:nth-child(3) { animation-delay: .2s; }
.loader-v10-letter:nth-child(4) { animation-delay: .3s; }
.loader-v10-letter:nth-child(5) { animation-delay: .4s; }
.loader-v10-letter:nth-child(6) { animation-delay: .5s; }
.loader-v10-letter:nth-child(7) { animation-delay: .6s; }
.loader-v10-letter:nth-child(odd) { color: var(--loader-accent-2); }
.loader-v10-dot { display: none; }

@keyframes loader-v1-spin { to { transform: rotate(360deg); } }
@keyframes loader-v1-pulse { 0%, 100% { opacity: .45; scale: .72; } 50% { opacity: 1; scale: 1; } }
@keyframes loader-v2-morph { 0%, 100% { border-radius: 8px; transform: rotate(0) scale(.72); } 50% { border-radius: 50%; transform: rotate(180deg) scale(1); background: var(--loader-accent); } }
@keyframes loader-v3-rotate { to { transform: rotate(360deg); } }
@keyframes loader-v4-pulse { 0%, 100% { transform: scale(.62); opacity: .48; } 50% { transform: scale(1); opacity: 1; } }
@keyframes loader-v5-bounce { 0%, 100% { transform: translateY(0); opacity: .58; } 35% { transform: translateY(-8px); opacity: 1; } }
@keyframes loader-v6-bounce { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-20px); } }
@keyframes loader-v6-shadow { 0%, 100% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1.2); opacity: .08; } }
@keyframes loader-v7-rise { from { transform: translateY(0) scale(.65); opacity: .42; } to { transform: translateY(-28px) scale(1); opacity: 1; } }
@keyframes loader-v8-line { 0% { width: 0; } 50%, 100% { width: 132px; } }
@keyframes loader-v8-cap { 0%, 50% { width: 0; } 100% { width: 132px; } }
@keyframes loader-v10-fall { 0%, 100% { transform: translateY(0); opacity: .4; } 25% { transform: translateY(12px); opacity: 1; } 60% { transform: translateY(-2px); opacity: .8; } }

.loading-spinner.loading-animation,
.app-message-spinner.loading-animation {
  width: 22px;
  height: 22px;
  border: 0 !important;
  border-radius: 0;
  animation: none;
}

@media (max-width: 420px) {
  .loading-animation--overlay {
    width: min(140px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-animation .loader-core,
  .loading-animation .loader-core * {
    animation-duration: 2.4s !important;
  }
}