[data-scroll] {
  opacity: 0;
  will-change: transform, scale, opacity;
  -webkit-transform: translateY(6rem) scale(0.93);
          transform: translateY(6rem) scale(0.93);
  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll="in"] {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}


.first[data-scroll] {
  opacity: 0;
  will-change: transform, scale, opacity;
  -webkit-transform: translateY(6rem) scale(0.93);
          transform: translateY(6rem) scale(0.93);
  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  
}

.first[data-scroll="in"] {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}


.left [data-scroll] {
  transition: all 1s;
}

.left [data-scroll="in"] {
  transform: translateX(0);
  opacity: 1;
}

.left [data-scroll="out"] {
  transform: translateX(-100%);
  opacity: 0;
}





.splitting .char {
  color: transparent;
}
.splitting .char:after {
  visibility: visible;
  color: #204754;
  opacity: 0;
  -webkit-transform: translateY(30%);
          transform: translateY(30%);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: calc(.2s + (.04s * var(--char-index) ) );
}