/* Aurora Wave backdrop — Monochrome edition (black/grey) */

.hero { position: relative; overflow: hidden; }
.hero .hero-content { position: relative; z-index: 2; }

.hero-aurora {
  position: absolute;
  inset: -10% -20% -10% -20%;
  z-index: 1;
  pointer-events: none;
  /* On black, screen gives a clean glow; nice + subtle */
  mix-blend-mode: screen;
  opacity: 0.28;
  filter: blur(28px);
}

/* Base blob styling */
.aurora-blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  will-change: transform;
  animation: aurora-drift 46s ease-in-out infinite;
  /* Monochrome gradients */
  background: radial-gradient(closest-side, rgba(220,220,220,0.18), rgba(220,220,220,0) 60%);
}

/* Layer 1 — light grey */
.aurora-blob.a1 {
  top: -22vmax;
  left: -10vmax;
  animation-duration: 48s;
}

/* Layer 2 — medium grey, reverse drift */
.aurora-blob.a2 {
  bottom: -25vmax;
  right: -14vmax;
  animation-duration: 56s;
  animation-direction: reverse;
  background: radial-gradient(closest-side, rgba(160,160,160,0.14), rgba(160,160,160,0) 60%);
}

/* Layer 3 — blended greys */
.aurora-blob.a3 {
  top: 18%;
  left: 60%;
  width: 52vmax;
  height: 52vmax;
  animation-duration: 64s;
  background:
    radial-gradient(closest-side, rgba(235,235,235,0.12), rgba(235,235,235,0) 60%),
    radial-gradient(closest-side, rgba(140,140,140,0.10), rgba(140,140,140,0) 65%);
}

/* Faint horizontal wave band in greys */
.aurora-waveband {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 32%;
  height: 36%;
  filter: blur(22px);
  opacity: 0.10;
  will-change: transform;
  animation: aurora-band 90s linear infinite;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(230,230,230,0.12) 0%, rgba(230,230,230,0) 65%),
    radial-gradient(ellipse at 60% 45%, rgba(150,150,150,0.10) 0%, rgba(150,150,150,0) 70%);
}

/* Keyframes */
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(10%, -6%, 0) scale(1.05) rotate(12deg); }
  100% { transform: translate3d(-12%, 8%, 0) scale(1) rotate(-8deg); }
}
@keyframes aurora-band {
  from { transform: translateX(0%); }
  to   { transform: translateX(25%); }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .hero-aurora { opacity: 0.24; filter: blur(24px); }
  .aurora-blob { width: 85vmax; height: 85vmax; }
  .aurora-blob.a3 { width: 60vmax; height: 60vmax; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aurora-blob, .aurora-waveband { animation: none !important; }
  .hero-aurora { opacity: 0.18; }
}