@keyframes yunling-star-drift {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 220px 360px, -180px 260px, 120px -180px;
  }
}

@keyframes yunling-aurora-breathe {
  0% {
    opacity: .22;
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  50% {
    opacity: .48;
    transform: translate3d(2%, 1%, 0) scale(1.06);
  }
  100% {
    opacity: .28;
    transform: translate3d(-1%, 2%, 0) scale(1.02);
  }
}

@keyframes yunling-light-sweep {
  0% {
    transform: translate3d(-18%, 8%, 0) rotate(-8deg);
    opacity: .14;
  }
  50% {
    opacity: .32;
  }
  100% {
    transform: translate3d(18%, -8%, 0) rotate(8deg);
    opacity: .18;
  }
}

#root {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

#root::before,
#root::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
}

#root::before {
  background-image:
    radial-gradient(circle at 20px 24px, rgba(103, 232, 249, .28) 0 1px, transparent 2px),
    radial-gradient(circle at 90px 70px, rgba(255, 255, 255, .18) 0 1px, transparent 2px),
    radial-gradient(circle at 160px 120px, rgba(45, 212, 191, .22) 0 1.5px, transparent 3px);
  background-size: 210px 210px, 280px 280px, 360px 360px;
  opacity: .62;
  animation: yunling-star-drift 42s linear infinite;
}

#root::after {
  background:
    radial-gradient(ellipse at 32% 22%, rgba(34, 211, 238, .18), transparent 34%),
    radial-gradient(ellipse at 72% 68%, rgba(16, 185, 129, .16), transparent 38%),
    linear-gradient(110deg, transparent 18%, rgba(103, 232, 249, .14) 48%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(18px);
  animation: yunling-aurora-breathe 19s ease-in-out infinite alternate;
}

#root > * {
  position: relative;
  z-index: 1;
}

.front-nav__brand,
.front-nav__link,
.front-nav__user,
.login-card,
.pricing-card,
.recharge-card,
.help-section {
  position: relative;
  z-index: 2;
}

@media (max-width: 640px) {
  #root main section:first-of-type {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #root main section:first-of-type h1 {
    font-size: 40px !important;
    line-height: 1.12 !important;
  }

  #root main section:first-of-type p {
    font-size: 15px !important;
  }

  #root main section:first-of-type button {
    white-space: nowrap !important;
  }

  #root main section:first-of-type button span {
    white-space: nowrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root::before,
  #root::after {
    animation: none;
  }
}