/* Timings, curves and geometry vocabulary from the existing Web Motion engine.
   Keyframes themselves live in the verbatim vendor stylesheet. */
.motion-element {
  transform-origin: 0 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.scene[data-motion-phase="exiting"][data-motion-direction="forward"] .motion-element {
  animation: metroExitForward 168ms cubic-bezier(.45, 0, .78, .08) both;
}
.scene[data-motion-phase="exiting"][data-motion-direction="back"] .motion-element {
  animation: metroExitBack 168ms cubic-bezier(.45, 0, .78, .08) both;
}
.scene[data-motion-phase="entering"][data-motion-direction="forward"] .motion-element {
  animation: metroEnterForward 420ms cubic-bezier(.16, .84, .24, 1) both;
}
.scene[data-motion-phase="entering"][data-motion-direction="back"] .motion-element {
  animation: metroEnterBack 420ms cubic-bezier(.16, .84, .24, 1) both;
}
.scene[data-motion-phase][data-motion-direction] .motion-element { animation-delay: var(--tile-stagger, 0ms); }
.app-stage[data-motion-phase="swapping"] .scene { visibility: hidden; }
.app-stage[data-motion-phase="entering"] .motion-element,
.app-stage[data-motion-phase="exiting"] .motion-element { transition: none; }

/* Owner-requested exception: Start and All Apps are adjacent shell surfaces. */
.scene[data-shell-slide] {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.16, .84, .24, 1);
  animation-fill-mode: both;
  will-change: transform;
}
.scene[data-shell-direction="forward"][data-shell-slide="out"] { animation-name: wpShellForwardOut; }
.scene[data-shell-direction="forward"][data-shell-slide="in"] { animation-name: wpShellForwardIn; }
.scene[data-shell-direction="back"][data-shell-slide="out"] { animation-name: wpShellBackOut; }
.scene[data-shell-direction="back"][data-shell-slide="in"] { animation-name: wpShellBackIn; }
@keyframes wpShellForwardOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes wpShellForwardIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes wpShellBackOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes wpShellBackIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }