/*
    1. Add class 'animating' to trigger on scroll or 'animated' to trigger on load

    2. Add an scondary class based on effect:

    bounceIn
    bounceInLeft
    bounceInRight
    fadeIn
    fadeInDown
    fadeInUp
    moveUp
    fadeBgColor

     * Last Worked On By: PR - 3/25/26 12:50pm

*/

.animating {
  /* initially hide animatable objects */
  visibility: hidden;

  /* initially pause animatable objects their animations */
  animation-play-state: paused;
}

/* show objects being animated */
.animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}


/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@keyframes fadeIn {
  0%,
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    transform: translateX(20px);
  }
  80% {
    transform: translateX(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    transform: translateX(-20px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeBgColor {
  0%,
  70% {
    background: none;
  }
  100% {
    background: #464646;
  }
}

.animated.animationDelay {
  animation-delay: 0.6s;
}
.animated.animationDelayMed {
  animation-delay: 1.2s;
}
.animated.animationDelayLong {
  animation-delay: 1.6s;
}
.animated.fadeBgColor {
  animation-name: fadeBgColor;
}
.animated.bounceIn {
  animation-name: bounceIn;
}
.animated.bounceInRight {
  animation-name: bounceInRight;
}
.animated.bounceInLeft {
  animation-name: bounceInLeft;
}
.animated.fadeIn {
  animation-name: fadeIn;
}
.animated.fadeInDown {
  animation-name: fadeInDown;
}
.animated.fadeInUp {
  animation-name: fadeInUp;
}
.animated.moveUp {
  animation-name: moveUp;
}