html { --loader-accent: #5586ff; }
html[data-layout="compact"] { --skeleton-bg: #29354e; --loader-accent: #ffb8d0; --loader-spark: #f6c746; --loader-tail: #39d5bb; }
html[data-theme="themeBlue"] { --skeleton-bg: #174fba; --loader-accent: #fff0bb; }

.skeleton-screen-main.loading-logo-skeleton {
  box-sizing: border-box;
  padding: 24px;
  background: var(--skeleton-bg);
}

.skeleton-screen-main.loading-logo-skeleton .logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(144px, 40vw, 40vh);
  aspect-ratio: 1;
}

.skeleton-screen-main.loading-logo-skeleton .logo-wrap::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--loader-accent) 18%, transparent), transparent 68%);
  animation: loader-breathe 3s ease-in-out infinite;
}

.skeleton-screen-main.loading-logo-skeleton .loading-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 78%;
  max-height: 78%;
  height: auto;
  object-fit: contain;
  animation: loader-float 3s ease-in-out infinite;
}

.skeleton-screen-main.loading-logo-skeleton .logo-bg {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 1px solid rgba(200, 215, 245, .16);
  border-radius: 50%;
  background: none;
}

.skeleton-screen-main.loading-logo-skeleton .logo-bg::before {
  content: "";
  position: absolute;
  inset: -2px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    transparent 0 36%,
    var(--loader-spark, var(--loader-accent)) 42% 46%,
    transparent 51% 57%,
    var(--loader-tail, var(--loader-accent)) 62% 66%,
    transparent 71% 74%,
    var(--loader-accent) 81% 88%,
    transparent 94% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: loader-orbit 1.8s linear infinite;
}

.skeleton-screen-main.loading-logo-skeleton .logo-bg::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0, #fff 0 2px, var(--loader-accent) 3px, transparent 6px);
  animation: loader-orbit 2.7s linear infinite reverse;
}

.skeleton-screen-main.loading-logo-skeleton .loader-sparks {
  position: absolute;
  inset: -11%;
  pointer-events: none;
}

.skeleton-screen-main.loading-logo-skeleton .loader-sparks i {
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  background: var(--loader-spark, var(--loader-accent));
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: loader-twinkle 2.4s ease-in-out infinite;
}

.skeleton-screen-main.loading-logo-skeleton .loader-sparks i:nth-child(1) { top: 14%; left: 13%; animation-delay: -.2s; }
.skeleton-screen-main.loading-logo-skeleton .loader-sparks i:nth-child(2) { top: 7%; right: 20%; width: 6px; animation-delay: -.9s; }
.skeleton-screen-main.loading-logo-skeleton .loader-sparks i:nth-child(3) { right: 6%; bottom: 21%; width: 7px; animation-delay: -1.5s; }
.skeleton-screen-main.loading-logo-skeleton .loader-sparks i:nth-child(4) { bottom: 5%; left: 24%; width: 5px; animation-delay: -2s; }

@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-float { 50% { transform: translateY(-3px); } }
@keyframes loader-breathe { 50% { opacity: .45; transform: scale(1.08); } }
@keyframes loader-twinkle { 0%, 100% { opacity: .25; transform: scale(.55); } 50% { opacity: 1; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .skeleton-screen-main.loading-logo-skeleton .logo-wrap::before,
  .skeleton-screen-main.loading-logo-skeleton .loading-logo,
  .skeleton-screen-main.loading-logo-skeleton .logo-bg::before,
  .skeleton-screen-main.loading-logo-skeleton .logo-bg::after,
  .skeleton-screen-main.loading-logo-skeleton .loader-sparks i { animation: none; }
}