/*---------------ANIMATE ON SCROLL-------------*/

.animate-on-scroll {
  animation-play-state: paused;
}

.animate-on-scroll.in-view {
  animation-play-state: running;
}

/*--------------------FADE---------------------*/
/* Base styles for all fade animations */

.fade-up,
.fade-down,
.fade-left,
.fade-right {
  opacity: 0;               /* start hidden on live site */
  transform: translateY(20px);
}

/* Fade Up */
.fade-up {
  animation: fadeUp 0.8s ease-out 0.5s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Down */
.fade-down {
  animation: fadeDown 0.8s ease-out 0.5s forwards;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Left */
.fade-left {
  animation: fadeLeft 0.8s ease-out 0.5s forwards;
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade Right */
.fade-right {
  animation: fadeRight 0.8s ease-out 0.5s forwards;
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/*--------------------END FADE-------------------*/

/*-------------------BOUNCE----------------------*/

/*base styles*/

.bounce-in-down, .bounce-in-up {
    opacity:0;
    animation-timing-function: ease;
}

/*bounce in */

.bounce-in-up {
	animation: bounceInUp 1s forwards;
}

@keyframes bounceInUp {
  from {
    opacity: 0;
	top:100px;
  }

  50% {
    opacity: 1;
	top:0px;
  }

	75% {
	opacity: 1;
	top:30px;
  }

  to {
	opacity: 1;
	top:0;
  }
}

.bounce-in-down {
	animation: bounceInDown 1s forwards;
}

@keyframes bounceInDown {
  from {
    opacity: 0;
	bottom:100px;
  }

  50% {
    opacity: 1;
	bottom:0px;
  }

	75% {
	opacity: 1;
	bottom:30px;
  }

  to {
	opacity: 1;
	bottom:0;
  }
}

/*-------------------END BOUNCE----------------------*/

/*-----------DISABLE ANIMATIONS IN BUILDER*-------------------*/
.et-vb-app-ancestor .fade-up,
.et-vb-app-ancestor .fade-down,
.et-vb-app-ancestor .fade-left,
.et-vb-app-ancestor .fade-right {
  opacity: 1!important;
  transform: none !important;
}
.et-vb-app-ancestor .bounce-in-up, .et-vb-app-ancestor .bounce-in-down {opacity:1!important;top:0!important;}


/*------------------REDUCED MOTION-----------------------------*/
/* Respect users who've asked their OS to minimize motion.
   Mirrors the builder-disable resets above so animated
   elements simply appear in their final state. */

@media (prefers-reduced-motion: reduce) {

  .fade-up, .fade-down, .fade-left, .fade-right,
  .bounce-in-up, .bounce-in-down {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  /* Safety net: neutralizes any keyframe animation added later,
     plus smooth-scroll. Keeps hover/color transitions intact.
     If you'd rather zero ALL motion (incl. accordion/toggle
     slides), uncomment the transition-duration line. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* transition-duration: 0.01ms !important; */
    scroll-behavior: auto !important;
  }
}
/*----------------END REDUCED MOTION---------------------------*/