/*
 * The map's existing modal-ui-open and Vue transition classes retain ownership
 * of visibility, translate, inert and pointer-events. Only their timing changes.
 * Keeping native CSS transitions also permits reversal from the current frame
 * when a visitor quickly opens and closes a window.
 */
@media (prefers-reduced-motion: no-preference) {
  html[data-mobile-ios-motion="v1"] .sim-column .screen :is(
    .side-menu-container, .float-dock, .mobile-announcement-stack,
    .navigationTip, .pc-map-qr, .weather-bar-overlay,
    .play-assistant-bar, .clear-screen-back-but
  ) {
    transition:
      opacity 380ms ease-out var(--map-control-delay, 0s),
      translate 560ms cubic-bezier(.25, .7, .25, 1) var(--map-control-delay, 0s),
      visibility 0s linear 0s;
  }

  html[data-mobile-ios-motion="v1"] .sim-column .screen.modal-ui-open :is(
    .side-menu-container, .float-dock, .mobile-announcement-stack,
    .navigationTip, .pc-map-qr, .weather-bar-overlay,
    .play-assistant-bar, .clear-screen-back-but
  ),
  html[data-mobile-ios-motion="v1"] .sim-column .screen:not(.ui-ready) :is(
    .side-menu-container, .float-dock, .mobile-announcement-stack,
    .navigationTip, .pc-map-qr, .weather-bar-overlay,
    .play-assistant-bar, .clear-screen-back-but
  ),
  html[data-mobile-ios-motion="v1"] .sim-column .screen :is(
    .map-chrome-side-enter-from, .map-chrome-side-leave-to,
    .map-chrome-dock-enter-from, .map-chrome-dock-leave-to,
    .map-notice-enter-from, .map-notice-leave-to
  ) {
    transition:
      opacity 460ms ease-in 20ms,
      translate 520ms cubic-bezier(.32, 0, .4, 1),
      visibility 0s linear 520ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-mobile-ios-motion="v1"] .sim-column .screen :is(
    .side-menu-container, .float-dock, .mobile-announcement-stack,
    .navigationTip, .pc-map-qr, .weather-bar-overlay,
    .play-assistant-bar, .clear-screen-back-but,
    .map-chrome-side-enter-from, .map-chrome-side-leave-to,
    .map-chrome-dock-enter-from, .map-chrome-dock-leave-to,
    .map-notice-enter-from, .map-notice-leave-to
  ) {
    transition: none !important;
  }
}