.site-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #07080d;
}

.site-background__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 20%, transparent 75%);
}

.site-background__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 100%, transparent 40%, #07080d 100%);
}

.aurora-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aurora-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

body.has-aurora {
  position: relative;
  min-height: 100vh;
  background: #07080d;
}

body.has-aurora .site-header,
body.has-aurora .site-main,
body.has-aurora .site-footer {
  z-index: 1;
}

body.has-aurora .site-main,
body.has-aurora .site-footer {
  position: relative;
}

body.has-aurora .site-main {
  background: transparent;
}

body.has-aurora .site-footer {
  background: rgba(7, 8, 13, 0.85);
}