Aurora Gradient

// Keyframes cannot be expressed as Tailwind utilities, so they live in a style element.
// Three different paths and durations, so the blobs never fall into step.
const css = `
@keyframes aurora-drift-brass {
  from { transform: translate(-60px, 20px) scale(1); }
  to { transform: translate(40px, -30px) scale(1.25); }
}
@keyframes aurora-drift-teal {
  from { transform: translate(30px, 40px) scale(1.25); }
  to { transform: translate(-50px, -20px) scale(1); }
}
@keyframes aurora-drift-blue {
  from { transform: translate(20px, -40px) scale(1); }
  to { transform: translate(-60px, 30px) scale(1.25); }
}
`;

// Solid circles rather than gradients: a 60px blur on a hard edge keeps
// more colour in the middle, so the light still reads at 35% opacity.
const BLOBS: { key: string; color: string; position: React.CSSProperties; animation: string }[] = [
  {
    key: 'brass',
    color: '#c8a96a',
    position: { top: -80, left: '8%' },
    animation: 'aurora-drift-brass 12s ease-in-out alternate infinite',
  },
  {
    key: 'teal',
    color: '#4f8c7a',
    position: { bottom: -110, left: '30%' },
    animation: 'aurora-drift-teal 10s ease-in-out alternate infinite',
  },
  {
    key: 'blue',
    color: '#3d5aa8',
    position: { top: -40, right: -60 },
    animation: 'aurora-drift-blue 14s ease-in-out alternate infinite',
  },
];

export function AuroraGradient({ title = 'Aurora' }: { title?: string }) {
  return (
    <div className="relative grid h-full min-h-[220px] w-full place-items-center overflow-hidden bg-[#0e0f11]">
      <style>{css}</style>
      {BLOBS.map(blob => (
        <span
          key={blob.key}
          aria-hidden="true"
          style={{
            ...blob.position,
            background: blob.color,
            animation: blob.animation,
            filter: 'blur(60px)',
            willChange: 'transform',
          }}
          className="absolute h-[300px] w-[300px] rounded-full opacity-[0.35]"
        />
      ))}
      <h1
        style={{ fontFamily: "Georgia, 'Times New Roman', serif" }}
        className="relative text-[40px] font-normal tracking-[0.01em] text-[#ece9e2]"
      >
        {title}
      </h1>
    </div>
  );
}