/* motion.css: shared by the Sysenta sites and Outsource Hub (pairs with motion.js). Vanilla, no library.
   Nothing in this file hides content. Every keyframe animation is scoped under html.mo (set before paint
   only when motion is allowed), runs on elements motion.js has marked .in, and ends visible (fill: backwards, so the
   element falls back to its own, visible style when the animation is over and hover effects still work).
   Under prefers-reduced-motion html.mo is never set, and the block at the end switches the rest off. */
/* round 2: the timings and shadows come from tokens.css (the fallbacks are the same values) */
:root{--mo-ease:var(--sx-ease-out,cubic-bezier(.2,.7,.2,1));--mo-d1:var(--sx-d1,150ms);--mo-d2:var(--sx-d2,240ms);--mo-d3:var(--sx-d3,520ms);
  --mo-sh2:var(--sx-sh2,0 8px 24px -8px rgba(16,24,40,.18));--mo-sh3:var(--sx-sh3,0 24px 48px -16px rgba(16,24,40,.28))}

/* M1: reveal on scroll (the element, or a group's children with a 60ms stagger, capped at 6) */
@keyframes mo-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mo [data-reveal].in,.mo [data-reveal-group].in>*{animation:mo-rise var(--mo-d3) var(--mo-ease) backwards;animation-delay:calc(var(--i,0) * 60ms)}

/* M2: hover lift on buttons and cards (pointer devices only); press feedback on touch */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn{transition:transform var(--mo-d1) var(--mo-ease),box-shadow var(--mo-d1) var(--mo-ease),background-color var(--mo-d1),border-color var(--mo-d1),color var(--mo-d1)}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--mo-sh2)}
  .btn:active{transform:translateY(0);box-shadow:none}
  [data-lift]{transition:transform var(--mo-d2) var(--mo-ease),box-shadow var(--mo-d2) var(--mo-ease),border-color var(--mo-d2)}
  [data-lift]:hover{transform:translateY(-4px);box-shadow:var(--mo-sh2)}
}
@media (hover:none),(pointer:coarse){
  .btn:active,[data-lift]:active{transform:scale(.97);transition:transform 90ms}
}

/* M3: counters keep their box while the digits change */
[data-count]{display:inline-block;font-variant-numeric:tabular-nums}

/* M5: smooth anchors that stop below the sticky header */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:var(--anchor-gap,80px)}

/* M7 (round 2): moving between pages of the same site cross-fades instead of flashing white (browsers that
   support cross-document view transitions; others simply load the page). Off under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--mo-d2);animation-timing-function:var(--mo-ease)}
}

/* loops pause while off screen (motion.js sets .is-off) */
.mo [data-pause].is-off,.mo [data-pause].is-off *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}