/* ============================================================
   ABOUT / WHO. enhance layer (owns ONLY this file + about.js)
   Pre-JS hidden state for the elements this section animates,
   scoped to html.motion so reduced-motion users never see a
   flash of hidden content (their CSS keeps the default opacity:1).
   ============================================================ */
html.motion .who-hero .who-statement,
html.motion .who-hero .who-photo,
html.motion .who-hero .who-awards-mini,
html.motion .who-hero .scrap-head,
html.motion .who-hero .scrap .card,
html.motion .who-hero .pen-line {
  opacity: 0;
}

/* about.js wraps each hand-authored line of .who-statement in this class */
.who-statement .who-line {
  display: block;
  will-change: transform, opacity;
}

/* subtle tactile lift on the pen swap: invites the hover without
   touching the existing base/tool opacity-swap logic */
.pen-swap {
  transition: transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .pen-swap:hover { transform: scale(1.045) rotate(-1deg); }
}