#app-loading {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 15%, rgba(79, 200, 235, 0.2), transparent 38rem),
    radial-gradient(circle at 80% 85%, rgba(160, 105, 218, 0.2), transparent 36rem),
    linear-gradient(145deg, #090c13, #171823 50%, #100d14);
  color: #eef4ff;
  font: 600 0.85rem/1.5 Arial, sans-serif;
}

#app-loading > div {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 28px;
}

#app-loading img {
  width: min(420px, 78vw);
  height: auto;
}

#app-loading i {
  width: 72px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}

#app-loading i::after {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #56cde9, #a074dc);
  content: "";
  animation: app-loading-pulse 1.35s ease-in-out infinite;
}

@keyframes app-loading-pulse {
  from { transform: translateX(-120%); }
  to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  #app-loading i::after { animation: none; }
}