/* Shared motion kit for the premium pages (pricing.php, team.php). Driven by assets/js/page-motion.js.
   Content is always visible without JavaScript: the hidden "armed" states only apply once the page has added the
   .pm class to <html>, and they are switched off entirely for people who ask for reduced motion. */
:root{--pm-expo:cubic-bezier(.16,1,.3,1); --pm-ease:cubic-bezier(.22,.8,.24,1)}

/* headline words */
.pm-w{display:inline-block; overflow:hidden; vertical-align:top; padding:.06em .02em .12em; margin:-.06em -.02em -.12em}
.pm-w>span{display:inline-block; transition:transform 1.05s var(--pm-expo); transition-delay:calc(var(--i)*70ms + var(--d,0)*1ms + 120ms)}
.pm [data-split]:not(.in) .pm-w>span{transform:translateY(118%)}

/* reveals: put data-in on a wrapper, never on an element that has its own transition */
[data-in]{transition:opacity .9s var(--pm-expo),transform 1s var(--pm-expo),clip-path 1.15s var(--pm-expo); transition-delay:calc(var(--d,0)*1ms)}
.pm [data-in]:not([data-in="split"]):not([data-in="clip"]):not([data-in="clipup"]):not(.in){opacity:0}
.pm [data-in="up"]:not(.in){transform:translateY(54px)}
.pm [data-in="down"]:not(.in){transform:translateY(-40px)}
.pm [data-in="left"]:not(.in){transform:translateX(-70px)}
.pm [data-in="right"]:not(.in){transform:translateX(70px)}
.pm [data-in="zoom"]:not(.in){transform:scale(.84)}
.pm [data-in="flip"]:not(.in){transform:perspective(900px) rotateX(36deg) translateY(44px); transform-origin:50% 100%}
[data-in="clip"],[data-in="clipup"]{clip-path:inset(0 0 0 0)}
.pm [data-in="clip"]:not(.in){clip-path:inset(0 100% 0 0)}
.pm [data-in="clipup"]:not(.in){clip-path:inset(100% 0 0 0)}

/* sentences that light up word by word as you scroll */
.pm-sw{opacity:.2; transition:opacity .35s}
.pm-sw.on{opacity:1}

/* parallax: the element carries data-prog (sets --p) and data-par (distance) */
[data-par]{transform:translateY(calc((var(--p,.5) - .5) * var(--par,60px))); will-change:transform}
[data-mag],[data-tilt]{will-change:transform}

/* icons that draw themselves */
svg.pm-draw{stroke-dasharray:1; stroke-dashoffset:0}
.pm [data-in]:not(.in) svg.pm-draw{stroke-dashoffset:1}
@keyframes pm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
[data-in].in svg.pm-draw{animation:pm-draw 1.5s var(--pm-expo) .3s both}

/* running ticker */
@keyframes pm-mq{to{transform:translateX(-50%)}}
.pm-mq{overflow:hidden; white-space:nowrap}
.pm-mq>div{display:inline-flex; animation:pm-mq 32s linear infinite}

@media (prefers-reduced-motion: reduce){
  .pm [data-in]:not(.in){opacity:1!important; transform:none!important; clip-path:none!important}
  .pm [data-split]:not(.in) .pm-w>span{transform:none}
  .pm-mq>div{animation:none}
  .pm-sw{opacity:1}
  [data-par]{transform:none}
}