#appBootSplash{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 8% -18%, rgba(255,255,255,.18) 0 24%, rgba(255,255,255,0) 25%),
    linear-gradient(160deg, #7b54f7 0%, #7246f4 46%, #6b3ff1 100%);
  transition:opacity .62s ease, visibility .62s ease;
}

#appBootSplash.isReloadPending{
  background:#fff;
  color:#0f172a;
  transition:none;
}

#appBootSplash.isReloadPending .bootGhostMark,
#appBootSplash.isReloadPending .bootSplashInner{
  display:none;
}

#appBootSplash.isReloadPending::after{
  content:"";
  display:block;
  width:42px;
  height:42px;
  box-sizing:border-box;
  border:4px solid rgba(15,23,42,.08);
  border-top-color:#7c4dff;
  border-radius:999px;
  animation:bootReloadWheelSpin .82s linear infinite;
}

#appBootSplash.isDone{
  display:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none;
}

@keyframes bootReloadWheelSpin{
  to{ transform:rotate(360deg); }
}

.bootGhostMark{
  position:absolute;
  display:block;
  width:clamp(390px, 62vw, 860px);
  aspect-ratio:1;
  opacity:.1;
  pointer-events:none;
}

.bootGhostMark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.bootGhostMark--top{
  left:clamp(-320px, -22vw, -110px);
  top:clamp(-250px, -22vw, -100px);
  transform:rotate(-9deg);
}

.bootGhostMark--bottom{
  right:clamp(-360px, -24vw, -130px);
  bottom:clamp(-350px, -28vw, -160px);
  transform:rotate(8deg);
}

.bootSplashInner{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(28px, 7vw, 72px);
}

.bootLogoWrap{
  position:absolute;
  left:50%;
  top:48%;
  display:grid;
  place-items:center;
  width:clamp(220px, 34vw, 430px);
  aspect-ratio:1;
  opacity:0;
  transform:translate(-50%, -50%) scale(.92);
  animation:bootLogoEnter 650ms cubic-bezier(.22, 1, .36, 1) both;
  will-change:opacity, transform;
}

.bootMark{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 24px 44px rgba(36, 14, 126, .18));
  transform:scale(1);
  animation:bootLogoBreathe 2.2s ease-in-out 650ms infinite;
  will-change:filter, transform;
}

@keyframes bootLogoEnter{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(.92);
  }
  78%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.03);
  }
  100%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
}

@keyframes bootLogoBreathe{
  0%, 100%{
    transform:scale(1);
    filter:drop-shadow(0 24px 44px rgba(36, 14, 126, .18));
  }
  50%{
    transform:scale(1.02);
    filter:drop-shadow(0 24px 44px rgba(36, 14, 126, .24));
  }
}

@media (max-width: 640px){
  .bootGhostMark{
    width:clamp(380px, 96vw, 720px);
  }

  .bootGhostMark--top{
    left:-46vw;
    top:-18vh;
  }

  .bootGhostMark--bottom{
    right:-54vw;
    bottom:-19vh;
  }

  .bootLogoWrap{
    top:47%;
    width:clamp(250px, 58vw, 390px);
  }

}

@media (prefers-reduced-motion: reduce){
  #appBootSplash{
    transition:opacity .2s ease, visibility .2s ease;
  }

  #appBootSplash.isReloadPending::after,
  .bootLogoWrap,
  .bootMark{
    animation:none;
  }

  .bootLogoWrap{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }

  .bootMark{
    transform:scale(1);
    filter:drop-shadow(0 24px 44px rgba(36, 14, 126, .18));
  }
}