feat(render+templates): Remotion engine, 16 branded templates (incl. 3D), seconds pricing, coming-soon

Render engine
- Add Remotion (code-based) as a 2nd render engine alongside After Effects.
  node-agent dispatches on Job.Engine; RunRemotion maps bindings -> --props,
  renders native then ffmpeg-scales to the quality tier (aspect-preserving).
- content.projects.render_engine + render_remotion_comp (migration 32);
  render-svc claim resolves engine and routes (skips .aep for Remotion).
- Admin TemplatesAdmin gains an engine picker + Remotion composition id field.

Template pack (services/remotion)
- 16 branded, Persian (Vazirmatn), color- and text-editable templates, each in
  3 aspects (16:9 / 1:1 / 9:16): LogoMotion, Opener, InstaPromo, YouTubeIntro,
  Slideshow, HappyBirthday, SalePromo, QuoteCard, EventInvite, Countdown,
  GlitterReveal (editable logo image), NowruzGreeting (animated characters),
  and 4 cinematic 3D templates via @remotion/three (Hero3D, Nowruz3D,
  Birthday3D, Promo3D) with reflections + bloom/DOF/vignette.
- scripts/seed_remotion_templates.py seeds containers/projects/scenes/colors.

Pricing
- Rewrite /pricing to the seconds-based model (charge = length x resolution),
  data-driven from /v1/plans, Toman, broker checkout.

Coming-soon
- Persian experimental-build overlay on all pages (launch date + countdown).

Fixes
- middleware matcher bypasses all static asset paths; catalog mapping passes
  cover image + preview video so real thumbnails render.

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

services/remotion/src/compositions/Countdown.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { z } from "zod";
+import { colorSchema } from "../lib/branding";
+import { FONT } from "../lib/fonts";
+import { useLayout } from "../lib/aspect";
+import { BrandBackground, useReveal } from "../lib/kit";
+import { hexToRgba } from "../lib/anim";
+
+export const countdownSchema = z.object({
+  title: z.string(),
+  // coerce so a string binding ("5") from the studio still validates as a number
+  startNumber: z.coerce.number().int().min(1).max(9),
+  goText: z.string(),
+  subtitle: z.string(),
+  ...colorSchema,
+});
+
+type Props = z.infer<typeof countdownSchema>;
+
+export const Countdown: React.FC<Props> = ({
+  title,
+  startNumber,
+  goText,
+  subtitle,
+  accentColor,
+  secondaryColor,
+  backgroundColor,
+  textColor,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const L = useLayout();
+
+  const titleR = useReveal(6, { from: 24 });
+
+  // Count down one number per second after a short intro.
+  const introF = Math.round(fps * 1.2);
+  const elapsed = Math.max(0, frame - introF);
+  const sec = Math.floor(elapsed / fps);
+  const current = startNumber - sec; // >0 → number, <=0 → GO
+  const localInSec = (elapsed % fps) / fps;
+
+  // Each tick pops in and fades/scales out.
+  const pop = spring({ frame: (elapsed % fps), fps, config: { damping: 12, stiffness: 130, mass: 0.7 } });
+  const scaleIn = interpolate(pop, [0, 1], [0.4, 1]);
+  const scaleOut = interpolate(localInSec, [0.7, 1], [1, 1.4], { extrapolateLeft: "clamp" });
+  const fadeOut = interpolate(localInSec, [0.75, 1], [1, 0], { extrapolateLeft: "clamp" });
+
+  const isGo = current <= 0;
+  const ringProgress = 1 - localInSec;
+  const ringR = L.vmin(220);
+  const circ = 2 * Math.PI * ringR;
+
+  const sub = useReveal(introF + 4, { from: 24 });
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, direction: "rtl" }}>
+      <BrandBackground bg={backgroundColor} accent={accentColor} secondary={secondaryColor} particles={18} />
+
+      <div style={{ position: "absolute", top: L.vmin(120), left: 0, right: 0, textAlign: "center", opacity: titleR.opacity, transform: `translateY(${titleR.y}px)`, fontWeight: 800, fontSize: L.vmin(44), color: hexToRgba(textColor, 0.9) }}>
+        {title}
+      </div>
+
+      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
+        {/* Progress ring */}
+        {!isGo && (
+          <svg width={ringR * 2.4} height={ringR * 2.4} viewBox={`${-ringR * 1.2} ${-ringR * 1.2} ${ringR * 2.4} ${ringR * 2.4}`} style={{ position: "absolute" }}>
+            <circle cx={0} cy={0} r={ringR} fill="none" stroke={hexToRgba(textColor, 0.12)} strokeWidth={L.vmin(6)} />
+            <circle cx={0} cy={0} r={ringR} fill="none" stroke={accentColor} strokeWidth={L.vmin(6)} strokeLinecap="round" strokeDasharray={`${circ * ringProgress} ${circ}`} transform="rotate(-90)" style={{ filter: `drop-shadow(0 0 ${L.vmin(8)}px ${accentColor})` }} />
+          </svg>
+        )}
+
+        <div style={{ transform: `scale(${isGo ? scaleIn : scaleIn * scaleOut})`, opacity: isGo ? 1 : fadeOut, fontWeight: 900, fontSize: isGo ? L.vmin(150) : L.vmin(260), lineHeight: 1, backgroundImage: `linear-gradient(135deg, ${accentColor}, ${secondaryColor})`, WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent", filter: `drop-shadow(0 0 ${L.vmin(30)}px ${hexToRgba(accentColor, 0.6)})` }}>
+          {isGo ? goText : current}
+        </div>
+      </AbsoluteFill>
+
+      <div style={{ position: "absolute", bottom: L.vmin(140), left: 0, right: 0, textAlign: "center", opacity: sub.opacity, transform: `translateY(${sub.y}px)`, fontWeight: 500, fontSize: L.vmin(30), color: hexToRgba(textColor, 0.78) }}>
+        {subtitle}
+      </div>
+    </AbsoluteFill>
+  );
+};