feat: серии + count-up в Stats

- SeriesGrid: карточки серий с иконками (Sparkles/Plug/Zap/Layers) и цветовыми темами
- /series/[slug]: страница серии с интро и сеткой статей в порядке из article_ids
- Stats: count-up анимация (easeOutQuart 1.2s) при появлении в viewport через IntersectionObserver
- sitemap.xml: добавлены /notes и все серии

components/Stats.js

@@ -1,6 +1,41 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
 import { BookOpen, Clock, Brain, Eye } from 'lucide-react';
 
-function StatCard({ icon: Icon, value, label }) {
+function fmt(n) {
+  if (!n) return '0';
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
+  return Math.round(n).toLocaleString('ru-RU');
+}
+
+/** Плавный count-up от 0 до value за ~1.2 секунды */
+function useCountUp(target, run) {
+  const [val, setVal] = useState(0);
+  useEffect(() => {
+    if (!run || !target) { setVal(target || 0); return; }
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) { setVal(target); return; }
+    let start = null;
+    const duration = 1200;
+    let raf = 0;
+    const step = (ts) => {
+      if (!start) start = ts;
+      const t = Math.min(1, (ts - start) / duration);
+      // easeOutQuart для приятной кривой
+      const eased = 1 - Math.pow(1 - t, 4);
+      setVal(Math.floor(target * eased));
+      if (t < 1) raf = requestAnimationFrame(step);
+      else setVal(target);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [target, run]);
+  return val;
+}
+
+function StatCard({ icon: Icon, value, label, run }) {
+  const animated = useCountUp(value || 0, run);
   return (
     <div className="article-card flex items-center gap-3 sm:gap-4 p-4 sm:p-5">
       <div
@@ -10,32 +45,37 @@ function StatCard({ icon: Icon, value, label }) {
         <Icon className="w-4 h-4 sm:w-5 sm:h-5 accent" />
       </div>
       <div className="min-w-0">
-        <div className="text-xl sm:text-2xl font-bold ink leading-none mb-1 tabular-nums">{value}</div>
+        <div className="text-xl sm:text-2xl font-bold ink leading-none mb-1 tabular-nums">{fmt(animated)}</div>
         <div className="text-[10px] sm:text-xs mute uppercase tracking-wider truncate">{label}</div>
       </div>
     </div>
   );
 }
 
-function fmt(n) {
-  if (!n) return '0';
-  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
-  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
-  return n.toLocaleString('ru-RU');
-}
-
 export default function Stats({ data }) {
+  const ref = useRef(null);
+  const [run, setRun] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const io = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) { setRun(true); io.disconnect(); }
+    }, { threshold: 0.3 });
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, []);
+
   if (!data) return null;
   return (
-    <section className="container-wide pb-12">
+    <section ref={ref} className="container-wide pb-12">
       <h2 className="text-xs sm:text-sm font-medium uppercase tracking-widest mute mb-4 sm:mb-5">
         Что уже написал ИИ
       </h2>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
-        <StatCard icon={BookOpen} value={fmt(data.articles_count)} label="статей" />
-        <StatCard icon={Clock} value={fmt(data.total_reading_min)} label="мин чтения" />
-        <StatCard icon={Brain} value={fmt(data.tokens_out)} label="токенов" />
-        <StatCard icon={Eye} value={fmt(data.total_views)} label="просмотров" />
+        <StatCard icon={BookOpen} value={data.articles_count} label="статей" run={run} />
+        <StatCard icon={Clock} value={data.total_reading_min} label="мин чтения" run={run} />
+        <StatCard icon={Brain} value={data.tokens_out} label="токенов" run={run} />
+        <StatCard icon={Eye} value={data.total_views} label="просмотров" run={run} />
       </div>
     </section>
   );