import type { Variants } from "framer-motion";
import { motionDurations, motionEasing } from "@/design-system/tokens";

/**
 * Reusable Framer Motion variants for the ROPTS design system.
 * Rule (Sprint 1 §18 — Motion Philosophy): motion confirms, it does not perform.
 * Keep durations short, easing editorial (a settle, not a bounce), and never
 * animate purely to manufacture excitement about a routine action.
 */

export const fadeUp: Variants = {
  hidden: { opacity: 0, y: 12 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: motionDurations.slow, ease: motionEasing.editorial },
  },
};

export const fadeIn: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: motionDurations.base, ease: motionEasing.editorial },
  },
};

export const scaleIn: Variants = {
  hidden: { opacity: 0, scale: 0.98 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { duration: motionDurations.base, ease: motionEasing.editorial },
  },
};

export const staggerContainer: Variants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.04,
    },
  },
};

/** Applied to <motion.main> in app/template.tsx for cross-route transitions. */
export const pageTransition: Variants = {
  hidden: { opacity: 0, y: 6 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: motionDurations.base, ease: motionEasing.editorial },
  },
  exit: {
    opacity: 0,
    transition: { duration: motionDurations.fast, ease: motionEasing.standard },
  },
};

/** Standard viewport config for scroll-triggered reveals — fires once, slightly before full entry. */
export const scrollReveal = {
  once: true,
  margin: "-80px 0px -80px 0px",
} as const;

/** Button/interactive press feedback — subtle, never bouncy. */
export const pressable = {
  whileTap: { scale: 0.98 },
  transition: { duration: motionDurations.fast, ease: motionEasing.standard },
};