/*
 * Catalysts theme - entrance animations.
 *
 * Own implementation of the class contract production's WOW usage relies
 * on: an element carries .wow plus an effect class; assets/js/wow.js hides
 * it inline, then on reveal adds .animated and restores the animation name
 * so the effect runs. Only the effects the saved page data uses (fadeIn,
 * fadeInUp, fadeInLeft, bounceInRight) plus the closely related fadeInDown /
 * fadeInRight / zoomIn are defined.
 *
 * Keyframe values are production's (Consultio animate.css): the directional
 * fades travel 20px, not animate.css's 100%. The keyframes carry a theme
 * prefix and the effect classes are bound with .wow specificity because
 * Elementor's lib/animations/animations.min.css (loaded on pages whose data
 * requests an Elementor animation) defines the same effect names with 100%
 * travel and would otherwise win the cascade.
 *
 * No .wow { visibility: hidden } rule: production hides boxes inline from JS,
 * so content stays visible without JavaScript. Duration comes from .animated
 * (1s here, 1.25s where Elementor's frontend CSS is loaded, as on production).
 * Reduced motion is handled the way production handles it: Elementor's
 * @media (prefers-reduced-motion: reduce) .animated { animation: none }
 * zeroes the duration, so boxes appear without motion.
 *
 * EXTENSION POINT: add further effect classes here if editors pick them
 * from the Case Animate select (see catalysts_animate_options()).
 */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes catalystsFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.fadeIn,
.wow.fadeIn { animation-name: catalystsFadeIn; }

@keyframes catalystsFadeInUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fadeInUp,
.wow.fadeInUp { animation-name: catalystsFadeInUp; }

@keyframes catalystsFadeInDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fadeInDown,
.wow.fadeInDown { animation-name: catalystsFadeInDown; }

@keyframes catalystsFadeInLeft {
  0%   { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.fadeInLeft,
.wow.fadeInLeft { animation-name: catalystsFadeInLeft; }

@keyframes catalystsFadeInRight {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}
.fadeInRight,
.wow.fadeInRight { animation-name: catalystsFadeInRight; }

@keyframes catalystsZoomIn {
  0%  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
}
.zoomIn,
.wow.zoomIn { animation-name: catalystsZoomIn; }

/* Production's bounceInRight (Consultio animate.css 3.x, L596-L622): used by
   the ct_fancy_box layout16 boxes on the service singles ("wow bounceInRight").
   Values are production's: 2000px in, overshoot to -30px, settle via 10px. */
@keyframes catalystsBounceInRight {
  0%   { opacity: 0; transform: translateX(2000px); }
  60%  { opacity: 1; transform: translateX(-30px); }
  80%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}
.bounceInRight,
.wow.bounceInRight { animation-name: catalystsBounceInRight; }

/* Sticky header entrance, as production animates it (theme.css L614, used at L4843). */
@keyframes headerSlideDown {
  0%   { margin-top: -250px; }
  100% { margin-top: 0; }
}

/* Back-to-top arrow hover, as production animates it (theme.css L11893). */
@keyframes toTopFromBottom {
  49% { transform: translateY(-100%); }
  50% { opacity: 0; transform: translateY(100%); }
  51% { opacity: 1; }
}