/* OM Group — global motion system. Only transform + opacity animate. Everything is gated on html.m-js, which the engine sets only
   after it has tagged the page, so content is never hidden without JavaScript or for visitors who prefer reduced motion. */
@media (prefers-reduced-motion:no-preference){
  :root{--m-ease:cubic-bezier(.22,1,.36,1);--m-y:1;--m-s:1}
  @media (max-width:640px){:root{--m-y:.68;--m-s:.82}}

  .m-js [data-m]{opacity:0;transition:opacity calc(var(--dur,.7s) * var(--m-s)) var(--m-ease) var(--md,0ms),transform calc(var(--dur,.7s) * var(--m-s)) var(--m-ease) var(--md,0ms)}
  .m-js [data-m=label]{--dur:.6s;transform:translate3d(calc(-12px * var(--m-y)),0,0)}
  .m-js [data-m=head]{--dur:.9s;transform:translate3d(0,calc(26px * var(--m-y)),0)}
  .m-js [data-m=para]{--dur:.75s;transform:translate3d(0,calc(18px * var(--m-y)),0)}
  .m-js [data-m=card]{--dur:.85s;transform:translate3d(0,calc(26px * var(--m-y)),0)}
  .m-js [data-m=img]{--dur:1.05s;transform:translate3d(0,calc(16px * var(--m-y)),0) scale(1.045)}
  .m-js [data-m=line]{--dur:.9s;opacity:1;transform:scaleX(0);transform-origin:left center}
  .m-js [data-m=frame]{opacity:1}
  .m-js [data-m].m-in{opacity:1;transform:none}
  .m-js [data-m].m-now{transition:none}

  /* headings: words rise one after another; the heading element itself stays put (no clipping of italics or descenders) */
  .m-js [data-m=head].m-split{opacity:1;transform:none}
  .m-js .m-split .m-w{display:inline-block;opacity:0;transform:translate3d(0,calc(.5em * var(--m-y)),0);transition:opacity .8s var(--m-ease) calc(var(--md,0ms) + var(--wi,0) * 55ms),transform .9s var(--m-ease) calc(var(--md,0ms) + var(--wi,0) * 55ms)}
  .m-js .m-split.m-in .m-w{opacity:1;transform:none}
  .m-js .m-split.m-now .m-w{transition:none}

  /* a ruled divider that draws itself (the process intro's answer block) */
  .m-js .pst-answer[data-m=frame]{border-top-color:transparent;position:relative}
  .m-js .pst-answer[data-m=frame]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--m-ease) var(--md,0ms)}
  .m-js .pst-answer[data-m=frame].m-in::before{transform:none}

  /* exit: barely-there. Readable text only dims a little and moves a few pixels in the direction of travel */
  .m-js [data-m].m-in.m-out-u,.m-js [data-m].m-in.m-out-d{transition-duration:.55s;transition-delay:0s}
  .m-js [data-m=head].m-in.m-out-u,.m-js [data-m=label].m-in.m-out-u,.m-js [data-m=img].m-in.m-out-u{opacity:.55;transform:translate3d(0,-9px,0)}
  .m-js [data-m=head].m-in.m-out-d,.m-js [data-m=label].m-in.m-out-d,.m-js [data-m=img].m-in.m-out-d{opacity:.55;transform:translate3d(0,9px,0)}
  .m-js [data-m=para].m-in.m-out-u{opacity:.72;transform:translate3d(0,-6px,0)}
  .m-js [data-m=para].m-in.m-out-d{opacity:.72;transform:translate3d(0,6px,0)}
  .m-js [data-m=line].m-in.m-out-u,.m-js [data-m=line].m-in.m-out-d{opacity:.35}
  /* inner pages keep their own entrance; they gain only this exit */
  .fade-up.in.m-out-u{opacity:.6;transform:translate3d(0,-8px,0);transition-duration:.55s}
  .fade-up.in.m-out-d{opacity:.6;transform:translate3d(0,8px,0);transition-duration:.55s}
}
@media (hover:hover){
  .btn{transition-property:background,color,border-color,box-shadow,transform}
  .btn:hover{transform:translate3d(0,-2px,0)}
}

/* ---------- Products on phones: fade in on entry, fade out on exit. Opacity only: nothing slides, wipes or zooms. ---------- */
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  /* the section's headings and copy also fade without travelling */
  .m-js #products [data-m]{transform:none}
  .m-js #products [data-m].m-in.m-out-u,.m-js #products [data-m].m-in.m-out-d{transform:none;opacity:.35}
  .m-js #products .m-split .m-w{transform:none}
  .m-js #products .sec-head .m-w{transition:opacity 1s ease calc(var(--md,0ms) + var(--wi,0) * 45ms)}

  .m-js .ps-card.pc-fade{opacity:0;transition:opacity 1s ease}
  .m-js .ps-card.pc-fade .ps-card-media,.m-js .ps-card.pc-fade .ps-card-body h3,.m-js .ps-card.pc-fade .ps-card-body p,.m-js .ps-card.pc-fade .ps-card-foot{opacity:0;transition:opacity .9s ease}
  .m-js .ps-card.pc-fade.pc-show{opacity:1}
  .m-js .ps-card.pc-fade.pc-show .ps-card-media{opacity:1;transition-delay:.1s}
  .m-js .ps-card.pc-fade.pc-show .ps-card-body h3{opacity:1;transition-delay:.35s}
  .m-js .ps-card.pc-fade.pc-show .ps-card-body p{opacity:1;transition-delay:.5s}
  .m-js .ps-card.pc-fade.pc-show .ps-card-foot{opacity:1;transition-delay:.65s}
  /* leaving: everything eases out together, quickly and without delay */
  .m-js .ps-card.pc-fade:not(.pc-show){transition-duration:.7s}
  .m-js .ps-card.pc-fade:not(.pc-show) .ps-card-media,.m-js .ps-card.pc-fade:not(.pc-show) .ps-card-body h3,.m-js .ps-card.pc-fade:not(.pc-show) .ps-card-body p,.m-js .ps-card.pc-fade:not(.pc-show) .ps-card-foot{transition-delay:0s;transition-duration:.6s}

  /* opening a category: items simply fade in one after another */
  @keyframes psFade{from{opacity:0}to{opacity:1}}
  .ps-panel-wrap.open .ps-panel-head{animation:psFade .8s ease .15s both}
  .ps-panel-wrap.open .ps-item,.ps-panel-wrap.open .ps-grade,.ps-panel-wrap.open .ps-chart-card{animation:psFade .9s ease both}
  .ps-panel-wrap.open .ps-items > :nth-child(1){animation-delay:.28s}
  .ps-panel-wrap.open .ps-items > :nth-child(2){animation-delay:.38s}
  .ps-panel-wrap.open .ps-items > :nth-child(3){animation-delay:.48s}
  .ps-panel-wrap.open .ps-items > :nth-child(4){animation-delay:.58s}
  .ps-panel-wrap.open .ps-items > :nth-child(n+5){animation-delay:.68s}
}

/* paragraphs that reveal word by word (hero statement, About copy): a short, soft fade-rise per word */
@media (prefers-reduced-motion:no-preference){
  .rv-soft .rv-w{transform:translate3d(0,9px,0);transition-duration:.9s}
  .rv-in .rv-soft .rv-w,.rv-in .rv-soft.rv-w{transform:none}
}