.headline--box{
  padding: 0 5px;
}
.headline--boxed_rounded .headline--box {
  border-radius: 2.083em;
}
.headline--boxed_rounded_corners .headline--box {
  border-radius: 0.2em 0;
}

.headline .splitting {
	 color: #84a8ff;
}

.headline .splitting[data-scroll="out"] .char {
	 opacity: 0.1;
	 transform: translateY(0.25em);
}
.headline .splitting {
  --word-center: calc((var(--word-total) - 1) / 2);
  --char-center: calc((var(--char-total) - 1) / 2);
  --line-center: calc((var(--line-total) - 1) / 2);
} 
.headline .splitting .word {
  --word-percent: calc(var(--word-index) / var(--word-total));
  --line-percent: calc(var(--line-index) / var(--line-total));
}
.headline .splitting .word, .headline .splitting .char {
  display: inline-block;
}

.headline .splitting .char {
  position: relative;
}
.headline .splitting .char {
  --char-percent: calc(var(--char-index) / var(--char-total));
  --char-offset: calc(var(--char-index) - var(--char-center));
  --distance: calc( (var(--char-offset) * var(--char-offset)) / var(--char-center) );
  --distance-sine: calc(var(--char-offset) / var(--char-center));
  --distance-percent: calc((var(--distance) / var(--char-center)));
}
.headline .splitting .char {
  -webkit-transition: opacity .3s linear,-webkit-transform .3s cubic-bezier(0.3,0,0.3,1);
  transition: opacity .3s linear,-webkit-transform .3s cubic-bezier(0.3,0,0.3,1);
  transition: transform .3s cubic-bezier(0.3,0,0.3,1),opacity .3s linear;
  transition: transform .3s cubic-bezier(0.3,0,0.3,1),opacity .3s linear,-webkit-transform .3s cubic-bezier(0.3,0,0.3,1);
    transition-delay: 0s, 0s, 0s;
  -webkit-transition-delay: calc( 20ms * var(--char-index) );
  transition-delay: calc( 20ms * var(--char-index) );
}
.headline .splitting[data-scroll="out"] .char {
  opacity: .1;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
}