/* ---------- slide right ---------- */
[data-inviewport="slide-right"].is-inViewport {
  -webkit-animation: fadeSlideRight 0.6s ease-in-out both;
  animation: fadeSlideRight 0.6s ease-in-out both;
}
@keyframes fadeSlideRight {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- fade slide up ---------- */
[data-inviewport="fade-slide-up"].is-inViewport {
  -webkit-animation: fadeSlideUp 0.6s ease-in-out both;
  animation: fadeSlideUp 0.6s ease-in-out both;
}
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* ---------- scale in  ---------- */
[data-inviewport="scale-in"].is-inViewport {
  -webkit-animation: scaleIn 0.3s ease-in-out both;
  animation: scaleIn 0.3s ease-in-out both;
}
@keyframes scaleIn {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

.v-align {
  display: flex;
  align-items: center;
}