Aurora Background

/* Aurora Background — gradients multicouches animes */

<div style={{
  position: "relative", width: "100%", height: "100%",
  background: "#050505", overflow: "hidden",
}}>
  {/* Couche 1: bleu/violet */}
  <div style={{
    position: "absolute", inset: 0, opacity: 0.5,
    background: "radial-gradient(ellipse at 50% 50%, rgba(76,29,149,0.4), transparent 70%)",
    animation: "aurora1 20s ease-in-out infinite alternate",
  }} />
  {/* Couche 2: teal/vert */}
  <div style={{
    position: "absolute", inset: 0, opacity: 0.3,
    background: "radial-gradient(ellipse at 30% 60%, rgba(6,182,212,0.4), transparent 70%)",
    animation: "aurora2 25s ease-in-out infinite alternate",
  }} />
  <div className="relative z-10">{children}</div>
</div>

@keyframes aurora1 {
  0% { background-position: 50% 50%; }
  100% { background-position: 350% 50%; }
}
@keyframes aurora2 {
  0% { background-position: 30% 60%; }
  100% { background-position: 280% 40%; }
}