feat: animazioni stile template prowess (reveal, parallax, marquee, hero, hover)

src/components/home/MethodSteps.astro

@@ -7,14 +7,14 @@ const imgOf = (name: string) => Object.entries(images).find(([p]) => p.includes(
 ---
 <section class="section section--alt">
   <div class="container">
-    <div class="section-heading">
+    <div class="section-heading" data-reveal>
       <h2>Il metodo<br />InsanityLab</h2>
       <p set:html={methodIntro.replace('Metodo Insanitylab', '<strong>Metodo Insanitylab</strong>')} />
     </div>
     <p class="method__note">{methodExtraNote}</p>
     <div class="method__row">
-      {methodSteps.map((s) => (
-        <div class:list={['method__step', { 'method__step--extra': s.extra }]}>
+      {methodSteps.map((s, i) => (
+        <div class:list={['method__step', { 'method__step--extra': s.extra }]} data-reveal style={`--reveal-delay:${(i * 0.15).toFixed(2)}s`}>
           <div class="method__circle">
             {imgOf(s.image) && <Image src={imgOf(s.image)!} alt="" widths={[220]} sizes="220px" />}
             <span>{s.n}</span>