.pf-char-in {
  --pf-dur: 850ms;
  --pf-step: 30ms;
  --pf-delay: 100ms;
  --pf-dist: 0.9em;
  --pf-ease: cubic-bezier(0.08, 0.82, 0.17, 1);
}
.pf-char-in .pf-c { position: relative; opacity: 0; }   
.pf-char-in.is-on .pf-c {
  opacity: 1;
  animation: pf-char-in-rise var(--pf-dur) var(--pf-ease) calc(var(--pf-delay) + var(--i, 0) * var(--pf-step)) both;
}

.pf-char-in--from-l { --pf-dist: 3em; }
.pf-char-in--from-r { --pf-dist: 3em; }
.pf-char-in--drop   { --pf-dur: 900ms; --pf-step: 45ms; --pf-dist: 0.9em; --pf-rot: -14deg; --pf-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }
.pf-char-in--drop .pf-c { display: inline-block; }
.pf-char-in--from-l.is-on .pf-c { animation-name: pf-char-in-from-l; }
.pf-char-in--from-r.is-on .pf-c { animation-name: pf-char-in-from-r; }
.pf-char-in--drop.is-on   .pf-c { animation-name: pf-char-in-drop; }

@keyframes pf-char-in-rise   { from { top: var(--pf-dist); opacity: 0; } 30% { opacity: 1; } to { top: 0; opacity: 1; } }
@keyframes pf-char-in-from-r { from { left: var(--pf-dist); opacity: 0; } 25% { opacity: 1; } to { left: 0; opacity: 1; } }
@keyframes pf-char-in-drop   { from { opacity: 0; transform: translateY(calc(var(--pf-dist) * -1)) rotate(var(--pf-rot)); } to { opacity: 1; transform: none; } }
@keyframes pf-char-in-from-l { from { left: calc(var(--pf-dist) * -1); opacity: 0; } 25% { opacity: 1; } to { left: 0; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pf-char-in .pf-c, .pf-char-in.is-on .pf-c { opacity: 1; animation: none; top: 0; left: 0; }
}