/* ============================================================
   Motion refinement — expertreputation mirror
   Loaded last, so it wins on source order at equal specificity.
   Selectors deliberately mirror the theme's own, so nothing
   relies on !important except the reduced-motion guard.

   Fixes three problems in the stock setup:
     1. Entrance travel was 100-500px, so elements flew in.
     2. Transform ran .45-1s while opacity ran .25s, so things
        finished fading before they finished moving.
     3. Two easing curves + a full animate.css library competed.
   ============================================================ */

:root{
  --mo-ease: cubic-bezier(.16, 1, .3, 1);   /* expo-out, no overshoot */
  --mo-dur: .55s;
  --mo-rise: 16px;
  --mo-shift: 22px;
}

/* --- 1. one duration + one easing, transform and opacity matched --- */
.wd-animation{
  --wd-anim-duration: var(--mo-dur);
  --wd-anim-timing-f: var(--mo-ease);
  --wd-anim-opa-timing-f: var(--mo-ease);
  --wd-trans-main: all .2s var(--mo-ease);
  --wd-trans-last:
    transform var(--wd-anim-duration) var(--wd-anim-timing-f) var(--wd-anim-delay),
    opacity   var(--wd-anim-duration) var(--wd-anim-opa-timing-f) var(--wd-anim-delay);
}
.wd-animation.wd-animated{ --wd-anim-duration: var(--mo-dur); }
.wd-animation-default.wd-animation-ready.wd-animated{ --wd-anim-timing-f: var(--mo-ease); }

/* --- 2. short, confident travel instead of long swoops --- */
.wd-animation-slide-from-bottom.wd-animation-ready:not(.wd-in){ --wd-transform-translateY: var(--mo-rise); }
.wd-animation-slide-from-top.wd-animation-ready:not(.wd-in){    --wd-transform-translateY: calc(-1 * var(--mo-rise)); }
.wd-animation-slide-from-left.wd-animation-ready:not(.wd-in){   --wd-transform-translateX: calc(-1 * var(--mo-shift)); }
.wd-animation-slide-from-right.wd-animation-ready:not(.wd-in){  --wd-transform-translateX: var(--mo-shift); }
.wd-animation-slide-short-from-left.wd-animation-ready:not(.wd-in){  --wd-transform-translateX: calc(-1 * var(--mo-shift)); }
.wd-animation-slide-short-from-right.wd-animation-ready:not(.wd-in){ --wd-transform-translateX: var(--mo-shift); }
.wd-animation-default.wd-animation-ready:not(.wd-in){ --wd-transform-translateX: calc(-1 * var(--mo-shift)); }
.wd-animation-default.wd-animation-ready.wd-out{      --wd-transform-translateX: var(--mo-shift); }

/* --- 3. retire the 90deg flips: they read as gimmicky at scale --- */
.wd-animation-bottom-flip-x.wd-animation-ready:not(.wd-in),
.wd-animation-top-flip-x.wd-animation-ready:not(.wd-in),
.wd-animation-left-flip-y.wd-animation-ready:not(.wd-in),
.wd-animation-right-flip-y.wd-animation-ready:not(.wd-in){
  --wd-transform-perspective: 0;
  --wd-transform-rotateX: 0; --wd-transform-rotateY: 0;
  --wd-transform-scaleX: .985; --wd-transform-scaleY: .985;
  --wd-transform-translateX: 0; --wd-transform-translateY: var(--mo-rise);
}
/* zoom: .6 was a lurch; .97 reads as a settle */
.wd-animation-zoom-in.wd-animation-ready:not(.wd-in){
  --wd-transform-scaleX: .97; --wd-transform-scaleY: .97;
}

/* --- 4. bring WPBakery's animate.css onto the same language --- */
.wpb_animate_when_almost_visible{
  animation-duration: var(--mo-dur);
  animation-timing-function: var(--mo-ease);
  animation-fill-mode: both;
}
/* redefined after the vendor copy, so these win */
@keyframes fadeIn   { from{ opacity:0 }                                    to{ opacity:1 } }
@keyframes fadeInUp { from{ opacity:0; transform:translate3d(0,16px,0) }   to{ opacity:1; transform:none } }
@keyframes fadeInDown{from{ opacity:0; transform:translate3d(0,-16px,0) }  to{ opacity:1; transform:none } }
@keyframes fadeInLeft{from{ opacity:0; transform:translate3d(-22px,0,0) }  to{ opacity:1; transform:none } }
@keyframes fadeInRight{from{opacity:0; transform:translate3d(22px,0,0) }   to{ opacity:1; transform:none } }

/* --- 5. image lazy-fade: was a second, unsynced fade layer --- */
.wd-lazy-fade img,
img.wd-lazy-fade{ transition: opacity .4s var(--mo-ease); }

/* --- 6. hover/UI motion: quick and uniform, never bouncy --- */
a, button, .btn, .wd-buttons, .wd-hover-base,
.wd-nav > li > a, .whb-general-header a{
  transition-timing-function: var(--mo-ease);
}

/* --- 7. accessibility: honour the OS setting --- */
@media (prefers-reduced-motion: reduce){
  .wd-animation, .wpb_animate_when_almost_visible, .wd-lazy-fade img{
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
