.animations-ready .block {
  opacity: 0;
  transform: translateY(var(--block-animation-movement));
  transition: opacity var(--block-animation-duration) ease-in-out, transform var(--block-animation-duration) ease-in-out;
}

.animations-ready .block.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animations-ready .block.no-animation {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Line animations */

.animations-ready .block hr,
.animations-ready .block .keypoint-line--top::before {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--line-animation-duration) ease-in-out;
  transition-delay: var(--line-animation-delay);
}

.animations-ready .block .keypoint-line--left::before,
.animations-ready .block .keypoint-icon--left.keypoint-line--left .keypoint-icon-row-content::before {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--line-animation-duration) ease-out;
  transition-delay: var(--line-animation-delay);
}

.animations-ready .block.in-view hr,
.animations-ready .block.in-view .keypoint-line--top::before,
.animations-ready .block.in-view .keypoint-line--left::before,
.animations-ready .block.in-view .keypoint-icon--left.keypoint-line--left .keypoint-icon-row-content::before {
  clip-path: inset(0);
}

.animations-ready .block.no-animation > hr,
.animations-ready .block.no-animation > .keypoint-line--top::before,
.animations-ready .block.no-animation > .keypoint-line--left::before,
.animations-ready .block.no-animation > .keypoint-icon--left.keypoint-line--left .keypoint-icon-row-content::before {
  clip-path: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .animations-ready .block {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animations-ready .block hr,
  .animations-ready .block .keypoint-line--top::before,
  .animations-ready .block .keypoint-line--left::before,
  .animations-ready .block .keypoint-icon--left.keypoint-line--left .keypoint-icon-row-content::before {
    clip-path: none;
    transition: none;
  }
}