.mist {
  position: absolute;
  left: -30%;
  width: 160%;
  pointer-events: none;
  filter: blur(24px);
  mix-blend-mode: screen;
  opacity: calc(0.19 - var(--night) * 0.08);
  will-change: transform;
}
.mist-back {
  top: 47%;
  height: 16%;
  background:
    radial-gradient(ellipse at 35% 50%, #cfdbdd80, transparent 45%),
    radial-gradient(ellipse at 70% 30%, #c5d4d380, transparent 40%);
  animation: drift 36s ease-in-out infinite alternate;
}
.mist-front {
  top: 63%;
  height: 30%;
  background:
    radial-gradient(ellipse at 20% 40%, #b6c9c450, transparent 40%),
    radial-gradient(ellipse at 75% 30%, #b6c9c460, transparent 42%);
  animation: drift 24s ease-in-out infinite alternate-reverse;
}
.aurora {
  position: absolute;
  inset: -15% 0 44%;
  overflow: hidden;
  opacity: calc(var(--night) * 0.65);
  mix-blend-mode: screen;
  filter: blur(22px);
  mask-image: linear-gradient(transparent, #000 30%, #000 60%, transparent);
}
.aurora i {
  position: absolute;
  left: 20%;
  top: 18%;
  width: 65%;
  height: 60%;
  border-radius: 50%;
  border-top: 36px solid #77c7aa;
  transform: rotate(-14deg) skewX(-25deg);
  box-shadow:
    0 -22px 55px #73cbaa40,
    inset 0 30px 40px #64b6ac40;
  animation: aurora 18s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  left: 5%;
  top: 33%;
  border-color: #a6cbbd;
  animation-delay: -8s;
  opacity: 0.55;
}
.aurora i:nth-child(3) {
  left: 43%;
  top: 2%;
  border-color: #a6b2cd;
  animation-delay: -13s;
  opacity: 0.3;
}
.stars {
  opacity: calc(var(--night) * 0.8);
  background-image:
    radial-gradient(1px 1px at 33% 13%, #fff, transparent),
    radial-gradient(1px 1px at 63% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 54% 22%, #fff, transparent),
    radial-gradient(1px 1px at 46% 17%, #fff, transparent),
    radial-gradient(1px 1px at 73% 12%, #fff, transparent),
    radial-gradient(1px 1px at 38% 30%, #fff, transparent);
}
canvas,
.vignette,
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.vignette {
  background:
    radial-gradient(ellipse at 50% 43%, transparent 30%, #07171b80 100%),
    linear-gradient(transparent 80%, #08151d50);
}
.grain {
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
@keyframes emerge {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(20px);
  }
  to {
    opacity: 0.92;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes emerge-reflection {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.23;
  }
}
@keyframes drift {
  from {
    transform: translateX(-4%) scale(1);
  }
  to {
    transform: translateX(5%) scale(1.1);
  }
}
@keyframes aurora {
  from {
    transform: rotate(-14deg) skewX(-25deg) scaleY(0.8);
  }
  to {
    transform: rotate(-5deg) skewX(10deg) scaleY(1.2);
  }
}
@keyframes descend {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  80% {
    transform: translateY(24px);
    opacity: 0;
  }
}