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

type ColumnWaveBackgroundProps = {
  position: "fixed" | "absolute";
};

const ColumnWaveBackground = ({ position }: ColumnWaveBackgroundProps) => {
  return (
    <div className={cls(position, "inset-0 -z-10 overflow-hidden flex items-end justify-between pointer-events-none select-none", position === "absolute" && "mask-[linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]")} aria-hidden="true">
      <div className="relative flex flex-col gap-1 h-full">
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "0s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "0.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "0.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "0.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "0.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.6s" }} />
      </div>

      <div className="relative flex flex-col gap-1 h-full">
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.25s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.45s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.65s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "1.85s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.05s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.25s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.45s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.65s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.85s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.05s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.25s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.45s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.65s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.85s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.05s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.25s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.45s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.65s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.85s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.05s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.25s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.45s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.65s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.85s" }} />
      </div>

      <div className="relative flex flex-col gap-1 h-full">
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.5s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.7s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "2.9s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.1s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.3s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.5s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.7s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.9s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.1s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.3s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.5s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.7s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.9s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.1s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.3s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.5s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.7s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.9s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.1s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.3s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.5s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.7s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.9s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.1s" }} />
      </div>

      <div className="relative flex flex-col gap-1 h-full">
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.75s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "3.95s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.15s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.35s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.55s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.75s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "4.95s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.15s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.35s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.55s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.75s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.95s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.15s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.35s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.55s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.75s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.95s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.15s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.35s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.55s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.75s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.95s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8.15s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8.35s" }} />
      </div>

      <div className="relative flex flex-col gap-1 h-full">
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "5.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "6.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "7.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8.6s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "8.8s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "9s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "9.2s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "9.4s" }} />
        <div className="opacity-0 h-8 w-2 bg-background-accent [box-shadow:0px_0px_50px_16px_color-mix(in_srgb,var(--color-background-accent)_12%,transparent),0px_0px_7px_1px_color-mix(in_srgb,var(--color-background-accent)_31%,transparent)] animate-[cell-wave-pulse_4s_ease_infinite]" style={{ animationDelay: "9.6s" }} />
      </div>
    </div>
  );
};

export default ColumnWaveBackground;