:root {
  --transition-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@property --COUNTER {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.anim-counter {
  transition: --COUNTER 2s cubic-bezier(0.35, 0.92, 0, 0.98);
  counter-reset: COUNTER var(--COUNTER);
}
.anim-counter::after {
  content: counter(COUNTER);
}

@media (prefers-reduced-motion: no-preference) {
  .anim {
    --TRANSLATION-AMOUNT: min(100%, 100px);
  }
  .anim.anim-hidden {
    opacity: 0;
    visibility: hidden;
  }
  .anim.anim-show {
    animation: drop 0.5s ease-in-out forwards;
  }
  .anim.anim-show.fromAbove {
    transform: translateY(calc(0px - var(--TRANSLATION-AMOUNT)));
  }
  .anim.anim-show.fromUnder {
    transform: translateY(var(--TRANSLATION-AMOUNT));
  }
  .anim.anim-show.fromLeft {
    transform: translateX(calc(0px - var(--TRANSLATION-AMOUNT)));
  }
  .anim.anim-show.fromRight {
    transform: translateX(var(--TRANSLATION-AMOUNT));
  }
  .anim.anim-show.pop {
    scale: 0;
  }
  .anim.anim-show.overshoot {
    animation: drop 0.5s var(--transition-overshoot) forwards;
  }
}
@keyframes drop {
  from {
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    scale: 1;
    opacity: 1;
    visibility: visible;
  }
}/*# sourceMappingURL=animations.css.map */