:root {
  --app-loading-accent: #4f74d9;
  --app-loading-bg: #f3f6fa;
  --app-loading-glow: rgba(79, 116, 217, 0.11);
  --app-loading-glow-strong: rgba(79, 116, 217, 0.18);
  --app-loading-core-shadow: rgba(79, 116, 217, 0.28);
}

html[data-theme-palette="azure"] {
  --app-loading-accent: #4f74d9;
  --app-loading-glow: rgba(79, 116, 217, 0.11);
  --app-loading-glow-strong: rgba(79, 116, 217, 0.18);
  --app-loading-core-shadow: rgba(79, 116, 217, 0.28);
}

html[data-theme-palette="emerald"] {
  --app-loading-accent: #1b9c7a;
  --app-loading-glow: rgba(27, 156, 122, 0.12);
  --app-loading-glow-strong: rgba(27, 156, 122, 0.2);
  --app-loading-core-shadow: rgba(27, 156, 122, 0.3);
}

html[data-theme-palette="amber"] {
  --app-loading-accent: #d5872a;
  --app-loading-glow: rgba(213, 135, 42, 0.12);
  --app-loading-glow-strong: rgba(213, 135, 42, 0.2);
  --app-loading-core-shadow: rgba(213, 135, 42, 0.3);
}

html[data-theme-palette="rose"] {
  --app-loading-accent: #c85c7f;
  --app-loading-glow: rgba(200, 92, 127, 0.12);
  --app-loading-glow-strong: rgba(200, 92, 127, 0.2);
  --app-loading-core-shadow: rgba(200, 92, 127, 0.3);
}

html[data-theme-palette="slate"] {
  --app-loading-accent: #4c708f;
  --app-loading-glow: rgba(76, 112, 143, 0.12);
  --app-loading-glow-strong: rgba(76, 112, 143, 0.2);
  --app-loading-core-shadow: rgba(76, 112, 143, 0.3);
}

html[data-theme-palette="teal"] {
  --app-loading-accent: #1f8f96;
  --app-loading-glow: rgba(31, 143, 150, 0.12);
  --app-loading-glow-strong: rgba(31, 143, 150, 0.2);
  --app-loading-core-shadow: rgba(31, 143, 150, 0.3);
}

html.dark {
  color-scheme: dark;
  --app-loading-bg: #0b1220;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, var(--app-loading-glow-strong), transparent 28%),
    radial-gradient(circle at top, var(--app-loading-glow), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%),
    var(--app-loading-bg);
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

html.dark body {
  background:
    radial-gradient(circle at 50% 18%, var(--app-loading-glow-strong), transparent 28%),
    radial-gradient(circle at top, var(--app-loading-glow), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 38%),
    var(--app-loading-bg);
}

.app-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.app-loading::before,
.app-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.app-loading::before {
  width: 204px;
  height: 204px;
  background: radial-gradient(circle, var(--app-loading-glow-strong) 0%, transparent 68%);
  filter: blur(26px);
  opacity: 0.42;
  animation: app-loading-halo 4.6s ease-in-out infinite;
}

.app-loading::after {
  width: 138px;
  height: 22px;
  top: calc(50% + 74px);
  background: radial-gradient(circle, var(--app-loading-core-shadow) 0%, transparent 72%);
  filter: blur(18px);
  opacity: 0.42;
  animation: app-loading-floor-breathe 3.2s ease-in-out infinite;
}

.app-loading__pulse {
  position: relative;
  width: 188px;
  height: 188px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-loading__pulse::before,
.app-loading__pulse::after {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.app-loading__pulse::before {
  width: 116px;
  height: 116px;
  background: radial-gradient(circle, color-mix(in srgb, var(--app-loading-accent) 12%, transparent) 0%, transparent 72%);
  filter: blur(12px);
  opacity: 0.56;
  animation: app-loading-core-breathe 3.4s ease-in-out infinite;
}

.app-loading__pulse::after {
  width: 132px;
  height: 132px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 46deg,
    color-mix(in srgb, var(--app-loading-accent) 68%, white 12%) 88deg,
    color-mix(in srgb, var(--app-loading-accent) 42%, transparent) 142deg,
    transparent 228deg,
    color-mix(in srgb, var(--app-loading-accent) 16%, transparent) 316deg,
    transparent 360deg
  );
  mask: radial-gradient(circle, transparent 55%, #000 59%, #000 65%, transparent 69%);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 59%, #000 65%, transparent 69%);
  filter: drop-shadow(0 0 10px var(--app-loading-glow-strong));
  opacity: 0.92;
  animation: app-loading-rotor 1.8s linear infinite;
}

.app-loading__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  opacity: 0;
  animation: none;
}

.app-loading__ring--outer {
  width: 142px;
  height: 142px;
  border-color: color-mix(in srgb, var(--app-loading-accent) 10%, transparent);
  opacity: 1;
}

.app-loading__ring--middle {
  width: 118px;
  height: 118px;
  border-color: color-mix(in srgb, var(--app-loading-accent) 14%, transparent);
  opacity: 1;
}

.app-loading__ring--inner {
  width: 96px;
  height: 96px;
  border-color: color-mix(in srgb, var(--app-loading-accent) 18%, transparent);
  opacity: 1;
}

.app-loading__brand {
  position: relative;
  z-index: 3;
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px var(--app-loading-core-shadow));
  animation: none;
}

@keyframes app-loading-floor-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scaleX(0.82);
    opacity: 0.28;
  }

  50% {
    transform: translate(-50%, -50%) scaleX(0.96);
    opacity: 0.44;
  }
}

@keyframes app-loading-core-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 0.42;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 0.62;
  }
}

@keyframes app-loading-rotor {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes app-loading-halo {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.32;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.03);
    opacity: 0.46;
  }
}