v0.2.27 - rework campaigns page, add tactical card styling and glitch effects

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polaris-task-force",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "Web app for the Arma 3 unit Polaris Task Force. Uses Next.js for client- and server-side rendering, with a Postgres database and some other neat libraries.",
   "license": "MIT",
   "type": "module",

src/app/(frontend)/intelligence/campaigns/page.tsx

@@ -23,6 +23,7 @@ export default async function CampaignsPage() {
       name: true,
       summary: true,
       status: true,
+      campaignMode: true,
       startDate: true,
       endDate: true,
       owner: true,
@@ -56,6 +57,9 @@ export default async function CampaignsPage() {
       });
 
       const missionCount = missionsRes.docs.length;
+      const completedMissions = missionsRes.docs.filter(
+        (mission) => mission.ownershipAndStatus.status === "Completed",
+      ).length;
       const totalPlayers = missionsRes.docs.reduce(
         (total, mission) => total + mission.missionRoles.maxPlayers,
         0,
@@ -81,6 +85,7 @@ export default async function CampaignsPage() {
         ...campaign,
         coverImageUrl,
         missionCount,
+        completedMissions,
         avgPlayers: missionCount === 0 ? 0 : totalPlayers / missionCount,
         avgDurationMinutes: missionCount === 0 ? 0 : totalDurationMinutes / missionCount,
         ownerName,
@@ -88,8 +93,15 @@ export default async function CampaignsPage() {
     }),
   );
 
+  const officialCampaigns = campaignsWithStats.filter(
+    (campaign) => campaign.campaignMode === "official",
+  );
+  const communityCampaigns = campaignsWithStats.filter(
+    (campaign) => campaign.campaignMode !== "official",
+  );
+
   return (
-    <div className="p-5 flex flex-col gap-6">
+    <div className="p-5 flex flex-col gap-8">
       <div className="flex flex-row justify-between gap-2">
         <div className="flex flex-col gap-1">
           <div className="flex items-center gap-2">
@@ -106,12 +118,46 @@ export default async function CampaignsPage() {
           <CreateCampaignDialog />
         </div>
       </div>
-      {sorted.length > 0 ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-          {campaignsWithStats.map((campaign) => (
-            <CampaignCard key={campaign.id} campaign={campaign} />
-          ))}
-        </div>
+      {campaignsWithStats.length > 0 ? (
+        <>
+          {officialCampaigns.length > 0 && (
+            <section className="flex flex-col items-center gap-4">
+              <div className="flex flex-col items-center gap-1 text-center">
+                <h2 className="text-xl font-semibold uppercase tracking-wider text-white">
+                  Official Campaigns
+                </h2>
+                <p className="text-sm text-muted-foreground">
+                  Command-sanctioned operations at the heart of the unit&apos;s story.
+                </p>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-6xl mx-auto">
+                {officialCampaigns.map((campaign) => (
+                  <CampaignCard key={campaign.id} campaign={campaign} size="lg" />
+                ))}
+              </div>
+            </section>
+          )}
+          {officialCampaigns.length > 0 && communityCampaigns.length > 0 && (
+            <hr className="w-48 mx-auto border-border/60" />
+          )}
+          {communityCampaigns.length > 0 && (
+            <section className="flex flex-col items-center gap-4">
+              <div className="flex flex-col items-center gap-1 text-center">
+                <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+                  Community Campaigns
+                </h2>
+                <p className="text-xs text-muted-foreground">
+                  Player-made side operations and stories, open to everyone.
+                </p>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 w-full max-w-6xl mx-auto">
+                {communityCampaigns.map((campaign) => (
+                  <CampaignCard key={campaign.id} campaign={campaign} size="sm" />
+                ))}
+              </div>
+            </section>
+          )}
+        </>
       ) : (
         <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
           <p className="text-sm">No campaigns found.</p>

src/app/(frontend)/styles.css

@@ -841,3 +841,292 @@
 .wiki-markdown .hljs-strong {
   font-weight: 600;
 }
+
+/* Glitch hover effect for official campaign card titles: fires once (~1s) on hover, then reverts. */
+.glitch-hover {
+  position: relative;
+}
+
+.glitch-ghost {
+  position: absolute;
+  inset: 0;
+  text-wrap: balance;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.glitch-shard-a {
+  color: #22d3ee;
+}
+
+.glitch-shard-b {
+  color: #f43f5e;
+}
+
+.glitch-shard-c {
+  color: #ffffff;
+}
+
+.group:hover .glitch-hover {
+  animation: glitch-jitter 1s ease-out 1;
+}
+
+.group:hover .glitch-shard-a {
+  animation: glitch-shard-a 1s ease-out 1;
+}
+
+.group:hover .glitch-shard-b {
+  animation: glitch-shard-b 1s ease-out 1;
+}
+
+.group:hover .glitch-shard-c {
+  animation: glitch-shard-c 1s ease-out 1;
+}
+
+@keyframes glitch-jitter {
+  0% {
+    transform: translate(3px, -2px) skewX(2deg);
+    text-shadow:
+      -4px 0 rgba(34, 211, 238, 0.7),
+      4px 0 rgba(244, 63, 94, 0.7);
+    animation-timing-function: steps(1, end);
+  }
+  5% {
+    transform: translate(-3px, 2px) skewX(-2deg);
+    text-shadow:
+      3px 0 rgba(34, 211, 238, 0.7),
+      -3px 0 rgba(244, 63, 94, 0.7);
+    animation-timing-function: steps(1, end);
+  }
+  10% {
+    transform: translate(2px, -1px) skewX(1deg);
+    text-shadow:
+      -2px 0 rgba(34, 211, 238, 0.6),
+      2px 0 rgba(244, 63, 94, 0.6);
+    animation-timing-function: steps(1, end);
+  }
+  15% {
+    transform: translate(-1px, 1px);
+    text-shadow:
+      1px 0 rgba(34, 211, 238, 0.5),
+      -1px 0 rgba(244, 63, 94, 0.5);
+    animation-timing-function: ease-out;
+  }
+  25% {
+    transform: translate(0, 0) skewX(0deg);
+    text-shadow: none;
+  }
+  100% {
+    transform: translate(0, 0) skewX(0deg);
+    text-shadow: none;
+  }
+}
+
+@keyframes glitch-shard-a {
+  0% {
+    opacity: 0.9;
+    clip-path: polygon(0 0, 62% 0, 54% 34%, 0 34%);
+    transform: translate(-8px, -4px);
+    animation-timing-function: steps(1, end);
+  }
+  8% {
+    clip-path: polygon(6% 4%, 68% 0, 58% 38%, 0 30%);
+    transform: translate(8px, 4px);
+    animation-timing-function: steps(1, end);
+  }
+  16% {
+    opacity: 0.35;
+    clip-path: polygon(0 0, 50% 6%, 44% 30%, 0 38%);
+    transform: translate(-3px, -2px);
+    animation-timing-function: ease-out;
+  }
+  35% {
+    opacity: 0;
+    clip-path: polygon(0 0, 62% 0, 54% 34%, 0 34%);
+    transform: translate(-5px, -3px);
+  }
+  100% {
+    opacity: 0;
+    clip-path: polygon(0 0, 62% 0, 54% 34%, 0 34%);
+    transform: translate(-5px, -3px);
+  }
+}
+
+@keyframes glitch-shard-b {
+  0% {
+    opacity: 0.9;
+    clip-path: polygon(38% 66%, 100% 58%, 100% 100%, 30% 100%);
+    transform: translate(8px, 4px);
+    animation-timing-function: steps(1, end);
+  }
+  8% {
+    clip-path: polygon(32% 62%, 100% 66%, 100% 100%, 24% 96%);
+    transform: translate(-8px, -4px);
+    animation-timing-function: steps(1, end);
+  }
+  16% {
+    opacity: 0.35;
+    clip-path: polygon(50% 70%, 100% 62%, 100% 100%, 44% 100%);
+    transform: translate(3px, 2px);
+    animation-timing-function: ease-out;
+  }
+  35% {
+    opacity: 0;
+    clip-path: polygon(38% 66%, 100% 58%, 100% 100%, 30% 100%);
+    transform: translate(5px, 3px);
+  }
+  100% {
+    opacity: 0;
+    clip-path: polygon(38% 66%, 100% 58%, 100% 100%, 30% 100%);
+    transform: translate(5px, 3px);
+  }
+}
+
+@keyframes glitch-shard-c {
+  0% {
+    opacity: 0.95;
+    clip-path: polygon(8% 42%, 96% 38%, 88% 62%, 0 66%);
+    transform: translate(6px, -4px);
+    animation-timing-function: steps(1, end);
+  }
+  6% {
+    transform: translate(-6px, 4px);
+    animation-timing-function: steps(1, end);
+  }
+  12% {
+    clip-path: polygon(0 46%, 88% 40%, 96% 58%, 4% 62%);
+    transform: translate(4px, 2px);
+    animation-timing-function: steps(1, end);
+  }
+  20% {
+    transform: translate(-2px, -1px);
+    animation-timing-function: ease-out;
+  }
+  35% {
+    opacity: 0;
+    clip-path: polygon(8% 42%, 96% 38%, 88% 62%, 0 66%);
+    transform: translate(1px, 2px);
+  }
+  100% {
+    opacity: 0;
+    clip-path: polygon(8% 42%, 96% 38%, 88% 62%, 0 66%);
+    transform: translate(1px, 2px);
+  }
+}
+
+.group:hover .glitch-soft {
+  animation: glitch-soft 1s ease-out 1;
+}
+
+.group:hover .glitch-soft-late {
+  animation-delay: 0.1s;
+}
+
+@keyframes glitch-soft {
+  0% {
+    transform: translate(1px, -1px);
+    text-shadow:
+      1px 0 rgba(34, 211, 238, 0.45),
+      -1px 0 rgba(244, 63, 94, 0.45);
+    animation-timing-function: steps(1, end);
+  }
+  8% {
+    transform: translate(-1px, 1px);
+    text-shadow:
+      -1px 0 rgba(34, 211, 238, 0.45),
+      1px 0 rgba(244, 63, 94, 0.45);
+    animation-timing-function: steps(1, end);
+  }
+  16% {
+    transform: translate(1px, 1px);
+    animation-timing-function: ease-out;
+  }
+  30% {
+    transform: translate(0, 0);
+    text-shadow: none;
+  }
+  100% {
+    transform: translate(0, 0);
+    text-shadow: none;
+  }
+}
+
+.glitch-ghost-img {
+  opacity: 0;
+}
+
+.group:hover .glitch-ghost-img-a {
+  animation: glitch-img-band-a 2s ease-out 1;
+}
+
+.group:hover .glitch-ghost-img-b {
+  animation: glitch-img-band-b 2s ease-out 1;
+}
+
+@keyframes glitch-img-band-a {
+  0% {
+    opacity: 0.45;
+    clip-path: inset(0 0 55% 0);
+    transform: translate(-4px, 0);
+    animation-timing-function: steps(1, end);
+  }
+  6% {
+    clip-path: inset(5% 0 60% 0);
+    transform: translate(4px, 2px);
+    animation-timing-function: steps(1, end);
+  }
+  12% {
+    opacity: 0.35;
+    clip-path: inset(10% 0 62% 0);
+    transform: translate(-2px, 0);
+  }
+  100% {
+    opacity: 0;
+    clip-path: inset(0 0 55% 0);
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes glitch-img-band-b {
+  0% {
+    opacity: 0.45;
+    clip-path: inset(45% 0 0 0);
+    transform: translate(4px, 0);
+    animation-timing-function: steps(1, end);
+  }
+  6% {
+    clip-path: inset(40% 0 5% 0);
+    transform: translate(-4px, -2px);
+    animation-timing-function: steps(1, end);
+  }
+  12% {
+    opacity: 0.35;
+    clip-path: inset(38% 0 10% 0);
+    transform: translate(2px, 0);
+  }
+  100% {
+    opacity: 0;
+    clip-path: inset(45% 0 0 0);
+    transform: translate(0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .group:hover .glitch-hover {
+    animation: none;
+  }
+
+  .group:hover .glitch-ghost {
+    animation: none;
+    opacity: 0;
+  }
+
+  .group:hover .glitch-soft {
+    animation: none;
+  }
+
+  .group:hover .glitch-ghost-img {
+    animation: none;
+    opacity: 0;
+  }
+}

src/components/frontend/intelligence/CampaignCard.tsx

@@ -11,6 +11,7 @@ interface CampaignCardCampaign extends Pick<
 > {
   readonly coverImageUrl: string | null;
   readonly missionCount: number;
+  readonly completedMissions: number;
   readonly avgPlayers: number;
   readonly avgDurationMinutes: number;
 }
@@ -19,6 +20,7 @@ type CampaignCardInput = CampaignCardCampaign | Campaign;
 
 interface CampaignCardProps {
   readonly campaign: CampaignCardInput;
+  readonly size?: "lg" | "sm";
 }
 
 const statusColors: Record<Campaign["status"], string> = {
@@ -33,7 +35,20 @@ const statusLabels: Record<Campaign["status"], string> = {
   completed: "Completed",
 };
 
-export function CampaignCard({ campaign }: CampaignCardProps) {
+const officialStatusLabels: Record<Campaign["status"], string> = {
+  concept: "Planning",
+  inProgress: "Active Deployment",
+  completed: "Concluded",
+};
+
+const statusTextColors: Record<Campaign["status"], string> = {
+  concept: "text-muted-foreground",
+  inProgress: "text-blue-400",
+  completed: "text-emerald-400",
+};
+
+export function CampaignCard({ campaign, size = "lg" }: CampaignCardProps) {
+  const isSmall = size === "sm";
   const coverImageUrl =
     "coverImageUrl" in campaign
       ? campaign.coverImageUrl
@@ -41,6 +56,8 @@ export function CampaignCard({ campaign }: CampaignCardProps) {
         ? (campaign.coverImage.url ?? null)
         : null;
   const missionCount = "missionCount" in campaign ? campaign.missionCount : 0;
+  const completedMissions =
+    "completedMissions" in campaign ? campaign.completedMissions : 0;
   const avgPlayers = "avgPlayers" in campaign ? campaign.avgPlayers : 0;
   const avgDurationMinutes = "avgDurationMinutes" in campaign ? campaign.avgDurationMinutes : 0;
 
@@ -57,21 +74,56 @@ export function CampaignCard({ campaign }: CampaignCardProps) {
       ? owner.displayName
       : "Unknown";
 
+  const refCode = String(campaign.id).padStart(3, "0");
+  const statusLabel = isSmall ? statusLabels[campaign.status] : officialStatusLabels[campaign.status];
+  const readoutCells = [
+    { label: "Msns", value: missionCount.toString(), mono: true },
+    { label: "Done", value: completedMissions.toString(), mono: true },
+    { label: "Avg Squad", value: playersLabel, mono: true },
+    { label: "Duration", value: durationLabel, mono: true },
+  ];
+
   return (
     <Link
       href={`/intelligence/campaigns/${campaign.id}`}
       aria-label={`Open campaign ${campaign.name}`}
       className="block rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
     >
-      <article className="group relative aspect-[4/3] overflow-hidden rounded-lg border border-border/70 bg-card transition-colors duration-300 group-hover:border-foreground/30">
+      <article
+        className={cn(
+          "group relative overflow-hidden border border-border/70 bg-card transition-colors duration-300 group-hover:border-foreground/30",
+          isSmall ? "aspect-[16/9] rounded-lg" : "aspect-[4/3] rounded-none",
+        )}
+      >
         <div className="absolute inset-0 scale-100 transition-transform duration-500 ease-out group-hover:scale-110 motion-reduce:transition-none motion-reduce:group-hover:scale-100">
           {coverImageUrl !== null ? (
-            <img
-              src={coverImageUrl}
-              alt=""
-              aria-hidden="true"
-              className="absolute inset-0 size-full object-cover opacity-30 transition-opacity duration-500 ease-out group-hover:opacity-50 motion-reduce:transition-none"
-            />
+            <>
+              <img
+                src={coverImageUrl}
+                alt=""
+                aria-hidden="true"
+                className={cn(
+                  "absolute inset-0 size-full object-cover transition-opacity duration-500 ease-out motion-reduce:transition-none",
+                  isSmall ? "opacity-30 group-hover:opacity-50" : "opacity-15 group-hover:opacity-25",
+                )}
+              />
+              {!isSmall && (
+                <>
+                  <img
+                    src={coverImageUrl}
+                    alt=""
+                    aria-hidden="true"
+                    className="glitch-ghost-img glitch-ghost-img-a absolute inset-0 size-full object-cover"
+                  />
+                  <img
+                    src={coverImageUrl}
+                    alt=""
+                    aria-hidden="true"
+                    className="glitch-ghost-img glitch-ghost-img-b absolute inset-0 size-full object-cover"
+                  />
+                </>
+              )}
+            </>
           ) : (
             <div
               aria-hidden="true"
@@ -82,52 +134,159 @@ export function CampaignCard({ campaign }: CampaignCardProps) {
 
         <div
           aria-hidden="true"
-          className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"
+          className={cn(
+            "absolute inset-0 bg-gradient-to-t",
+            isSmall ? "from-black/80 via-black/40 to-transparent" : "from-black/85 via-black/60 to-black/25",
+          )}
         />
 
-        <span
+        {!isSmall && (
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 z-[5] opacity-[0.04] transition-opacity duration-500 group-hover:opacity-[0.07] motion-reduce:transition-none"
+            style={{
+              backgroundImage:
+                "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
+              backgroundSize: "28px 28px",
+            }}
+          />
+        )}
+
+        {isSmall && (
+          <span
+            className={cn(
+              "absolute right-3 top-3 z-10 rounded-full px-2 py-1 text-[10px] font-semibold uppercase tracking-wider",
+              statusColors[campaign.status],
+            )}
+          >
+            {statusLabel}
+          </span>
+        )}
+
+        {!isSmall && (
+          <div
+            aria-hidden="true"
+            className="absolute inset-x-0 top-0 z-20 flex items-center justify-between border-b border-white/15 bg-black/50 px-3 py-1.5 backdrop-blur-sm"
+          >
+            <span className="font-mono text-[9px] uppercase tracking-widest text-white/60">
+              Official // Unit Command
+            </span>
+            <span className="font-mono text-[9px] uppercase tracking-widest text-white/60">
+              REF {refCode}
+            </span>
+          </div>
+        )}
+
+        {!isSmall && (
+          <div aria-hidden="true" className="pointer-events-none absolute inset-2 z-30">
+            <span className="absolute left-0 top-0 size-3 border-l border-t border-white/25 transition-colors duration-300 group-hover:border-white/60" />
+            <span className="absolute right-0 top-0 size-3 border-r border-t border-white/25 transition-colors duration-300 group-hover:border-white/60" />
+            <span className="absolute bottom-0 left-0 size-3 border-b border-l border-white/25 transition-colors duration-300 group-hover:border-white/60" />
+            <span className="absolute bottom-0 right-0 size-3 border-b border-r border-white/25 transition-colors duration-300 group-hover:border-white/60" />
+          </div>
+        )}
+
+        <div
           className={cn(
-            "absolute right-3 top-3 z-10 rounded-full px-2 py-1 text-[10px] font-semibold uppercase tracking-wider",
-            statusColors[campaign.status],
+            "absolute inset-0 z-10 flex items-center justify-center text-center",
+            isSmall ? "px-12 pb-6 pt-8" : "px-10",
           )}
         >
-          {statusLabels[campaign.status]}
-        </span>
-
-        <div className="absolute inset-0 z-10 flex items-center justify-center px-6 pb-6 text-center">
           <div className="flex max-w-full flex-col items-center gap-2">
-            <h2 className="text-balance text-center text-xl font-bold text-white drop-shadow-lg">
+            <h2
+              data-text={campaign.name}
+              className={cn(
+                "text-balance text-center font-bold text-white drop-shadow-lg",
+                isSmall ? "text-lg" : "glitch-hover text-xl",
+              )}
+            >
               {campaign.name}
+              {!isSmall && (
+                <>
+                  <span aria-hidden="true" className="glitch-ghost glitch-shard-a">
+                    {campaign.name}
+                  </span>
+                  <span aria-hidden="true" className="glitch-ghost glitch-shard-b">
+                    {campaign.name}
+                  </span>
+                  <span aria-hidden="true" className="glitch-ghost glitch-shard-c">
+                    {campaign.name}
+                  </span>
+                </>
+              )}
             </h2>
-            <p className="text-sm uppercase tracking-wider text-white/70 drop-shadow">
-              {statusLabels[campaign.status]}
-            </p>
+            {campaign.summary && (
+              <p
+                className={cn(
+                  "line-clamp-2 max-w-prose text-pretty text-white/70 drop-shadow",
+                  isSmall ? "text-xs" : "glitch-soft text-sm",
+                )}
+              >
+                {campaign.summary}
+              </p>
+            )}
+            {!isSmall && (
+              <p
+                className={cn(
+                  "glitch-soft glitch-soft-late uppercase tracking-wider drop-shadow",
+                  statusTextColors[campaign.status],
+                )}
+              >
+                {officialStatusLabels[campaign.status]}
+              </p>
+            )}
           </div>
         </div>
 
-        <footer className="absolute inset-x-0 bottom-0 z-20 flex translate-y-4 items-center bg-black/60 px-2 py-2.5 opacity-0 backdrop-blur-sm transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 motion-reduce:transition-none">
-          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 border-r border-white/15 text-xs text-white/80">
-            <CrosshairIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
-            <span className="sr-only">Missions</span>
-            <span className="truncate">{missionCount}</span>
-          </div>
-          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 border-r border-white/15 text-xs text-white/80">
-            <UsersIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
-            <span className="sr-only">Avg players</span>
-            <span className="truncate">{playersLabel}</span>
-          </div>
-          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 text-xs text-white/80">
-            <ClockIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
-            <span className="sr-only">Avg duration</span>
-             <span className="truncate">{durationLabel}</span>
-          </div>
-          <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 text-xs text-white/80">
-            <div className="text-right">
-              <div className="truncate">{ownerName}</div>
-              <span className="text-[10px] uppercase tracking-wider text-white/60">Owner</span>
+        {isSmall ? (
+          <footer className="absolute inset-x-0 bottom-0 z-20 flex translate-y-4 items-center bg-black/60 px-2 py-2.5 opacity-0 backdrop-blur-sm transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 motion-reduce:transition-none">
+            <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 border-r border-white/15 text-xs text-white/80">
+              <CrosshairIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
+              <span className="sr-only">Missions</span>
+              <span className="truncate">{missionCount}</span>
             </div>
-          </div>
-        </footer>
+            <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 border-r border-white/15 text-xs text-white/80">
+              <UsersIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
+              <span className="sr-only">Avg players</span>
+              <span className="truncate">{playersLabel}</span>
+            </div>
+            <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 text-xs text-white/80">
+              <ClockIcon aria-hidden="true" className="size-3.5 shrink-0 text-white/60" />
+              <span className="sr-only">Avg duration</span>
+              <span className="truncate">{durationLabel}</span>
+            </div>
+            <div className="flex min-w-0 flex-1 items-center justify-center gap-1.5 text-xs text-white/80">
+              <div className="text-right">
+                <div className="truncate">{ownerName}</div>
+                <span className="text-[10px] uppercase tracking-wider text-white/60">Owner</span>
+              </div>
+            </div>
+          </footer>
+        ) : (
+          <footer className="absolute inset-x-0 bottom-0 z-20 flex items-stretch border-t border-white/15 bg-black/60 px-2 py-1.5 backdrop-blur-sm">
+            {readoutCells.map((cell, index) => (
+              <div
+                key={cell.label}
+                className={cn(
+                  "flex min-w-0 flex-1 items-center justify-center gap-1.5 px-1",
+                  index < readoutCells.length - 1 && "border-r border-white/15",
+                )}
+              >
+                <span
+                  className={cn(
+                    "truncate text-xs text-white/80",
+                    cell.mono && "font-mono tabular-nums",
+                  )}
+                >
+                  {cell.value}
+                </span>
+                <span className="shrink-0 text-[9px] uppercase tracking-wider text-white/50">
+                  {cell.label}
+                </span>
+              </div>
+            ))}
+          </footer>
+        )}
       </article>
     </Link>
   );