:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --gp-anim-duration: 0.75s;
  --gp-anim-distance: 40px;
}

 
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--gp-anim-duration) var(--ease-out-expo),
    transform var(--gp-anim-duration) var(--ease-out-expo);
}

.fade-up    { transform: translateY(var(--gp-anim-distance)); }
.fade-down  { transform: translateY(calc(var(--gp-anim-distance) * -1)); }
.fade-left  { transform: translateX(var(--gp-anim-distance)); }
.fade-right { transform: translateX(calc(var(--gp-anim-distance) * -1)); }
.zoom-in    { transform: scale(0.88); }
.zoom-out   { transform: scale(1.12); }

 
.fade-up.is-visible,
.fade-down.is-visible,
.fade-left.is-visible,
.fade-right.is-visible,
.zoom-in.is-visible,
.zoom-out.is-visible {
  opacity: 1;
  transform: none;
}

 
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-down, .fade-left, .fade-right, .zoom-in, .zoom-out {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}