Aurora Background

/* Add to globals.css:
@keyframes aurora-drift {
  0%, 100% { transform: translate3d(-8%, -4%, 0) rotate(-4deg); }
  50% { transform: translate3d(8%, 4%, 0) rotate(4deg); }
}
*/
export function AuroraBackground({ children }: { children?: React.ReactNode }) {
  return (
    <div className="relative overflow-hidden rounded-2xl bg-neutral-950">
      <div
        aria-hidden="true"
        className="absolute -inset-[40%] blur-3xl motion-safe:[animation:aurora-drift_14s_ease-in-out_infinite]"
        style={{
          background:
            "radial-gradient(38% 45% at 30% 35%, rgba(245,158,11,0.35) 0%, transparent 70%), radial-gradient(34% 42% at 70% 60%, rgba(109,40,217,0.3) 0%, transparent 70%)",
        }}
      />
      <div
        aria-hidden="true"
        className="absolute -inset-[40%] blur-3xl [animation-direction:reverse] motion-safe:[animation:aurora-drift_19s_ease-in-out_infinite]"
        style={{
          background:
            "radial-gradient(30% 40% at 60% 30%, rgba(245,158,11,0.18) 0%, transparent 70%)",
        }}
      />
      <div className="relative">{children}</div>
    </div>
  );
}