@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Clip-path reveals */
.hisi-anim.ha--clipPathRight {
  clip-path: inset(0 100% 0 0);
}
.hisi-anim.ha--clipPathRight.ha--animated {
  clip-path: inset(0 0 0 0);
}

.hisi-anim.ha--clipPathLeft {
  clip-path: inset(0 0 0 100%);
}
.hisi-anim.ha--clipPathLeft.ha--animated {
  clip-path: inset(0 0 0 0);
}

.hisi-anim.ha--clipPathBottom {
  clip-path: inset(0 0 100% 0);
}
.hisi-anim.ha--clipPathBottom.ha--animated {
  clip-path: inset(0 0 0 0);
}

.hisi-anim.ha--clipPathTop {
  clip-path: inset(100% 0 0 0);
}
.hisi-anim.ha--clipPathTop.ha--animated {
  clip-path: inset(0 0 0 0);
}

/* Scroll-linked effects */
.hisi-anim.ha--scrollBlur {
  animation: blurInOut linear both;
  transition-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

.hisi-anim.ha--scrollBlurRight {
  animation: blurInOutRight linear both;
  transition-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

.hisi-anim.ha--scrollBlurLeft {
  animation: blurInOutLeft linear both;
  transition-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

.hisi-anim.ha--scrollZoom {
  animation: zoom linear both;
  transition-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
}

.hisi-anim.ha--scrollScale {
  animation: scale linear both;
  transition-timing-function: ease;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

@keyframes blurInOut {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
  }
  20%,
  90% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
    filter: blur(5px);
  }
}

@keyframes blurInOutRight {
  from {
    opacity: 0;
    transform: translateX(20px);
    filter: blur(5px);
  }
  20%,
  90% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(5px);
  }
}

@keyframes blurInOutLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(5px);
  }
  20%,
  90% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
    filter: blur(5px);
  }
}

@keyframes zoom {
  from {
    background-size: 100%;
  }
  to {
    background-size: 150%;
  }
}

@keyframes scale {
  from {
    transform: scale(0.8);
    border-radius: 16px;
  }
  to {
    transform: scale(1);
    border-radius: 0;
  }
}