.ani-elem {
  --duration: 1s;
  --delay: 0s;
  --play-state: paused;
  --y: 100px;
}

.ani-elem.run-animate {
  --play-state: running;
}

.ani-target {
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  animation-play-state: var(--play-state);
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.ani-fade-in {
  opacity: 0;
  animation-name: FadeIn;
  will-change: opacity, animation;
}
.ani-fade-in-up {
  opacity: 0;
  translate: 0 var(--y);
  animation-name: FadeIn, SlideUp;
  will-change: opacity, translate, animation;
}

.ani-mask-container {
  position: relative;
  overflow: hidden;
}
.ani-mask-content {
  opacity: 1;
}
.ani-mask-content:not(.is-active) {
  opacity: 0;
}
.ani-mask-content.is-active {
  transition: opacity 0.3s ease-in 0.2s;
}
.ani-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #2b2b2b;
  scale: 0 1;
  transition: scale 0.4s ease-in-out;
  will-change: scale, animation;
}
.from .ani-mask.left-to-right {
  transform-origin: left;
  translate: -5% 0;
}
.to .ani-mask.left-to-right {
  transform-origin: right;
  translate: 5% 0;
}

@keyframes SlideUp {
  0% {
    translate: 0 var(--y);
  }
  100% {
    translate: 0 0;
  }
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* animation: 1s ease 0s 1 normal none running customSliderAnimation; */
@keyframes customSliderAnimation {
  0% {
    opacity: 1;
    transform: rotate(0deg) translateX(0px);
    z-index: calc(var(--items) + 1);
    animation-timing-function: cubic-bezier(0.71, 0.01, 0.59, 0.97);
  }
  50% {
    opacity: 0;
    transform: rotate(calc(-1 * -20deg))
      translate(calc(-1 * -1 * 30rem), calc(10rem * -1));
    animation-timing-function: cubic-bezier(0.71, 0.01, 0.59, 0.97);
    z-index: calc(var(--items) + 1);
  }
  55% {
    opacity: 0;
    transform: rotate(0deg)
      translate(
        calc((var(--items) - 0.5) * -1 * 1.6rem),
        calc((var(--items) - 0.5) * -1 * 2rem)
      );
    z-index: 0;
    animation-timing-function: cubic-bezier(0.26, 0.02, 0.27, 0.97);
  }
  100% {
    opacity: 1;
    transform: translate(
      calc((var(--items) - 1) * -1 * 1.6rem),
      calc((var(--items) - 1) * -1 * 2rem)
    );
    z-index: 0;
    animation-timing-function: cubic-bezier(0.26, 0.02, 0.27, 0.97);
  }
}

.marquee-container {
  --mq-duration: 10s;
}
.marquee-container .marquee-wrap {
  display: flex;
}
.marquee-container .marquee-inner {
  display: flex;
  flex-wrap: nowrap;
}
.marquee-container.active .marquee-inner {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: var(--mq-duration);
  will-change: animation;
}
.marquee-container.ltr.active .marquee-inner {
  animation-name: marquee;
}
.marquee-container.rtl.active .marquee-inner {
  animation-name: marqueeRtl;
}
.marquee-container.btt.active .marquee-inner {
  animation-name: marqueeBtt;
}
.marquee-container.ttb.active .marquee-inner {
  animation-name: marqueeTtb;
}

.marquee-container.btt .marquee-inner {
  flex-direction: column;
}
.marquee-container.ttb .marquee-inner {
  flex-direction: column-reverse;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes marqueeRtl {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes marqueeBtt {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes marqueeTtb {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}