.splitting .char,.splitting .word{display:inline-block}.splitting .char{position:relative;--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)))}.splitting .char::after,.splitting .char::before{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;user-select:none}.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)}.splitting .word{--word-percent:calc(var(--word-index) / var(--word-total));--line-percent:calc(var(--line-index) / var(--line-total))}.splitting.cells img{width:100%;display:block}@supports (display:grid){.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden}.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr)}.splitting .cell{background:inherit;position:relative;overflow:hidden;--center-x:calc((var(--col-total) - 1) / 2);--center-y:calc((var(--row-total) - 1) / 2);--offset-x:calc(var(--col-index) - var(--center-x));--offset-y:calc(var(--row-index) - var(--center-y));--distance-x:calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );--distance-y:calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) )}.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100% * var(--col-total));height:calc(100% * var(--row-total));left:calc(-100% * var(--col-index));top:calc(-100% * var(--row-index))}}

 /*------------------- &&& ---------------------*/
 .titleEffects
  {
    display: grid;
  }
.titleEffects>* {
    grid-area: 1 / 1;
    user-select: none;
    visibility: hidden;
}
.dataSplitting .whitespace
{
  min-width: 10px;
  display: inline-block;
}

/*------------------- &&& ---------------------*/
.animationDirection
{
  position: relative;
  overflow: hidden;
}
.animationDirection::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  transition: all 0.5s;
  left: var(--before-xPercent);
  top: var(--before-yPercent);
  z-index: 2;
}

.animationDirection.primary::before{background: var(--primary-color);}
.animationDirection.secondary::before{background: var(--secondary-color);}
.animationDirection.tertiary::before{background: var(--tertiary-color);}
.animationDirection.white::before{background: var(--white)}
.animationDirection.black::before{background: var(--black)}

/*------------------- &&& ---------------------*/
.innerWord
{
  overflow: hidden;
  position: relative;
  line-height: 1;
  display: inline-block;
}

.soulignage
{
  position: relative;
  overflow: hidden;
  display: inline-flex;
}
.soulignage::before
{
  top: initial;
  bottom: 0;
  height: 3px;
  background: var(--primary-color);
}