fix(projects): reveal individual cards on small screens

app/components/Projects.tsx

@@ -15,24 +15,11 @@ export default function Projects({
 }) {
   const shouldReduceMotion = useReducedMotion();
 
-  const gridVariants: Variants = {
-    hidden: {},
-    visible: {
-      transition: {
-        delayChildren: 0.08,
-        staggerChildren: 0.08,
-      },
-    },
-  };
-
   const cardVariants: Variants = {
-    hidden: shouldReduceMotion
-      ? { opacity: 0 }
-      : { opacity: 0, y: 24, clipPath: "inset(100% 0 0 0)" },
+    hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 24 },
     visible: {
       opacity: 1,
       y: 0,
-      clipPath: "inset(0% 0 0 0)",
       transition: shouldReduceMotion
         ? { duration: 0.25 }
         : { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
@@ -48,13 +35,7 @@ export default function Projects({
       dark
       disableChildrenAnimation
     >
-      <motion.div
-        className="ds-grid-2"
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, amount: 0.2 }}
-        variants={gridVariants}
-      >
+      <div className="ds-grid-2">
         {projects.map((project) => {
           const caseStudy = caseStudies.find(
             (entry) => entry.id === project.id,
@@ -63,6 +44,9 @@ export default function Projects({
             <motion.article
               key={project.id}
               className="ds-card h-full"
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, amount: "some" }}
               variants={cardVariants}
               whileHover={
                 shouldReduceMotion
@@ -166,7 +150,7 @@ export default function Projects({
             </motion.article>
           );
         })}
-      </motion.div>
+      </div>
 
       <div className="mt-sp-8 flex flex-wrap gap-sp-3" data-reel-stagger="left">
         <MagneticButton