/* android-motion.css - the moving parts of the Android phone (android-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 (shared axis, predictive back, container transform). */
.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; }

/* the touch ripple: a disc of the control's own text colour, kept to the
   control's shape */
.mo-ripple { inset: auto; }
.mo-ripple > i {
    position: absolute; display: block; border-radius: 50%;
    background: currentColor; opacity: .16;
}

/* Remove animations - the computer's setting: nothing moves */
html.reduce-motion .mo-ghost:not(.mo-ripple) { display: none; }
@media (prefers-reduced-motion: reduce) {
    .mo-ghost:not(.mo-ripple) { display: none; }
}