/* Soft green aurora glow at the top of the page, a little right of
   centre. Three soft-edged bands drift and breathe on long, offset
   loops so the motion never visibly repeats. Each band is a cluster of
   overlapping, slightly offset soft blobs, so the outline is gently
   uneven rather than a clean oval, and a slight skew in the drift keeps
   it shifting. Soft radial gradients plus a static blur on each band. Sits
   behind all content (z-index -1) and ignores the pointer. */
.page-aurora {
  position: absolute;
  top: -60px;
  left: 50%;
  z-index: -1;
  width: min(2100px, 134vw);
  height: 720px;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-46%);
}

.page-aurora span {
  position: absolute;
  mix-blend-mode: screen;
  /* Extra softness on top of the gradients' own falloff. On the bands
     themselves (not the container) so the browser can keep animating
     their transforms without re-blurring every frame. */
  filter: blur(40px);
  will-change: transform, opacity;
}

.page-aurora span:nth-child(1) {
  top: -160px;
  left: 22%;
  width: 1162px;
  height: 320px;
  background:
    radial-gradient(42% 60% at 36% 55%, rgba(12, 208, 138, 0.22), rgba(12, 208, 138, 0.07) 55%, transparent 75%),
    radial-gradient(36% 50% at 56% 45%, rgba(12, 208, 138, 0.18), rgba(12, 208, 138, 0.05) 55%, transparent 75%),
    radial-gradient(28% 50% at 72% 55%, rgba(68, 255, 188, 0.12), transparent 72%);
  animation: aurora-drift-a 18s ease-in-out infinite alternate;
}

.page-aurora span:nth-child(2) {
  top: -120px;
  left: 42%;
  width: 952px;
  height: 260px;
  background:
    radial-gradient(38% 58% at 44% 48%, rgba(68, 255, 188, 0.16), rgba(68, 255, 188, 0.05) 55%, transparent 75%),
    radial-gradient(32% 46% at 64% 56%, rgba(68, 255, 188, 0.12), transparent 72%),
    radial-gradient(26% 42% at 26% 58%, rgba(12, 208, 138, 0.10), transparent 72%);
  animation: aurora-drift-b 23s ease-in-out infinite alternate;
}

.page-aurora span:nth-child(3) {
  top: -60px;
  left: 30%;
  width: 1386px;
  height: 220px;
  background:
    radial-gradient(36% 60% at 30% 46%, rgba(0, 176, 140, 0.14), rgba(0, 176, 140, 0.04) 60%, transparent 78%),
    radial-gradient(34% 52% at 52% 55%, rgba(0, 176, 140, 0.12), transparent 75%),
    radial-gradient(28% 55% at 74% 44%, rgba(12, 208, 138, 0.10), transparent 72%);
  animation: aurora-drift-c 29s ease-in-out infinite alternate;
}

@keyframes aurora-drift-a {
  0% {
    transform: translate(0, 0) rotate(-8deg) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(60px, 30px) rotate(4deg) skewX(-5deg) scale(1.15, 0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-40px, 10px) rotate(-14deg) skewX(4deg) scale(0.95, 1.1);
    opacity: 0.7;
  }
}

@keyframes aurora-drift-b {
  0% {
    transform: translate(0, 0) rotate(10deg) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-80px, 40px) rotate(-6deg) skewX(6deg) scale(1.2, 0.85);
    opacity: 1;
  }
  100% {
    transform: translate(40px, -10px) rotate(16deg) skewX(-3deg) scale(0.9, 1.15);
    opacity: 0.75;
  }
}

@keyframes aurora-drift-c {
  0% {
    transform: translate(0, 0) rotate(-4deg) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(50px, -20px) rotate(8deg) skewX(4deg) scale(1.1, 1.25);
    opacity: 0.4;
  }
  100% {
    transform: translate(-60px, 20px) rotate(-10deg) skewX(-5deg) scale(1.05, 0.9);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-aurora span {
    animation: none;
  }
}

/* Homepage: the aurora lives inside the hero, above its two-layer
   background (which would otherwise cover it) and below the header
   and hero text (z-index 1, css/home-hero.css). */
.main-hero-section > .page-aurora {
  z-index: 0;
}