/* Reveal Animation - Base Classes */
.do-animate .revealIn,
.do-animate .revealInDown,
.do-animate .revealInLeft,
.do-animate .revealInRight,
.do-animate .revealInUp {
  --awb-animation-color: #0071bd;
  position: relative;
  overflow: hidden;
}

.do-animate .revealIn *,
.do-animate .revealInDown *,
.do-animate .revealInLeft *,
.do-animate .revealInRight *,
.do-animate .revealInUp * {
  visibility: inherit !important;
  opacity: 0;
  animation-name: fadeInContent;
  animation-duration: 0.6s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pseudo-element for background reveal */
.do-animate .revealIn:after,
.do-animate .revealInDown:after,
.do-animate .revealInLeft:after,
.do-animate .revealInRight:after,
.do-animate .revealInUp:after {
  content: "";
  display: block !important;
  position: absolute;
  background-color: var(--awb-animation-color, #0071bd);
  visibility: visible;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 0.9);
  z-index: 10;
  top: 0;
  bottom: 0;
}

/* Reveal from Left */
.do-animate .revealIn:after,
.do-animate .revealInLeft:after {
  top: 0;
  bottom: 0;
  left: 0;
  animation-name: revealInLeft;
}

/* Reveal from Right */
.do-animate .revealInRight:after {
  top: 0;
  bottom: 0;
  right: 0;
  animation-name: revealInRight;
}

/* Reveal from Top */
.do-animate .revealInUp:after {
  left: 0;
  right: 0;
  top: 0;
  animation-name: revealInUp;
}

/* Reveal from Bottom */
.do-animate .revealInDown:after {
  left: 0;
  right: 0;
  bottom: 0;
  animation-name: revealInDown;
}

/* Keyframe: Reveal from Left */
@keyframes revealInLeft {
  0% {
    left: 0;
    right: auto;
    width: 0%;
  }

  45% {
    left: 0;
    right: auto;
    width: 100%;
  }

  55% {
    left: auto;
    right: 0;
    width: 100%;
  }

  100% {
    left: auto;
    right: 0;
    width: 0%;
  }
}

/* Keyframe: Reveal from Right */
@keyframes revealInRight {
  0% {
    left: auto;
    right: 0;
    width: 0%;
  }

  45% {
    left: auto;
    right: 0;
    width: 100%;
  }

  55% {
    left: 0;
    right: auto;
    width: 100%;
  }

  100% {
    left: 0;
    right: auto;
    width: 0%;
  }
}

/* Keyframe: Reveal from Top */
@keyframes revealInUp {
  0% {
    top: 0;
    bottom: auto;
    height: 0%;
  }

  45% {
    top: 0;
    bottom: auto;
    height: 100%;
  }

  55% {
    top: auto;
    bottom: 0;
    height: 100%;
  }

  100% {
    top: auto;
    bottom: 0;
    height: 0%;
  }
}

/* Keyframe: Reveal from Bottom */
@keyframes revealInDown {
  0% {
    top: auto;
    bottom: 0;
    height: 0%;
  }

  45% {
    top: auto;
    bottom: 0;
    height: 100%;
  }

  55% {
    top: 0;
    bottom: auto;
    height: 100%;
  }

  100% {
    top: 0;
    bottom: auto;
    height: 0%;
  }
}

/* Keyframe: Fade in content */
@keyframes fadeInContent {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Alternative: Slide in content from same direction */
.do-animate .revealInLeft * {
  animation-name: slideInFromLeft;
}

.do-animate .revealInRight * {
  animation-name: slideInFromRight;
}

.do-animate .revealInUp * {
  animation-name: slideInFromTop;
}

.do-animate .revealInDown * {
  animation-name: slideInFromBottom;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

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

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }

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

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

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

@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* Optional: Adjust timing for faster/slower animations */
.do-animate.reveal-fast .revealIn:after,
.do-animate.reveal-fast .revealInLeft:after,
.do-animate.reveal-fast .revealInRight:after,
.do-animate.reveal-fast .revealInUp:after,
.do-animate.reveal-fast .revealInDown:after {
  animation-duration: 0.6s;
}

.do-animate.reveal-fast .revealIn *,
.do-animate.reveal-fast .revealInLeft *,
.do-animate.reveal-fast .revealInRight *,
.do-animate.reveal-fast .revealInUp *,
.do-animate.reveal-fast .revealInDown * {
  animation-delay: 0.3s;
  animation-duration: 0.4s;
}

.do-animate.reveal-slow .revealIn:after,
.do-animate.reveal-slow .revealInLeft:after,
.do-animate.reveal-slow .revealInRight:after,
.do-animate.reveal-slow .revealInUp:after,
.do-animate.reveal-slow .revealInDown:after {
  animation-duration: 1.5s;
}

.do-animate.reveal-slow .revealIn *,
.do-animate.reveal-slow .revealInLeft *,
.do-animate.reveal-slow .revealInRight *,
.do-animate.reveal-slow .revealInUp *,
.do-animate.reveal-slow .revealInDown * {
  animation-delay: 0.8s;
  animation-duration: 0.8s;
}

/* Auto-Apply only for sections explicitly marked with .do-animate */
#page [data-elementor-type="wp-page"] > .elementor > .elementor-element.do-animate,
#page [data-elementor-type="wp-page"] > .elementor-element.do-animate,
#page [data-elementor-type="wp-post"] > .elementor > .elementor-element.do-animate,
#page [data-elementor-type="wp-post"] > .elementor-element.do-animate,
main#content [data-elementor-type="wp-page"] > .elementor > .elementor-element.do-animate,
main#content [data-elementor-type="wp-page"] > .elementor-element.do-animate,
main#content [data-elementor-type="wp-post"] > .elementor > .elementor-element.do-animate,
main#content [data-elementor-type="wp-post"] > .elementor-element.do-animate,
main#content > .elementor > .elementor-element.do-animate {
  --awb-animation-color: #0071bd;
  position: relative;
  overflow: hidden;
}

/* Apply content animation to children */
#page [data-elementor-type="wp-page"] > .elementor > .elementor-element.do-animate *,
#page [data-elementor-type="wp-page"] > .elementor-element.do-animate *,
#page [data-elementor-type="wp-post"] > .elementor > .elementor-element.do-animate *,
#page [data-elementor-type="wp-post"] > .elementor-element.do-animate *,
main#content [data-elementor-type="wp-page"] > .elementor > .elementor-element.do-animate *,
main#content [data-elementor-type="wp-page"] > .elementor-element.do-animate *,
main#content [data-elementor-type="wp-post"] > .elementor > .elementor-element.do-animate *,
main#content [data-elementor-type="wp-post"] > .elementor-element.do-animate *,
main#content > .elementor > .elementor-element.do-animate * {
  visibility: inherit !important;
  opacity: 0;
  animation-name: fadeInContent;
  animation-duration: 0.6s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply background reveal pseudo-element */
#page [data-elementor-type="wp-page"] > .elementor > .elementor-element.do-animate:after,
#page [data-elementor-type="wp-page"] > .elementor-element.do-animate:after,
#page [data-elementor-type="wp-post"] > .elementor > .elementor-element.do-animate:after,
#page [data-elementor-type="wp-post"] > .elementor-element.do-animate:after,
main#content [data-elementor-type="wp-page"] > .elementor > .elementor-element.do-animate:after,
main#content [data-elementor-type="wp-page"] > .elementor-element.do-animate:after,
main#content [data-elementor-type="wp-post"] > .elementor > .elementor-element.do-animate:after,
main#content [data-elementor-type="wp-post"] > .elementor-element.do-animate:after,
main#content > .elementor > .elementor-element.do-animate:after {
  content: "";
  display: block !important;
  position: absolute;
  background-color: var(--awb-animation-color, #0071bd);
  visibility: visible;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.1, 0.5, 0.5, 0.9);
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  animation-name: revealInLeft;
}

/* Alternative: If you want to use revealInRight instead, uncomment this */
/*
#content .page-content [data-elementor-type="wp-page"] > div:first-child:after,
[data-elementor-type="wp-page"] > .elementor:first-child:after,
[data-elementor-type="wp-page"] > section:first-child:after,
[data-elementor-type="wp-post"] > div:first-child:after,
[data-elementor-type="wp-post"] > .elementor:first-child:after,
[data-elementor-type="wp-post"] > section:first-child:after {
  right: 0;
  left: auto;
  animation-name: revealInRight;
}
*/

/* Alternative: If you want to use revealInUp instead, uncomment this */
/*
#content .page-content [data-elementor-type="wp-page"] > div:first-child:after,
[data-elementor-type="wp-page"] > .elementor:first-child:after,
[data-elementor-type="wp-page"] > section:first-child:after,
[data-elementor-type="wp-post"] > div:first-child:after,
[data-elementor-type="wp-post"] > .elementor:first-child:after,
[data-elementor-type="wp-post"] > section:first-child:after {
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  animation-name: revealInUp;
}
*/

/* Alternative: If you want to use revealInDown instead, uncomment this */
/*
#content .page-content [data-elementor-type="wp-page"] > div:first-child:after,
[data-elementor-type="wp-page"] > .elementor:first-child:after,
[data-elementor-type="wp-page"] > section:first-child:after,
[data-elementor-type="wp-post"] > div:first-child:after,
[data-elementor-type="wp-post"] > .elementor:first-child:after,
[data-elementor-type="wp-post"] > section:first-child:after {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  animation-name: revealInDown;
}
*/