Aurora Background

<!--
  Three layers, same contract as an animated hero: the aurora (decorative,
  aria-hidden), a flat scrim, then the content. The ribbons drift through
  bright emerald and cyan, so white text over the raw aurora passes contrast on
  one frame and fails on the next - the gray-950/45 scrim is what makes 4.5:1
  true at every frame. The sweep animates transform only (translate + skew), so
  the heavily blurred ribbons are rasterised once and panned by the compositor.
-->
<style>
  @keyframes aurora-sweep {
    0%, 100% { transform: translateX(-8%) skewX(-12deg); }
    50% { transform: translateX(8%) skewX(-12deg); }
  }
</style>

<section class="relative isolate w-full overflow-hidden rounded-2xl bg-gray-950">
  <div class="absolute left-[-20%] right-[-20%] top-[-45%] -z-20 h-[120%]" aria-hidden="true">
    <div class="absolute inset-0 animate-[aurora-sweep_18s_ease-in-out_infinite] bg-[linear-gradient(100deg,transparent_10%,rgba(16,185,129,0.45)_35%,rgba(34,211,238,0.35)_50%,rgba(139,92,246,0.4)_65%,transparent_90%)] blur-3xl motion-reduce:animate-none"></div>
    <div class="absolute inset-0 animate-[aurora-sweep_26s_ease-in-out_-8s_infinite_reverse] bg-[linear-gradient(80deg,transparent_20%,rgba(59,130,246,0.3)_45%,rgba(16,185,129,0.25)_60%,transparent_85%)] blur-3xl motion-reduce:animate-none"></div>
  </div>
  <div class="absolute inset-0 -z-10 bg-gray-950/45" aria-hidden="true"></div>

  <div class="px-6 py-14 text-center sm:px-8 sm:py-20">
    <p class="inline-block rounded-full border border-white/30 px-3 py-1 text-xs font-semibold text-white">
      Aurora release
    </p>

    <h2 class="mt-5 text-2xl font-bold leading-tight tracking-tight text-white sm:text-4xl">
      Interfaces that glow in the dark
    </h2>

    <p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-300">
      A northern-lights sweep on a self-painted night sky - it looks identical
      on a white page and a black one.
    </p>
  </div>
</section>