.effect-zoom-sm {
  transform: scale(1);
  transition: transform 200ms ease;
}
.effect-zoom-sm:hover {
  transform: scale(1.06);
}

.effect-zoom-md {
  transform: scale(1);
  transition: transform 200ms ease;
}
.effect-zoom-md:hover {
  transform: scale(1.12);
}
.effect-zoom-bg {
  transform: scale(1);
  transition: transform 200ms ease;
}
.effect-zoom-bg:hover {
  transform: scale(1.18);
}

.wrapper:has(>.animation-top.animation-on) {
  opacity: 0;
  animation: top 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: var(--animationdelay, 300ms);
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.wrapper:has(>.animation-left.animation-on) {
  opacity: 0;
  animation: left 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: var(--animationdelay, 300ms);
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.wrapper:has(>.animation-right.animation-on) {
  opacity: 0;
  animation: right 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: var(--animationdelay, 300ms);
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.wrapper:has(>.animation-bottom.animation-on) {
  opacity: 0;
  animation: bottom 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: var(--animationdelay, 300ms);
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.wrapper:has(>.animation-appear.animation-on) {
  opacity: 0;
  animation: appear 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: var(--animationdelay, 300ms);
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

body:has(.animation-on) {
  overflow-x: hidden;
}