feat(story): celular CC0 com site vivo na tela, ReelDirector scrub em todas as seções e filmstrip pinado de prints reais

app/components/About.tsx

@@ -91,7 +91,7 @@ export default function About() {
       description="Atuo na interseção entre arquitetura de software, integrações de sistemas, hardware + software e entrega full-stack para produtos que precisam funcionar com confiabilidade."
       disableChildrenAnimation
       aside={
-        <div className="mt-sp-4 ds-metric">
+        <div className="mt-sp-4 ds-metric" data-reel="left">
           <span className="inline-block h-1.5 w-1.5 rounded-full bg-slash" />
           Garuva, SC | Remote worldwide
         </div>
@@ -120,7 +120,9 @@ export default function About() {
               <div className="ds-kicker">{step.label}</div>
               <DrawLine delay={0.03} />
               <h3 className="ds-card-title">{step.title}</h3>
-              <p className="ds-copy">{step.content}</p>
+              <p className="ds-copy" data-reel="right">
+                {step.content}
+              </p>
             </motion.article>
           ))}
         </motion.div>
@@ -141,13 +143,13 @@ export default function About() {
           <div className="ds-kicker">Technical profile</div>
           <DrawLine delay={0.05} />
           <h3 className="ds-card-title">Base técnica e postura de entrega</h3>
-          <p className="ds-copy">
+          <p className="ds-copy" data-reel="top">
             Sou engenheiro da computação e desenvolvedor de software full-stack,
             atuando ha 5 anos com foco em integrar camadas que normalmente ficam
             separadas: hardware, servicos, operacao e interface. Meu trabalho e
             dar forma clara ao que costuma nascer fragmentado.
           </p>
-          <div className="mt-sp-6 space-y-sp-4">
+          <div className="mt-sp-6 space-y-sp-4" data-reel-stagger="bottom">
             {PROFILE_POINTS.map((point) => (
               <div
                 key={point.title}