/* marker only (NO animation here) */
.anim-up,
.anim-left,
.anim-right{}

/* initial hidden state (JS adds this) */
.anim-up--init{
  --ax: 0px;     /* x offset */
  --ay: 22px;    /* y offset (default = up) */

  opacity: 0;
  transform: translate3d(var(--ax), var(--ay), 0);
  will-change: opacity, transform;
}

/* direction presets (apply these on the element) */
.anim-up{    --ax: 0px;   --ay: 22px; }
.anim-left{  --ax: -22px; --ay: 0px;  }
.anim-right{ --ax: 22px;  --ay: 0px;  }

/* reveal (JS adds is-inview) */
/* .anim-up--init.is-inview{
  animation: fadeUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
} */

/* reveal (JS adds is-inview) */
.anim-up--init.is-inview{
  animation: fadeInMove .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* smoother + less “snappy” */
@keyframes fadeUp{
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInMove{
  from { opacity: 0; transform: translate3d(var(--ax), var(--ay), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* delay helpers */
.anim-up--init.is-inview.delay-1{ animation-delay: .08s; }
.anim-up--init.is-inview.delay-2{ animation-delay: .16s; }
.anim-up--init.is-inview.delay-3{ animation-delay: .24s; }
.anim-up--init.is-inview.delay-4{ animation-delay: .32s; }
.anim-up--init.is-inview.delay-5{ animation-delay: .40s; }

/* duration helpers */
.anim-up--init.is-inview.fast{ animation-duration: .55s; }
.anim-up--init.is-inview.slow{ animation-duration: 1.1s; }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .anim-up--init{
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}