/* ==========================================================================
   author.css — the editor page only.

   The portrait is a drawn mark rather than a photograph, and it is animated
   because the thing it depicts is a process: evidence coming in, a claim being
   checked against a register, a score landing. Only transform and opacity are
   animated, so the whole thing composites on the GPU and never triggers layout.
   ========================================================================== */

.whois {
  display: grid;
  gap: var(--s-4);
  align-items: start;
}
@media (min-width: 760px) {
  .whois { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-6); }
}

.whois__figure { margin: 0; }
.whois__figure svg { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.whois__figure figcaption {
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ── The portrait's moving parts ─────────────────────────────────────────── */

/* the review sweep: one pass down the plate, then a long pause */
.pt__sweep {
  animation: pt-sweep 7s var(--ease) infinite;
  transform-origin: center;
}
@keyframes pt-sweep {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 0.9; }
  40%  { transform: translateY(150px); opacity: 0.9; }
  48%  { transform: translateY(150px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* three evidence bars filling in sequence, left to right */
.pt__bar { transform-origin: left center; animation: pt-bar 7s var(--ease) infinite; }
.pt__bar--2 { animation-delay: 0.45s; }
.pt__bar--3 { animation-delay: 0.9s; }
@keyframes pt-bar {
  0%, 8%    { transform: scaleX(0); opacity: 0.35; }
  26%, 62%  { transform: scaleX(1); opacity: 1; }
  80%, 100% { transform: scaleX(1); opacity: 0.35; }
}

/* the verdict tick, which only appears once the bars are full */
.pt__tick { transform-origin: center; animation: pt-tick 7s var(--ease) infinite; }
@keyframes pt-tick {
  0%, 55%  { transform: scale(0.4); opacity: 0; }
  66%      { transform: scale(1); opacity: 1; }
  86%      { transform: scale(1); opacity: 1; }
  94%, 100% { transform: scale(1); opacity: 0; }
}

/* Motion here is decoration on a static illustration, so it is switched off
   rather than shortened. The global reset would freeze it at frame zero, where
   two of the three groups are invisible. */
@media (prefers-reduced-motion: reduce) {
  .pt__sweep { display: none; }
  .pt__bar, .pt__tick {
    animation: none;
    transform: none;
    opacity: 1;
  }
}