/* Hero backdrop: horizontal bands of soft sky and lilac light.
   Bands are feathered on every side and blurred so they read as diffuse light. */
.bands {
  position: absolute; inset: 0 -12%; z-index: 0;
  display: grid; grid-template-rows: repeat(8, 1fr);
  pointer-events: none;
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.bands span {
  --x: 20%;
  --w: 38%;
  --c: var(--band-sky);
  background:
    radial-gradient(ellipse var(--w) 90% at var(--x) 50%, var(--c), transparent 75%),
    radial-gradient(ellipse 30% 80% at calc(var(--x) + 45%) 50%, var(--band-lilac), transparent 75%);
  opacity: 0.65;
  animation: drift 18s ease-in-out infinite alternate;
}
.bands span:nth-child(1) { --x: 42%; --w: 30%; opacity: 0.45; }
.bands span:nth-child(2) { --x: 8%; --w: 36%; --c: var(--band-lilac); animation-delay: -4s; }
.bands span:nth-child(3) { --x: 18%; --w: 42%; animation-delay: -9s; }
.bands span:nth-child(4) { --x: 30%; --w: 34%; animation-delay: -2s; }
.bands span:nth-child(5) { --x: 62%; --w: 40%; animation-delay: -12s; }
.bands span:nth-child(6) { --x: 50%; --w: 46%; --c: var(--band-lilac); animation-delay: -6s; }
.bands span:nth-child(7) { --x: 12%; --w: 30%; animation-delay: -15s; }
.bands span:nth-child(8) { --x: 44%; --w: 38%; animation-delay: -8s; }

@keyframes drift {
  from { transform: translateX(-4%); }
  to { transform: translateX(4%); }
}