Itachi — Character Universe

export type Jutsu = {
  name: string;
  reading: string;
  nature: "Fire" | "Genjutsu" | "Space-Time" | "Sealing";
  rank: "C" | "B" | "A" | "S";
  cost: number; // chakra units
  description: string;
};

export const jutsu: Jutsu[] = [
  {
    name: "Tsukuyomi",
    reading: "月読",
    nature: "Genjutsu",
    rank: "S",
    cost: 95,
    description:
      "Absolute control of the target's perception of time — days of torment inside a single second.",
  },
];

export const byNature = (nature: Jutsu["nature"]) =>
  jutsu.filter((j) => j.nature === nature);

export function Reveal({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);
  const [shown, setShown] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setShown(true);
      return;
    }
    const io = new IntersectionObserver(
      ([entry]) => entry.isIntersecting && (setShown(true), io.disconnect()),
      { rootMargin: "-12% 0px" },
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      className={shown ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0"}
      style={{ transition: "opacity .7s ease, transform .7s ease" }}
    >
      {children}
    </div>
  );
}