import { cn } from "@/lib/utils";

type HeroMotionBackdropProps = {
  compact?: boolean;
};

/**
 * Layered ambient backdrop rendered behind every hero (home + page).
 * Pure CSS so it needs no client JS: a faded grid for structure, a soft
 * brand glow, slowly drifting brand orbs, a grain overlay for texture, and
 * a bottom fade that blends the hero into the page content. The orb drift is
 * disabled under `prefers-reduced-motion` (see globals.css).
 */
export function HeroMotionBackdrop({ compact = false }: HeroMotionBackdropProps) {
  return (
    <div
      aria-hidden="true"
      className={cn(
        "hero-backdrop pointer-events-none absolute inset-0 z-0 overflow-hidden",
        compact && "is-compact",
      )}
    >
      <div className="hero-backdrop-base" />
      <div className="hero-backdrop-grid" />
      <div className="hero-backdrop-glow" />
      <span className="hero-orb hero-orb-1" />
      <span className="hero-orb hero-orb-2" />
      <span className="hero-orb hero-orb-3" />
      <div className="hero-noise hero-backdrop-noise" />
      <div className="hero-backdrop-floor" />
    </div>
  );
}