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

app/components/WorkModalities.tsx

@@ -128,11 +128,11 @@ function TierCard({ tier }: Readonly<{ tier: Tier }>) {
         </p>
       </div>
 
-      <p className="ds-copy !mt-sp-4 !text-[13px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]">
+      <p className="ds-copy !mt-sp-4 !text-[13px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]" data-reel="right">
         {tier.description}
       </p>
 
-      <ul className="ds-list !mt-sp-5 !pl-[1.15rem] !text-[13px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]">
+      <ul className="ds-list !mt-sp-5 !pl-[1.15rem] !text-[13px] !leading-[1.75] [overflow-wrap:break-word] [word-break:normal] md:!text-[12px]" data-reel-stagger="fade">
         {tier.deliverables.map((deliverable) => (
           <li key={deliverable} className="pl-sp-1">
             {deliverable}
@@ -202,10 +202,10 @@ export function WorkModalities() {
         <div className="flex flex-col gap-sp-4 lg:flex-row lg:items-end lg:justify-between">
           <div className="max-w-[760px]">
             <div className="ds-kicker">Páginas de serviço</div>
-            <h3 className="ds-card-title !mt-sp-3">
+            <h3 className="ds-card-title !mt-sp-3" data-reel="left">
               Especialidades organizadas por intenção de busca
             </h3>
-            <p className="ds-copy !mt-sp-3 max-w-[62ch]">
+            <p className="ds-copy !mt-sp-3 max-w-[62ch]" data-reel="right">
               Se você chegou buscando uma stack, um tipo de consultoria ou um
               contexto técnico específico, aqui está o caminho mais direto para
               a página certa.
@@ -221,7 +221,7 @@ export function WorkModalities() {
           </MagneticButton>
         </div>
 
-        <div className="mt-sp-6 grid gap-sp-3 md:grid-cols-2 xl:grid-cols-3">
+        <div className="mt-sp-6 grid gap-sp-3 md:grid-cols-2 xl:grid-cols-3" data-reel-stagger="left">
           {serviceHubLinks.map((service) => (
             <Link
               key={service.href}