/* Kinetische Typografie */
.kl-kinetic{
  display:inline-block;
  will-change:transform;
}

/* Keep words intact so line breaks only happen between words (not inside). */
.kl-kinetic .kl-word{
  display:inline-block;
  white-space:nowrap;
}

.kl-kinetic .kl-char{
  display:inline-block;
  opacity:0;
  transform:translate3d(0,18px,0) rotate(calc(var(--rx, 0) * 0.35deg));
  transition:
    transform .75s cubic-bezier(.2,.9,.2,1),
    opacity .75s ease;
  transition-delay:calc(var(--i, 0) * 16ms);
}

.kl-kinetic.is-in .kl-char{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0deg);
}

.kl-kinetic:hover .kl-char{
  transform:
    translate3d(calc(var(--tx, 0) * 0.45px), calc(var(--ty, 0) * -0.45px), 0)
    rotate(calc(var(--rx, 0) * 0.6deg));
}

@media (prefers-reduced-motion: reduce){
  .kl-kinetic .kl-char{
    opacity:1;
    transform:none;
    transition:none;
  }
}