html.cv-fixed-mobile-viewport,
html.cv-fixed-mobile-viewport body {
  touch-action: pan-x pan-y;
}

/* Keep the approved effects, but only animate cards that can actually be seen. */
#taskGrid.cv-task-motion-managed .cv-tool-card-media:not(.is-motion-visible),
#taskGrid.cv-task-motion-managed .cv-tool-card-media:not(.is-motion-visible)::before,
#taskGrid.cv-task-motion-managed .cv-tool-card-media:not(.is-motion-visible)::after,
#taskGrid.cv-task-motion-managed .cv-tool-card-media:not(.is-motion-visible) *,
#taskGrid.cv-task-motion-managed .cv-tool-card-media:not(.is-motion-visible) *::before,
#taskGrid.cv-task-motion-managed .cv-tool-card-media:not(.is-motion-visible) *::after {
  animation-play-state: paused !important;
}

/* Panning is composited; continuously changing image filters requires repainting. */
html.cv-mobile-editorial #taskGrid .cv-tool-showcase-frame.active img,
html.cv-mobile-editorial #taskGrid .cv-tool-showcase-frame.active video {
  animation-name: cvMobileShowcasePan !important;
  filter: none !important;
}
@keyframes cvMobileShowcasePan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.115) translate3d(-1.4%, -1.1%, 0); }
}

html.cv-mobile-editorial:not(.cv-desktop-mode) .cv-ms-jump,
html.cv-mobile-editorial:not(.cv-desktop-mode) body:not(.welcome-open) .bottom-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.cv-mobile-editorial #taskGrid .cv-tool-card-media,
  html.cv-mobile-editorial #taskGrid .cv-tool-card-media *,
  html.cv-mobile-editorial #taskGrid .cv-tool-card-media::before,
  html.cv-mobile-editorial #taskGrid .cv-tool-card-media::after {
    animation: none !important;
  }
}