/*
 * NSM motion primitives
 * One restrained scale response for editorial content groups.
 * Tune each use with custom properties instead of creating another animation.
 */
html [data-nsm-motion="scale"] {
  transform-origin: var(--nsm-motion-origin, center);
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  html [data-nsm-motion="scale"] {
    transition: transform 280ms cubic-bezier(.22, .72, .2, 1);
  }

  html [data-nsm-motion="scale"]:hover,
  html [data-nsm-motion="scale"]:focus-within,
  html [data-nsm-motion="scale"][data-nsm-motion-state="active"] {
    transform: translate3d(0, var(--nsm-motion-y, -2px), 0) scale(var(--nsm-motion-scale, 1.016));
  }
}

@media (prefers-reduced-motion: reduce) {
  html [data-nsm-motion="scale"],
  html [data-nsm-motion="scale"]:hover,
  html [data-nsm-motion="scale"]:focus-within,
  html [data-nsm-motion="scale"][data-nsm-motion-state="active"] {
    transition: none !important;
    transform: none !important;
  }
}