/* Silicon's loading screen: a small signal becoming a finished product. */
.site-loader {
  --loader-ink: #1b1d1e;
  --loader-blue: #4928fd;
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--loader-ink);
  background:
    radial-gradient(ellipse at 19% 18%, rgba(205, 239, 251, .8), transparent 34%),
    radial-gradient(ellipse at 83% 78%, rgba(253, 238, 203, .72), transparent 35%),
    #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), visibility .75s;
}

.site-loader::before,
.site-loader::after {
  position: absolute;
  width: min(68vw, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(73, 40, 253, .07);
  border-radius: 50%;
  content: "";
}

.site-loader::after {
  width: min(48vw, 460px);
  border-color: rgba(73, 40, 253, .06);
}

.site-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-loading { overflow: hidden; }
.loader-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(73, 40, 253, .13); border-radius: 50%; transform: translate(-50%, -50%); }
.loader-orbit--outer { width: 220px; height: 220px; animation: loader-spin 12s linear infinite; }
.loader-orbit--inner { width: 168px; height: 168px; border-style: dashed; border-color: rgba(73, 40, 253, .18); animation: loader-spin 20s linear infinite reverse; }
.loader-orbit--outer::before, .loader-orbit--inner::before { position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #4928fd; box-shadow: 0 0 18px rgba(73, 40, 253, .55); content: ""; }
.loader-orbit--inner::before { top: auto; bottom: 16px; left: 24px; width: 5px; height: 5px; background: #ffaf68; box-shadow: 0 0 16px rgba(255, 175, 104, .7); }
.loader-core { position: absolute; top: 50%; left: 50%; display: grid; width: 112px; height: 112px; place-items: center; overflow: hidden; border: 1px solid rgba(73, 40, 253, .12); border-radius: 34px; background: rgba(255, 255, 255, .8); box-shadow: 0 20px 55px rgba(73, 40, 253, .13), inset 0 1px #fff; transform: translate(-50%, -50%); }
.loader-core__logo { z-index: 1; width: 38px; height: 38px; object-fit: contain; }
.loader-core__beam { position: absolute; inset: -50% -30%; background: linear-gradient(110deg, transparent 42%, rgba(205, 239, 251, .2) 46%, #fff 50%, rgba(205, 239, 251, .2) 54%, transparent 58%); animation: loader-scan 2.8s ease-in-out infinite; }
.loader-core__spark { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #ffaf68; animation: loader-spark 2.4s ease-in-out infinite; }
.loader-core__spark--one { top: 23px; right: 25px; }
.loader-core__spark--two { bottom: 27px; left: 20px; width: 3px; height: 3px; animation-delay: -.8s; }
.loader-core__spark--three { top: 30px; left: 23px; width: 3px; height: 3px; background: #70b5ff; animation-delay: -1.5s; }

@keyframes loader-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes loader-scan { 0%, 100% { transform: translateX(-55%); opacity: .3; } 50% { transform: translateX(55%); opacity: 1; } }
@keyframes loader-spark { 0%, 100% { opacity: .25; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.4); } }

@media (max-width: 575.98px) {
  .loader-orbit--outer { width: 190px; height: 190px; }
  .loader-orbit--inner { width: 146px; height: 146px; }
  .loader-core { width: 98px; height: 98px; border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader *, .site-loader::before, .site-loader::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .site-loader { transition-duration: .2s; }
}