/* Slide In Left */
.mo-anim-slide-in-left {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s ease-out, transform 0.7s ease-out 200ms;
  visibility: hidden;
}

.mo-anim-slide-in-left.active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* Slide In Right */
.mo-anim-slide-in-right {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease-out, transform 0.7s ease-out 200ms;
  visibility: hidden;
}

.mo-anim-slide-in-right.active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/* Fade In Custom */
.mo-anim-fade-in-custom {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease-out, transform 0.7s ease-out 200ms;
  visibility: hidden;
}

.mo-anim-fade-in-custom.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Scale & Rotate Combo */
/* Keyframe za scale i rotate */
@keyframes mo-anim-scale-rotate-keyframes {
  0% {
    transform: scale(0.5) rotate(-180deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.mo-anim-scale-rotate {
  opacity: 0;
  transform: scale(0.5) rotate(-180deg);
  transition: opacity 0.7s ease-out;
  visibility: hidden;
}

.mo-anim-scale-rotate.active {
  opacity: 1;
  visibility: visible;
  animation: mo-anim-scale-rotate-keyframes 1s ease-out forwards;
}

/* Blur & Fade-in */
.mo-anim-blur-fade {
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.9);
  transition: opacity 0.8s ease-out, filter 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden;
}

.mo-anim-blur-fade.active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
  visibility: visible;
}

/* Flip & Scale */
.mo-anim-flip-scale {
  opacity: 0;
  transform: scale(0.7) rotateY(90deg);
  transition: opacity 0.6s ease-out, transform 0.8s ease-out;
  visibility: hidden;
}

.mo-anim-flip-scale.active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  visibility: visible;
}

/* Skew & Fade */
.mo-anim-skew-fade {
  opacity: 0;
  transform: skew(20deg, 0deg);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  visibility: hidden;
}

.mo-anim-skew-fade.active {
  opacity: 1;
  transform: skew(0deg, 0deg);
  visibility: visible;
}

/* Slide & Color Shift */
.mo-anim-slide-color-shift {
  opacity: 0;
  transform: translateX(-100%);
  background-color: #ff6f61;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out, background-color 0.7s ease-out;
  visibility: hidden;
}

.mo-anim-slide-color-shift.active {
  opacity: 1;
  transform: translateX(0);
  background-color: #4a90e2;
  visibility: visible;
}

/* Bounce In */
.mo-anim-bounce-in {
  opacity: 0;
  transform: scale(0.5) translateY(50%);
  transition: opacity 0.5s ease-out, transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  visibility: hidden;
}

.mo-anim-bounce-in.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
}

/* Fade Slide Diagonal */
.mo-anim-fade-slide-diagonal {
  opacity: 0;
  transform: translateX(-100%) translateY(-100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  visibility: hidden;
}

.mo-anim-fade-slide-diagonal.active {
  opacity: 1;
  transform: translateX(0) translateY(0);
  visibility: visible;
}

/* Pulse Effect */
@keyframes mo-anim-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.mo-anim-pulse-effect {
  animation: mo-anim-pulse 1.5s infinite ease-in-out;
}

/* Rotate 360 */
@keyframes mo-anim-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mo-anim-rotate-360 {
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 0.6s ease-out, transform 1s ease-out;
}

.mo-anim-rotate-360.active {
  opacity: 1;
  transform: rotate(360deg);
  animation: mo-anim-rotate 1s linear forwards;
}

/* Zoom In */
@keyframes mo-anim-zoom-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.mo-anim-zoom-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.mo-anim-zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* Flip */
@keyframes mo-anim-flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.mo-anim-flip {
  opacity: 0;
  transform: rotateY(0deg);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mo-anim-flip.active {
  opacity: 1;
  transform: rotateY(180deg);
}

/* Fade-in & Scale */
@keyframes mo-anim-fade-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.mo-anim-fade-scale {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.mo-anim-fade-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Slide Up */
@keyframes mo-anim-slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.mo-anim-slide-up {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  visibility: hidden;
}

.mo-anim-slide-up.active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Shake Effect */
@keyframes mo-anim-shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.mo-anim-shake {
  animation: mo-anim-shake 0.6s ease-in-out;
}

/* Glowing Effect */
@keyframes mo-anim-glow {
  0% {
    box-shadow: 0 0 5px #fff;
  }
  50% {
    box-shadow: 0 0 20px #ff0000;
  }
  100% {
    box-shadow: 0 0 5px #fff;
  }
}

.mo-anim-glow {
  animation: mo-anim-glow 2s infinite ease-in-out;
}

/* Glowing Effect for Images */
@keyframes mo-anim-image-glow {
  0% {
    filter: drop-shadow(0 0 5px #fff);
  }
  50% {
    filter: drop-shadow(0 0 20px #ff0000);
  }
  100% {
    filter: drop-shadow(0 0 5px #fff);
  }
}

.mo-anim-image-glow {
  animation: mo-anim-image-glow 2s infinite ease-in-out;
}


/* Glowing Stroke Effect for Text */
@keyframes mo-anim-stroke-glow {
  0% {
    text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #EB0000;
    -webkit-text-stroke: 1px #000;
  }
  50% {
    text-shadow: 0 0 15px #EB0000, 0 0 30px #EB0000, 0 0 45px #EB0000;
    -webkit-text-stroke: 1px #EB0000;
  }
  100% {
    text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #EB0000;
    -webkit-text-stroke: 1px #000;
  }
}

.mo-anim-stroke-glow {
  animation: mo-anim-stroke-glow 2s infinite ease-in-out;
  color: transparent;
  -webkit-text-stroke: 1px #000;
}

/* Swing Animation */
@keyframes mo-anim-swing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.mo-anim-swing {
  transform-origin: top center;
  animation: mo-anim-swing 2s ease-in-out infinite;
}

/* Heartbeat Animation */
@keyframes mo-anim-heartbeat {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(1); }
}

.mo-anim-heartbeat {
  animation: mo-anim-heartbeat 1.5s infinite;
}

/* Flip In Animation */
@keyframes mo-anim-flip-in {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

.mo-anim-flip-in {
  animation: mo-anim-flip-in 1s ease forwards;
}

/* Zoom Out Animation */
@keyframes mo-anim-zoom-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

.mo-anim-zoom-out {
  animation: mo-anim-zoom-out 0.8s ease forwards;
}

/* Floating Animation */
@keyframes mo-anim-floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.mo-anim-floating {
  animation: mo-anim-floating 3s ease-in-out infinite;
}

/* Shake Animation */
@keyframes mo-anim-shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.mo-anim-shake {
  animation: mo-anim-shake 0.6s ease-in-out;
}

/* Blinking Animation */
@keyframes mo-anim-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.mo-anim-blink {
  animation: mo-anim-blink 1s step-start infinite;
}

/* Fade Out Animation */
@keyframes mo-anim-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.mo-anim-fade-out {
  animation: mo-anim-fade-out 0.8s ease forwards;
}

/* Slide Up Animation */
@keyframes mo-anim-slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.mo-anim-slide-up {
  animation: mo-anim-slide-up 1s ease forwards;
}