/* Phone motion layer: headlines wipe up, text and cards rise in, photos settle, a reading line under the header.
   Only at phone width with motion allowed, and only once mobile-motion.js has marked the page (html.mm), so nothing is hidden without it. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .mm .mm-r { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s cubic-bezier(.16, 1, .3, 1) var(--mm-d, 0ms), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--mm-d, 0ms); }
  .mm .mm-r.mm-in { opacity: 1; transform: none; }

  .mm .mm-h { clip-path: inset(0 0 100% 0); transform: translate3d(0, 34px, 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1) var(--mm-d, 0ms), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--mm-d, 0ms); }
  .mm .mm-h.mm-in { clip-path: inset(0 0 -12% 0); transform: none; }

  .mm .mm-img { overflow: hidden; }
  .mm .mm-img > img, .mm .mm-img > video, .mm .mm-img > picture { transform: scale(var(--mm-s, 1.14)) translate3d(0, var(--mm-y, 0px), 0); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
  .mm .mm-img.mm-in > img, .mm .mm-img.mm-in > video, .mm .mm-img.mm-in > picture { --mm-s: 1.04; transition: transform .2s linear; }

  .mm-bar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 9999; pointer-events: none; background: oklch(0.6 0.244 358.6); transform-origin: 0 50%; transform: scaleX(var(--mm-p, 0)); box-shadow: 0 0 10px oklch(0.6 0.244 358.6 / .6); }

  .mm a, .mm button, .mm [role="button"] { -webkit-tap-highlight-color: transparent; }
  .mm a:active, .mm button:active { transform: scale(.97); transition: transform .12s ease-out; }
}