/* Phone swipe pager (v1): a horizontal push slides the page content toward the next dock
   destination. The header and dock stay put; only main and footer move. New filename
   because hCDN pins names for a week. */

@media (max-width: 820px) {
  html, body { overflow-x: clip; }

  html.mtv-swipe-drag .mtv-main,
  html.mtv-swipe-drag .mtv-footer {
    transform: translate3d(var(--mtv-swipe-x, 0px), 0, 0);
    will-change: transform;
  }

  html.mtv-swipe-snap .mtv-main,
  html.mtv-swipe-snap .mtv-footer {
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
    transform: translate3d(0, 0, 0);
  }

  html.mtv-swipe-leaving .mtv-main,
  html.mtv-swipe-leaving .mtv-footer {
    transition: transform .2s cubic-bezier(.4, 0, 1, 1);
    transform: translate3d(var(--mtv-swipe-exit, -100vw), 0, 0);
    will-change: transform;
  }

  html.mtv-swipe-enter-next .mtv-main,
  html.mtv-swipe-enter-next .mtv-footer { animation: mtv-swipe-in-next .24s cubic-bezier(.22, .61, .36, 1) both; }
  html.mtv-swipe-enter-prev .mtv-main,
  html.mtv-swipe-enter-prev .mtv-footer { animation: mtv-swipe-in-prev .24s cubic-bezier(.22, .61, .36, 1) both; }

  @keyframes mtv-swipe-in-next {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
  }

  @keyframes mtv-swipe-in-prev {
    from { transform: translate3d(-100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  html.mtv-swipe-drag .mtv-main,
  html.mtv-swipe-drag .mtv-footer,
  html.mtv-swipe-snap .mtv-main,
  html.mtv-swipe-snap .mtv-footer,
  html.mtv-swipe-leaving .mtv-main,
  html.mtv-swipe-leaving .mtv-footer,
  html.mtv-swipe-enter-next .mtv-main,
  html.mtv-swipe-enter-next .mtv-footer,
  html.mtv-swipe-enter-prev .mtv-main,
  html.mtv-swipe-enter-prev .mtv-footer {
    animation: none;
    transition: none;
    transform: none;
  }
}