/* ============================= */
/*        AURORA BACKGROUND      */
/* ============================= */

/* Base aurora layer */
.aurora{
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  background: linear-gradient(180deg, #02020a 0%, #020317 100%);
  overflow: hidden;
}

/* Shared aurora blobs */
.aurora::before,
.aurora::after,
.aurora .mid{
  content: '';
  position: absolute;
  inset: -25%;
  transform-origin: center;
  filter: blur(70px) saturate(140%);
  mix-blend-mode: screen;
  opacity: 0.95;
  pointer-events: none;
}

/* Aurora layer 1 */
.aurora::before{
  background:
    radial-gradient(
      60% 40% at 20% 30%,
      rgba(86,240,193,0.85),
      transparent 25%
    ),
    radial-gradient(
      50% 30% at 80% 70%,
      rgba(153,102,255,0.7),
      transparent 25%
    );
  animation:
    float1 20s linear infinite,
    hue1 18s linear infinite;
}

/* Aurora layer 2 (middle) */
.aurora .mid{
  background:
    radial-gradient(
      50% 50% at 50% 40%,
      rgba(255,170,120,0.75),
      transparent 20%
    ),
    radial-gradient(
      55% 35% at 30% 70%,
      rgba(120,200,255,0.6),
      transparent 18%
    );
  animation:
    float2 26s linear infinite,
    hue2 22s linear infinite;
}

/* Aurora layer 3 */
.aurora::after{
  background:
    radial-gradient(
      45% 40% at 70% 20%,
      rgba(160,255,200,0.7),
      transparent 20%
    ),
    radial-gradient(
      60% 40% at 10% 80%,
      rgba(200,120,255,0.55),
      transparent 22%
    );
  animation:
    float3 34s linear infinite,
    hue3 28s linear infinite;
}

/* ============================= */
/*           NOISE LAYER         */
/* ============================= */

.noise{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'>\
<feTurbulence baseFrequency='0.9' numOctaves='2' seed='2'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.02'/>\
</svg>");
  mix-blend-mode: overlay;
  animation: subtleNoise 6s linear infinite;
}

/* ============================= */
/*           ANIMATIONS          */
/* ============================= */

@keyframes float1{
  0%   { transform: translate3d(-4%, 0, 0); }
  50%  { transform: translate3d(4%, -4%, 0); }
  100% { transform: translate3d(-4%, 0, 0); }
}

@keyframes float2{
  0%   { transform: translate3d(0%, 0, 0); }
  50%  { transform: translate3d(6%, 3%, 0); }
  100% { transform: translate3d(0%, 0, 0); }
}

@keyframes float3{
  0%   { transform: translate3d(2%, 0, 0); }
  50%  { transform: translate3d(-6%, -3%, 0); }
  100% { transform: translate3d(2%, 0, 0); }
}

@keyframes hue1{
  0%   { filter: blur(70px) saturate(140%) hue-rotate(0deg); }
  100% { filter: blur(70px) saturate(140%) hue-rotate(360deg); }
}

@keyframes hue2{
  0%   { filter: blur(70px) saturate(140%) hue-rotate(0deg); }
  100% { filter: blur(70px) saturate(140%) hue-rotate(-360deg); }
}

@keyframes hue3{
  0%   { filter: blur(70px) saturate(140%) hue-rotate(0deg); }
  100% { filter: blur(70px) saturate(140%) hue-rotate(360deg); }
}

@keyframes subtleNoise{
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-10px, 5px); }
  100% { transform: translate(0, 0); }
}