.pf-diagram-pop {
  --pf-dur: 700ms;
  --pf-delay: 0ms;
  --pf-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pf-float-dur: 4200ms;
  --pf-float-amp: 5px;
  --pf-float-tilt: 1.5deg;
  --pf-float-phase: 0ms;
}
.pf-diagram-pop__body {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.4);
}
.pf-diagram-pop.is-on .pf-diagram-pop__body {
  animation: pf-diagram-pop var(--pf-dur) var(--pf-ease) var(--pf-delay) both;
}
.pf-diagram-pop.is-on {
  animation: pf-diagram-pop-float var(--pf-float-dur) ease-in-out var(--pf-float-phase) infinite alternate;
}
@keyframes pf-diagram-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes pf-diagram-pop-float {
  from { translate: 0 calc(var(--pf-float-amp) * -1); rotate: calc(var(--pf-float-tilt) * -1); }
  to   { translate: 0 var(--pf-float-amp); rotate: var(--pf-float-tilt); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-diagram-pop, .pf-diagram-pop.is-on { animation: none; translate: none; rotate: none; }
  .pf-diagram-pop__body, .pf-diagram-pop.is-on .pf-diagram-pop__body { opacity: 1; transform: none; animation: none; }
}