.aurora-edge {
  position: fixed;
  inset-block: 0;
  width: min(32vw, 460px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  opacity: 0;
  transition: opacity 280ms ease;
  isolation: isolate;
}

body.has-edge-aurora .aurora-edge {
  opacity: 1;
}

body.has-edge-aurora::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(7, 13, 26, 0.01) 0%,
      rgba(7, 13, 26, 0.03) 16%,
      rgba(7, 13, 26, 0.1) 28%,
      rgba(7, 13, 26, 0.3) 38%,
      rgba(7, 13, 26, 0.68) 45%,
      rgba(7, 13, 26, 0.9) 49%,
      rgba(7, 13, 26, 0.9) 51%,
      rgba(7, 13, 26, 0.68) 55%,
      rgba(7, 13, 26, 0.3) 62%,
      rgba(7, 13, 26, 0.1) 72%,
      rgba(7, 13, 26, 0.03) 84%,
      rgba(7, 13, 26, 0.01) 100%),
    radial-gradient(70% 104% at 50% 10%, rgba(7, 13, 26, 0.02), rgba(7, 13, 26, 0.18) 58%, rgba(7, 13, 26, 0.36) 100%);
}

.aurora-edge::before,
.aurora-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aurora-edge::before {
  z-index: 1;
  background:
    linear-gradient(to var(--aurora-fade-direction), rgba(7, 13, 26, 0.0), rgba(7, 13, 26, 0.12) 62%, rgba(7, 13, 26, 0.42) 92%),
    linear-gradient(180deg, rgba(7, 13, 26, 0.0), rgba(7, 13, 26, 0.08) 56%, rgba(7, 13, 26, 0.2));
}

.aurora-edge::after {
  z-index: 3;
  background:
    linear-gradient(to var(--aurora-fade-direction), rgba(7, 13, 26, 0.0), rgba(7, 13, 26, 0.2) 80%, rgba(7, 13, 26, 0.54) 100%),
    radial-gradient(120% 72% at 50% 6%, rgba(7, 13, 26, 0.0), rgba(7, 13, 26, 0.06) 56%, rgba(7, 13, 26, 0.18) 100%);
}

.aurora-edge--left {
  --aurora-fade-direction: right;
  left: 0;
  background:
    radial-gradient(98% 84% at 0% 30%, rgba(82, 244, 208, 0.42), transparent 74%),
    radial-gradient(94% 102% at 0% 78%, rgba(127, 143, 255, 0.34), transparent 78%);
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 46%, rgba(0, 0, 0, 0.92) 68%, rgba(0, 0, 0, 0.68) 84%, rgba(0, 0, 0, 0.28) 94%, transparent 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 46%, rgba(0, 0, 0, 0.92) 68%, rgba(0, 0, 0, 0.68) 84%, rgba(0, 0, 0, 0.28) 94%, transparent 100%);
}

.aurora-edge--right {
  --aurora-fade-direction: left;
  right: 0;
  width: min(27vw, 380px);
  background:
    radial-gradient(94% 78% at 100% 28%, rgba(193, 140, 255, 0.36), transparent 74%),
    radial-gradient(88% 98% at 100% 78%, rgba(110, 127, 255, 0.28), transparent 78%);
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 44%, rgba(0, 0, 0, 0.9) 66%, rgba(0, 0, 0, 0.62) 82%, rgba(0, 0, 0, 0.24) 94%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.99) 44%, rgba(0, 0, 0, 0.9) 66%, rgba(0, 0, 0, 0.62) 82%, rgba(0, 0, 0, 0.24) 94%, transparent 100%);
}

.aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 1;
  filter: saturate(1.32) brightness(1.18) contrast(1.06);
  display: block;
}

.bg-orb {
  z-index: 0;
}

.layout,
.home-lower {
  position: relative;
  z-index: 2;
}

@media (max-width: 1200px) {
  .aurora-edge--left {
    width: min(26vw, 360px);
  }

  .aurora-edge--right {
    width: min(22vw, 300px);
  }
}

@media (max-width: 900px), (pointer: coarse) {
  .aurora-edge {
    display: none;
  }

  body.has-edge-aurora::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-edge {
    display: none;
  }

  body.has-edge-aurora::before {
    display: none;
  }
}