.navigation-demo .route-tap { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.navigation-demo .route-tap rect { fill: #11110f; fill-opacity: .04; stroke: #d6d4ce; stroke-width: 2; }
.navigation-demo .google-splash { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; opacity: 0; transform: translateX(5%); transition: opacity 450ms ease, transform 450ms cubic-bezier(.22,.75,.18,1); }
.navigation-demo .google-logo { width: 26%; height: auto; }
.navigation-demo .google-splash::after { content: ''; position: absolute; bottom: .9%; left: 32%; width: 36%; height: .45%; border-radius: 999px; background: #11110f; }
.navigation-demo[data-navigation="google"] .google-splash { opacity: 1; transform: translateX(0); }
.navigation-demo .live-phone::before { transition: background-color 450ms ease; }
.navigation-demo[data-navigation="google"] .live-phone::before { background: #fff; }
.navigation-demo .live-phone { transform: translateY(0) scale(1); transform-origin: center; transition: transform 1100ms cubic-bezier(.22,.75,.18,1); will-change: transform; }
.navigation-demo.is-zoomed .live-phone { transform: translateY(-32.5%) scale(1.65); }
@media (prefers-reduced-motion: no-preference) {
  .navigation-demo.is-tapping .route-tap { animation: navigation-tap 750ms ease-out; }
  @keyframes navigation-tap { 0%, 100% { opacity: 0; } 25%, 65% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .navigation-demo .google-splash, .navigation-demo .live-phone::before, .navigation-demo .live-phone { transition: none; }
  .navigation-demo.is-zoomed .live-phone { transform: none; }
}