/* ios-motion.css - the moving parts of the iPhone (ios-motion.js plays them).

   The engine re-renders the whole screen on every change and gave each new
   page a little slide-in every time - even a switch flipped on the same page
   replayed it. The page now moves only when it really changes, and the
   script decides how (push, pop, open from the icon, close into it). */
.screen > .view.enter,
.screen > .view.enter.back { animation: none; }

/* copies of a screen that has just gone, shown for a moment while they leave;
   their content lives in a shadow root, so nothing in #screen changes for a
   script or a test - no second .view, no old text */
.mo-ghost {
    position: absolute; inset: 0;
    border-radius: inherit; overflow: hidden;
    pointer-events: none;
}
.mo-black { background: #000; }
.mo-dim { background: #000; opacity: 0; }

/* an icon darkens under the finger */
.screen .app.mo-press .ic { filter: brightness(.66); transition: filter .08s ease-out; }

/* the wallpaper sits a little deeper than the glass: it drifts against the
   tilt of the phone (ios-motion.js turns --rx / --ry into --mo-wx / --mo-wy) */
.screen > .wall {
    transform: translate3d(var(--mo-wx, 0px), var(--mo-wy, 0px), 0) scale(1.08);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* Reduce Motion - the phone's own setting or the computer's: nothing moves */
html.reduce-motion .screen > .wall { transform: none; transition: none; }
html.reduce-motion .mo-ghost { display: none; }
@media (prefers-reduced-motion: reduce) {
    .screen > .wall { transform: none; transition: none; }
    .mo-ghost { display: none; }
}