phase-7: motion, an installable app, and a capture that survives no signal

GSAP carries the counter roll-ups, the bandeja card physics, the dialog
transitions and the three success moments FLOWS.md allows. Every one of
them checks prefers-reduced-motion first and does nothing when it is set.

boneyard and canvas-ui are not what SPEC.md's stack table says they are:
on npm the names belong to two abandoned projects that do neither job.
The skeletons were already ours; the two canvas spots are now sixty lines
each with no dependency. DECISIONS.md records the substitution.

The app installs, keeps a scan taken with no network in IndexedDB and
sends it when there is one, falls back to a page that explains itself,
and can push a deadline notice. Reading the log of what is queued is the
source of truth, so the notice clears when the capture actually lands.

The CSP now allows scripts by per-request nonce rather than by
'unsafe-inline'. That forced /offline to render per request: a
prerendered page carries a build-time nonce no live policy matches, so
its scripts were blocked and it never hydrated.

Two crashes fixed on the way. web-push throws on a VAPID subject that is
not https: or mailto:, and the code handed it APP_PUBLIC_URL, so any
machine with push keys died at boot; a misconfigured optional channel now
switches itself off and says why. And a subscription the push service
answers 410 for is deleted rather than retried forever.

Lighthouse on the production build: accessibility 100, best practices 96,
SEO 100, performance 73. The performance number is not trustworthy on
this machine and DECISIONS.md says why; total blocking time did fall from
17.6s to 1.7s once the hero canvas stopped drawing at full resolution
every frame and the landing page stopped importing GSAP.

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

apps/web/app/[locale]/(app)/declaraciones/[id]/declaration-detail.tsx

@@ -4,9 +4,11 @@ import { isApiError, type DeclarationDto } from '@impuestos/contracts';
 import { formatDateLong, formatGs, formatGsAmount, type Locale } from '@impuestos/i18n';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useRef, useState } from 'react';
+import { ConfettiMoment } from '@/components/confetti-moment';
 import { FormPreview } from '@/components/form-preview';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
+import { Reveal } from '@/components/ui/reveal';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useT } from '@/i18n/t';
 import { api } from '@/lib/api';
@@ -22,6 +24,7 @@ export function DeclarationDetail({ id, locale }: { id: string; locale: string }
   const queryClient = useQueryClient();
   const confirmDialog = useRef<HTMLDialogElement>(null);
   const [staleWarning, setStaleWarning] = useState<string | null>(null);
+  const [celebrating, setCelebrating] = useState(false);
 
   const declaration = useQuery({
     queryKey: ['declarations', id],
@@ -32,6 +35,8 @@ export function DeclarationDetail({ id, locale }: { id: string; locale: string }
   const approve = useMutation({
     mutationFn: () => api.approveDeclaration(id),
     onSuccess: async () => {
+      // One of the three moments FLOWS.md section 8 allows a celebration.
+      setCelebrating(true);
       setStaleWarning(null);
       confirmDialog.current?.close();
       await queryClient.invalidateQueries({ queryKey: ['declarations'] });
@@ -75,7 +80,9 @@ export function DeclarationDetail({ id, locale }: { id: string; locale: string }
   const officialTitle = `Formulario ${data.formCode}`;
 
   return (
-    <div className="space-y-4 py-4 pb-28">
+    <Reveal className="space-y-4 py-4 pb-28">
+      <ConfettiMoment play={celebrating} />
+
       <div>
         <h1 className="text-2xl font-semibold tracking-tight">{officialTitle}</h1>
         <p className="tnum text-sm text-[var(--text-muted)]">{data.period}</p>
@@ -172,7 +179,7 @@ export function DeclarationDetail({ id, locale }: { id: string; locale: string }
           {t('decl.approvedAt', { date: formatDateLong(locale as Locale, data.approvedAt.slice(0, 10)) })}
         </p>
       ) : null}
-    </div>
+    </Reveal>
   );
 }
 

apps/web/app/[locale]/(app)/declaraciones/[id]/filing-checklist.tsx

@@ -5,6 +5,7 @@ import { formatDateLong, formatGs, type Locale } from '@impuestos/i18n';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
+import { CelebrationCanvas } from '@/components/canvas/celebration-canvas';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { useT } from '@/i18n/t';
@@ -46,8 +47,10 @@ export function FilingChecklist({
 
   if (filed) {
     return (
-      <Card className="space-y-2">
-        {/* A short celebration belongs here (FLOWS.md D3); the motion pass is phase 7. */}
+      <Card className="relative isolate space-y-2 overflow-hidden">
+        {/* The second and last canvas spot (FLOWS.md D3), only in the moment it happens:
+            a reload of an already filed declaration is not a new success. */}
+        {markFiled.isSuccess ? <CelebrationCanvas /> : null}
         <h2 className="text-xl font-semibold tracking-tight text-positive">
           {t('decl.filed.title')}
         </h2>