timings and haiku changes

src/tictactoe/Board.tsx

@@ -50,9 +50,12 @@ export default function Board({
 
   const [haiku, setHaiku] = useState(getHaiku());
   const [haikuIndex, setHaikuIndex] = useState(0);
+  const nextLineIn = 3600;
+  const allLinesStay = 2400;
+  const allLinesFade = 1200;
 
   useEffect(() => {
-    const totalTime = 3 * 2400 + 6000 + 2400;
+    const totalTime = haiku.length * nextLineIn + allLinesStay + allLinesFade;
 
     const timer = setTimeout(() => {
       const next = getHaiku();
@@ -200,11 +203,11 @@ export default function Board({
                   {haiku.map((line, i) => (
                     <motion.div
                       key={i}
-                      initial={{ opacity: 0, y: 10 }}
-                      animate={{ opacity: 1, y: 0 }}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
                       transition={{
-                        delay: i * 2.4, // line-by-line stagger timing
-                        duration: 10.0,
+                        delay: i * (nextLineIn / 1000),
+                        duration: nextLineIn / 1000,
                         ease: "easeOut",
                       }}
                       style={{