:root {
  --application-loading-accent-rgb: 61 110 245;
  --application-loading-accent-soft-rgb: 104 152 248;
}

@keyframes application-loading-orbit {
  to { transform: rotate(360deg); }
}

@keyframes application-loading-orbit-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes application-loading-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes application-loading-shimmer {
  0% { transform: translateX(-125%); }
  100% { transform: translateX(250%); }
}

@keyframes application-loading-ambient {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(1.5rem, 1rem, 0) scale(1.06); }
}

.application-loading-indicator {
  --application-loading-indicator-size: 8rem;
  position: relative;
  isolation: isolate;
  display: flex;
  width: var(--application-loading-indicator-size);
  height: var(--application-loading-indicator-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.application-loading-indicator__glow {
  position: absolute;
  inset: 14%;
  border-radius: 9999px;
  background: rgb(var(--application-loading-accent-rgb) / 25%);
  filter: blur(1.5rem);
}

.application-loading-indicator__orbit {
  position: absolute;
  border-radius: 9999px;
  border: 1px solid rgb(var(--application-loading-accent-rgb) / 15%);
}

.application-loading-indicator__orbit--outer {
  inset: .25rem;
  border-right-color: rgb(var(--application-loading-accent-soft-rgb) / 40%);
  border-top-color: rgb(var(--application-loading-accent-rgb) / 90%);
  box-shadow: 0 0 30px rgb(var(--application-loading-accent-rgb) / 12%);
}

.application-loading-indicator__orbit--inner {
  inset: 1rem;
  border-bottom-color: rgb(var(--application-loading-accent-soft-rgb) / 70%);
  border-left-color: rgb(var(--application-loading-accent-rgb) / 30%);
}

.application-loading-indicator__satellite {
  position: absolute;
  top: 50%;
  border-radius: 9999px;
  background: rgb(var(--application-loading-accent-soft-rgb));
  transform: translateY(-50%);
}

.application-loading-indicator__satellite--outer {
  right: -.25rem;
  width: .625rem;
  height: .625rem;
  box-shadow: 0 0 14px rgb(var(--application-loading-accent-soft-rgb) / 90%);
}

.application-loading-indicator__satellite--inner {
  left: -.25rem;
  width: .5rem;
  height: .5rem;
  background: rgb(var(--application-loading-accent-rgb));
  box-shadow: 0 0 12px rgb(var(--application-loading-accent-rgb) / 75%);
}

.application-loading-indicator__core {
  position: relative;
  z-index: 1;
  display: flex;
  width: 50%;
  height: 50%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 1.35rem;
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 20px 45px rgb(var(--application-loading-accent-rgb) / 15%);
  backdrop-filter: blur(1rem);
}

.application-loading-indicator__mark {
  width: auto;
  max-width: 70%;
  height: 56%;
  object-fit: contain;
}

.dark .application-loading-indicator__core {
  border-color: rgb(255 255 255 / 20%);
  background: rgb(241 245 249 / 95%);
}

.application-loading-orbit {
  animation: application-loading-orbit 2.4s linear infinite;
  will-change: transform;
}

.application-loading-orbit-reverse {
  animation: application-loading-orbit-reverse 1.85s linear infinite;
  will-change: transform;
}

.application-loading-glow {
  animation: application-loading-glow 2.2s ease-in-out infinite;
  will-change: opacity, transform;
}

.application-loading-shimmer {
  width: 50%;
  animation: application-loading-shimmer 1.65s ease-in-out infinite;
  will-change: transform;
}

.application-loading-ambient {
  animation: application-loading-ambient 12s ease-in-out infinite;
  will-change: transform;
}

.application-loading-ambient-reverse {
  animation: application-loading-ambient 16s ease-in-out infinite reverse;
  will-change: transform;
}

.application-loading-indicator[data-loading-active="false"] .application-loading-orbit,
.application-loading-indicator[data-loading-active="false"] .application-loading-orbit-reverse,
.application-loading-indicator[data-loading-active="false"] .application-loading-glow {
  animation: none;
  transform: none;
  will-change: auto;
}

.application-loading-indicator[data-loading-active="false"] .application-loading-glow {
  opacity: 0.7;
}

@media (min-width: 40rem) {
  .application-loading-indicator {
    --application-loading-indicator-size: 9rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) .application-loading-indicator__core {
    border-color: rgb(255 255 255 / 20%);
    background: rgb(241 245 249 / 95%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .application-loading-orbit,
  .application-loading-orbit-reverse,
  .application-loading-glow,
  .application-loading-shimmer,
  .application-loading-ambient,
  .application-loading-ambient-reverse {
    animation: none !important;
    transform: none;
    will-change: auto;
  }

  .application-loading-glow { opacity: 0.7; }
  .application-loading-shimmer { width: 100%; opacity: 0.75; }
}