:is(.ani-bottom, .anis-bottom) {
  --ani-x: 0;
  --ani-y: 32px;
}

:is(.ani-right, .anis-right) {
  --ani-x: 32px;
  --ani-y: 0;
}

:is(.ani-left, .anis-left) {
  --ani-x: -32px;
  --ani-y: 0;
}

:is(.ani-fade, .anis-fade) {
  --ani-x: 0;
  --ani-y: 0;
}

:where(html:not(.elementor-html)) :is(.ani-bottom:not([role]), .ani-right:not([role]), .ani-left:not([role]), .ani-fade:not([role])) > * {
  opacity: 0;
  filter: blur(6px);
  translate: var(--ani-x) var(--ani-y);
  scale: 0.98;
  transition: none;
}

:is(.ani-bottom, .ani-right, .ani-left, .ani-fade).ani-visible > * {
  opacity: 1;
  filter: blur(0);
  translate: 0;
  scale: 1;
  transition: opacity 800ms cubic-bezier(.4, 0, .2, 1),
    filter 800ms cubic-bezier(.4, 0, .2, 1),
    translate 800ms cubic-bezier(.4, 0, .2, 1),
    scale 800ms cubic-bezier(.4, 0, .2, 1);
  transition-delay: var(--ani-delay, 0ms);
}

:where(html:not(.elementor-html))  :is(.anis-bottom:not([role]), .anis-right:not([role]), .anis-left:not([role]), .anis-fade:not([role])) {
  opacity: 0;
  filter: blur(6px);
  translate: var(--ani-x) var(--ani-y);
  scale: 0.98;
  transition: none;
}

:is(.anis-bottom, .anis-right, .anis-left, .anis-fade).ani-visible {
  opacity: 1;
  filter: blur(0);
  translate: 0;
  scale: 1;
  transition: opacity 800ms cubic-bezier(.4, 0, .2, 1),
    filter 800ms cubic-bezier(.4, 0, .2, 1),
    translate 800ms cubic-bezier(.4, 0, .2, 1),
    scale 800ms cubic-bezier(.4, 0, .2, 1);
  transition-delay: var(--ani-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  :is(.ani-bottom, .ani-right, .ani-left, .ani-fade) > * {
    opacity: 1;
    filter: none;
    translate: none;
    scale: none;
    transition: none;
  }

  :is(.anis-bottom, .anis-right, .anis-left, .anis-fade) {
    opacity: 1;
    filter: none;
    translate: none;
    scale: none;
    transition: none;
  }
}