.syntia-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(141,189,255,.22),transparent 32%),
    radial-gradient(circle at 82% 24%,rgba(183,166,255,.20),transparent 30%),
    radial-gradient(circle at 50% 90%,rgba(115,255,191,.10),transparent 34%),
    rgba(3,5,10,.90);
  backdrop-filter:blur(36px);
  -webkit-backdrop-filter:blur(36px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1);
}

.syntia-loader.show{
  opacity:1;
  pointer-events:auto;
}

.syntia-loader::before{
  content:"";
  position:absolute;
  width:720px;
  height:720px;
  border-radius:50%;
  background:conic-gradient(
    from 180deg,
    transparent,
    rgba(155,231,255,.36),
    transparent,
    rgba(183,166,255,.32),
    transparent,
    rgba(115,255,191,.24),
    transparent
  );
  filter:blur(8px);
  mask:radial-gradient(circle,transparent 0 50%,black 51% 52%,transparent 53%);
  animation:loaderSpin 18s linear infinite;
}

.syntia-loader::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,black 30%,transparent 82%);
  opacity:.85;
}

.syntia-loader-core{
  width:180px;
  height:180px;
  border-radius:48px;
  display:grid;
  place-items:center;
  position:relative;
  z-index:3;
  background:
    radial-gradient(circle at top,rgba(255,255,255,.24),rgba(255,255,255,.07)),
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(44px);
  -webkit-backdrop-filter:blur(44px);
  box-shadow:
    0 55px 150px rgba(0,0,0,.62),
    0 0 90px rgba(141,189,255,.20),
    inset 0 1px 0 rgba(255,255,255,.26);
  animation:loaderFloat 3.8s ease-in-out infinite;
}

.syntia-loader-core::before{
  content:"";
  position:absolute;
  inset:-36px;
  border-radius:72px;
  background:linear-gradient(135deg,rgba(155,231,255,.32),rgba(183,166,255,.26),rgba(115,255,191,.18));
  filter:blur(50px);
  opacity:.62;
  z-index:-1;
  animation:loaderGlow 2.6s ease-in-out infinite;
}

.syntia-loader-core::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:36px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),transparent 42%),
    linear-gradient(315deg,rgba(155,231,255,.08),transparent 44%);
  pointer-events:none;
}

.syntia-loader-logo{
  position:relative;
  z-index:4;
  font-size:4.7rem;
  line-height:.9;
  font-weight:900;
  letter-spacing:-.09em;
  background:linear-gradient(90deg,#fff,#dff3ff,#fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 24px 50px rgba(0,0,0,.38);
}

.syntia-loader-logo::after{
  content:"SYNTIA";
  display:block;
  margin-top:12px;
  font-size:.72rem;
  letter-spacing:.35em;
  -webkit-text-fill-color:rgba(255,255,255,.76);
  color:rgba(255,255,255,.76);
}

.syntia-loader-line{
  position:absolute;
  z-index:5;
  bottom:-54px;
  width:260px;
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 28px rgba(141,189,255,.12);
}

.syntia-loader-line::after{
  content:"";
  display:block;
  width:48%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#fff,#9be7ff,transparent);
  animation:loaderLine 1.15s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes loaderSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes loaderFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-10px) scale(1.025);}
}

@keyframes loaderGlow{
  0%,100%{opacity:.38;transform:scale(.95);}
  50%{opacity:.82;transform:scale(1.08);}
}

@keyframes loaderLine{
  from{transform:translateX(-120%);}
  to{transform:translateX(245%);}
}

@media(max-width:560px){
  .syntia-loader-core{
    width:150px;
    height:150px;
    border-radius:40px;
  }

  .syntia-loader-logo{
    font-size:3.8rem;
  }

  .syntia-loader-line{
    width:220px;
  }
}