/* ============================================================
   Aurora background — spans the community + newsletter sections
   Soft animated blue/indigo/violet ribbons on a light field.
   ============================================================ */

.aurora-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #FAFBFF;
}

/* sections sit above the aurora, transparent so it shows through */
.aurora-stage > .gn-commune,
.aurora-stage > .gn-subscribe {
  position: relative;
  z-index: 1;
  background: transparent;
}

.aurora-stage::before,
.aurora-stage::after {
  content: "";
  position: absolute;
  inset: -160px;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(100deg,
      rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 7%,
      transparent 10%, transparent 12%, rgba(255,255,255,0.7) 16%),
    repeating-linear-gradient(100deg,
      #b9bff0 10%, #e6def7 15%, #cdbff0 20%, #efeafc 25%, #c4c9f2 30%);
  background-size: 300% 220%, 200% 130%;
  background-position: 0% 50%, 0% 50%;
  filter: blur(34px);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.aurora-stage::after {
  background-size: 240% 180%, 170% 120%;
  opacity: 0.34;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
  .aurora-stage::before { animation: auroraDrift 26s linear infinite alternate; }
  .aurora-stage::after  { animation: auroraDrift 38s linear infinite alternate-reverse; }
}

@keyframes auroraDrift {
  0%   { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 100% 50%, 100% 50%; }
}