/* Personnel File: motion. Entries print in from the left, one after another, in steps like a copier. */

.button-entrance {
  animation-name: pfPrint;
  animation-duration: .45s;
  animation-timing-function: steps(6, jump-none);
  animation-fill-mode: both;
  animation-delay: calc(var(--delay) / 8);
}
@keyframes pfPrint {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.fadein {
  animation-name: fadein;
  animation-duration: .8s;
  animation-fill-mode: both;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* The stock hover classes stay defined but do not change layout */
.button-hover, .credit-hover, .footer-hover, .hvr-grow { transition: none; }
.hvr-grow:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .button-entrance, .fadein, .button.pf-live::after { animation: none; }
  .button, .column > img[alt="avatar"], body { transition: none; }
}