/* Motion support for the physio clinic template.
   Everything here only applies once motion.js has added .js-motion, and
   motion.js never runs under prefers-reduced-motion. */

/* Photographs drift a little slower than the page and settle from a slight
   zoom as their scan passes (the media bleeds 7% so the drift never gaps). */
.js-motion .scan:not([data-bleed="0"]) .scan__media {
  transform: translate3d(0, calc(var(--par, 0) * 0.75%), 0) scale(var(--zoom, 1));
  will-change: transform;
}

/* The original hero figure was a live 3D model with an idle sway (about
   +/-11deg on an ~8s cycle, plus a breath). The template keeps the still
   render and gives it the same slow, bounded turn and breath. */
@keyframes mst-figure-sway {
  0%, 100% { transform: perspective(1600px) rotateY(-10deg) translateY(0) scale(1); }
  25%      { transform: perspective(1600px) rotateY(0deg) translateY(-3px) scale(1.008); }
  50%      { transform: perspective(1600px) rotateY(10deg) translateY(0) scale(1); }
  75%      { transform: perspective(1600px) rotateY(0deg) translateY(-3px) scale(1.008); }
}
.js-motion .bh__poster {
  transform-origin: 50% 70%;
  animation: mst-figure-sway 8.4s ease-in-out infinite;
  will-change: transform;
}

/* Reading-progress hairline sits just under the template preview bar. */
.js-motion [data-m-progress] { top: var(--mst-h, 38px); z-index: 60; }