Passa le animazioni a molle interrompibili

Il movimento era fatto con `@keyframes` e transizioni a durata fissa: nessuna
di quelle animazioni può essere afferrata a metà. Se l'utente scorre o tocca
mentre una è in corso, quella va avanti per conto suo e per ripartire deve
prima finire.

`lib/molla.ts` raccoglie i parametri, che sono i due di Apple in «Designing
Fluid Interfaces» — rimbalzo e durata, non massa/rigidità/smorzamento.
`molla.ui` (nessun sorpasso) è il default; `molla.slancio` si usa solo dopo un
gesto che portava già inerzia. `proietta()` calcola dove finirebbe un elemento
lanciato, con la stessa decelerazione esponenziale dello scroll iOS.

Nei tre componenti:
- `Reveal` compare quando entra davvero nel viewport. Prima partiva al mount,
  quindi gli elementi sotto la piega consumavano l'animazione a vuoto e
  l'utente li trovava già fermi. Il ritardo massimo scende da 480 a 200 ms.
- `Barra` anima `scaleX` invece di `width`: la larghezza rifà il layout a ogni
  frame, la trasformazione la gestisce il compositore.
- `Numero` usa una molla al posto dell'interpolazione a durata fissa: se il
  dato cambia a metà conteggio il numero cambia rotta da dov'è invece di
  ripartire da capo. Sparisce la prop `durata`, che nessuno passava.

`lib/motion.ts` resta solo per il rilevamento del movimento ridotto (che qui
guarda anche `deviceMemory`, cosa che `useReducedMotion` non fa) e per i
coriandoli.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/motion/Barra.tsx

@@ -1,7 +1,14 @@
+import { motion, useReducedMotion } from "motion/react";
 import { cn } from "@/lib/utils";
-import { useRiempimento } from "@/lib/motion";
+import { molla } from "@/lib/molla";
 
-/** Barra di avanzamento che si riempie in ~700 ms all'apertura. */
+/**
+ * Barra di avanzamento a molla.
+ *
+ * Anima `scaleX` e non `width`: la larghezza rifà il layout a ogni frame,
+ * la trasformazione la gestisce il compositore. La molla riparte dal valore
+ * a schermo, quindi se il dato cambia a metà riempimento non c'è scatto.
+ */
 export function Barra({
   percentuale,
   className,
@@ -13,12 +20,22 @@ export function Barra({
   trackClassName?: string;
   altezza?: string;
 }) {
-  const larghezza = useRiempimento(Math.max(0, Math.min(100, Math.round(percentuale))));
+  const ridotto = useReducedMotion();
+  const valore = Math.max(0, Math.min(100, Math.round(percentuale)));
+
   return (
-    <div className={cn("overflow-hidden rounded-full bg-secondary", altezza, trackClassName)}>
-      <div
-        className={cn("anim-barra h-full rounded-full bg-accent-grad", className)}
-        style={{ width: `${larghezza}%` }}
+    <div
+      className={cn("overflow-hidden rounded-full bg-secondary", altezza, trackClassName)}
+      role="progressbar"
+      aria-valuenow={valore}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <motion.div
+        className={cn("h-full w-full origin-left rounded-full bg-accent-grad", className)}
+        initial={{ scaleX: 0 }}
+        animate={{ scaleX: valore / 100 }}
+        transition={ridotto ? { duration: 0.2 } : molla.ui}
       />
     </div>
   );