/* Lean in (js/lean.js): a circle without a photo turns toward the pointer like a ball catching the
   light. js/lean.js sets --lx and --ly (-1 to 1) on the circle; its <span class="lean-light"> draws a
   soft light on the near side (::before) and a shade on the far side (::after), and the initials
   lean that way too (css/person.css). --lean-shade is the shade's colour. */
.lean-light { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.lean-light::before { content: ''; position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, .2) 50%, transparent);
  translate: calc(var(--lx, 0) * 40%) calc(var(--ly, 0) * 40%); transition: translate .3s ease-out; }
.lean-light::after { content: ''; position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 58%, var(--lean-shade, rgba(20, 0, 60, .38)));
  translate: calc(var(--lx, 0) * -12%) calc(var(--ly, 0) * -12%); transition: translate .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .lean-light::before, .lean-light::after { transition: none; } }