:root {
  /* Common duration variables */
  --fade-duration: 500ms;
  --transform-duration: 500ms;
  --clip-clip-duration: 500ms;
  --clip-transform-duration: 500ms;
  --translateY-dist: 5rem;
  --translateY-dist-clip: 98%;
  --ease-out: ease-out;
  --ease-out-clip: cubic-bezier(0.25, 0.8, 0.5, 1);
}

/* the fade-in-ready class is kept and the finished class is added on top */
.fade-in-ready {
  transform: translateY(var(--translateY-dist));
  transition: opacity var(--fade-duration), transform var(--transform-duration) var(--ease-out);
  opacity: 0;
}

.fade-in-ready-clip {
  transform: translateY(98%);
  clip-path: inset(0 0 var(--translateY-dist-clip) 0);
  /* avoid clipping away bottom of text after finished */
  padding-bottom: 1px; 
  transition: transform var(--clip-transform-duration) var(--ease-out-clip), clip-path var(--clip-clip-duration) var(--ease-out-clip);
}

/* Applied when the element becomes visible */
.fade-in-finished {
  transform: translateY(0);
  opacity: 1;
  /* We keep the fade-in-ready class in the js so we dont need this */
  /* transition: opacity var(--fade-duration),
    transform var(--transform-duration) var(--ease-out),
    clip-path var(--clip-duration) var(--ease-out); */
}

.fade-in-finished-clip {
  transform: translateY(0);
  /* opacity: 1; */
  /* transition: opacity var(--fade-duration),
    transform var(--transform-duration) var(--ease-out),
    clip-path var(--clip-duration) var(--ease-out); */
  /* -10 saftey */
  clip-path: inset(0 0 0 0);
}

/* avoid flickr when spliting js takes a bit of time */
.text-to-be-split {
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.split-ready .text-to-be-split {
  visibility: visible;
}