Pages move the way their addresses do; a record with a picture is a card; the trainer says who a business is

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt

style/main.css

@@ -1269,6 +1269,62 @@ textarea:focus {
   color: var(--accent);
 }
 
+/* A read-only list whose records carry a picture: shown, not read. */
+.answer-cards {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
+  align-items: start;
+}
+
+.answer-card {
+  padding: 0;
+  overflow: hidden;
+  gap: 0;
+}
+
+.answer-picture {
+  display: block;
+  width: 100%;
+  aspect-ratio: 4 / 5;
+  object-fit: cover;
+  background: var(--line);
+}
+
+.answer-card-text {
+  padding: 0.9rem 1.1rem 1.1rem;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.answer-card-heading {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.answer-card-text p {
+  margin: 0;
+  font-size: 0.92rem;
+  color: var(--ink-dim);
+  white-space: pre-line;
+}
+
+.answer-card-text p:first-of-type {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.answer-card .answer-link {
+  margin: 0 1.1rem 1.1rem;
+}
+
+/* A picture on a desk's record: small, and it opens. */
+.answer-thumb {
+  display: block;
+  max-width: 8rem;
+  max-height: 8rem;
+  border-radius: 0.4rem;
+  object-fit: cover;
+}
+
 /* A stored file on a record: its name, and it opens. */
 .answer-file {
   color: var(--accent);
@@ -1520,3 +1576,67 @@ textarea:focus {
 .resource-loading {
   min-height: 1.4em;
 }
+
+/* Pages move the way their addresses do (public/page-motion.js):
+   deeper comes in from the right, back up from the left, a page at the
+   same depth from below or above. The cards leave and arrive as
+   islands of their own, one after another. Transforms and opacity
+   only. */
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    --pm-duration: 340ms;
+    --pm-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
+    --pm-step: 45ms;
+  }
+
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: var(--pm-duration);
+    animation-timing-function: var(--pm-ease);
+    animation-fill-mode: both;
+  }
+
+  /* A named card has only an old or only a new picture; its group must
+     not also morph. */
+  ::view-transition-group(*) {
+    animation-duration: var(--pm-duration);
+  }
+
+}
+
+@keyframes pm-out-left { to { transform: translateX(-18%); opacity: 0; } }
+@keyframes pm-out-right { to { transform: translateX(18%); opacity: 0; } }
+@keyframes pm-out-up { to { transform: translateY(-10%); opacity: 0; } }
+@keyframes pm-out-down { to { transform: translateY(10%); opacity: 0; } }
+@keyframes pm-in-right { from { transform: translateX(18%); opacity: 0; } }
+@keyframes pm-in-left { from { transform: translateX(-18%); opacity: 0; } }
+@keyframes pm-in-below { from { transform: translateY(10%); opacity: 0; } }
+@keyframes pm-in-above { from { transform: translateY(-10%); opacity: 0; } }
+
+/* The cards, one step apart: out first, in after the page has begun. */
+@media (prefers-reduced-motion: no-preference) {
+  :root[data-motion="forward"]::view-transition-old(*) { animation-name: pm-out-left; }
+  :root[data-motion="forward"]::view-transition-new(*) { animation-name: pm-in-right; }
+  :root[data-motion="back"]::view-transition-old(*) { animation-name: pm-out-right; }
+  :root[data-motion="back"]::view-transition-new(*) { animation-name: pm-in-left; }
+  :root[data-motion="down"]::view-transition-old(*) { animation-name: pm-out-up; }
+  :root[data-motion="down"]::view-transition-new(*) { animation-name: pm-in-below; }
+  :root[data-motion="up"]::view-transition-old(*) { animation-name: pm-out-down; }
+  :root[data-motion="up"]::view-transition-new(*) { animation-name: pm-in-above; }
+  ::view-transition-old(pm-out-1) { animation-delay: calc(0 * var(--pm-step)); }
+  ::view-transition-new(pm-in-1) { animation-delay: calc(90ms + 0 * var(--pm-step)); }
+  ::view-transition-old(pm-out-2) { animation-delay: calc(1 * var(--pm-step)); }
+  ::view-transition-new(pm-in-2) { animation-delay: calc(90ms + 1 * var(--pm-step)); }
+  ::view-transition-old(pm-out-3) { animation-delay: calc(2 * var(--pm-step)); }
+  ::view-transition-new(pm-in-3) { animation-delay: calc(90ms + 2 * var(--pm-step)); }
+  ::view-transition-old(pm-out-4) { animation-delay: calc(3 * var(--pm-step)); }
+  ::view-transition-new(pm-in-4) { animation-delay: calc(90ms + 3 * var(--pm-step)); }
+  ::view-transition-old(pm-out-5) { animation-delay: calc(4 * var(--pm-step)); }
+  ::view-transition-new(pm-in-5) { animation-delay: calc(90ms + 4 * var(--pm-step)); }
+  ::view-transition-old(pm-out-6) { animation-delay: calc(5 * var(--pm-step)); }
+  ::view-transition-new(pm-in-6) { animation-delay: calc(90ms + 5 * var(--pm-step)); }
+  ::view-transition-old(pm-out-7) { animation-delay: calc(6 * var(--pm-step)); }
+  ::view-transition-new(pm-in-7) { animation-delay: calc(90ms + 6 * var(--pm-step)); }
+  ::view-transition-old(pm-out-8) { animation-delay: calc(7 * var(--pm-step)); }
+  ::view-transition-new(pm-in-8) { animation-delay: calc(90ms + 7 * var(--pm-step)); }
+}