"use client";

import { motion, useReducedMotion } from "motion/react";

/**
 * Route transition. A panel of indigo cloth draws across and lifts away,
 * covering the moment the new page mounts.
 *
 * template.tsx remounts on every navigation, which is what makes this fire.
 */
export default function Template({ children }: { children: React.ReactNode }) {
  const reduced = useReducedMotion();

  return (
    <>
      <motion.div
        className="pointer-events-none fixed inset-0 z-[60] origin-top bg-[var(--indigo)]"
        initial={{ scaleY: 1 }}
        animate={{ scaleY: 0 }}
        transition={{
          duration: reduced ? 0 : 0.75,
          ease: [0.76, 0, 0.24, 1],
        }}
        style={{ transformOrigin: "top" }}
      />
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{
          duration: reduced ? 0 : 0.5,
          delay: reduced ? 0 : 0.25,
        }}
      >
        {children}
      </motion.div>
    </>
  );
}