/* Animation only: hiding the controls never changes the model viewport. */
.viewport > .slice-control {
  translate: 0 0;
  transition: opacity .68s ease, visibility 0s, translate .68s cubic-bezier(.22,.68,.26,1),
    bottom .8s cubic-bezier(.22,.68,.26,1), background .3s ease;
}

.mobile-floor-dock {
  transition: opacity .68s ease, visibility 0s, transform .68s cubic-bezier(.22,.68,.26,1);
}

.viewport-status,
.navigation-hint {
  translate: 0 0;
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.68,.26,1),
    visibility 0s, translate .68s cubic-bezier(.22,.68,.26,1);
}

body.presentation-mode.bottom-bar-hidden .viewport > .slice-control {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 18px;
  transition-delay: 0s, .68s, 0s, 0s, 0s;
}

body.presentation-mode.bottom-bar-hidden.mobile-floor-layout #mobile-floor-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition-delay: 0s, .68s, 0s;
}

body.presentation-mode .viewport-status,
body.presentation-mode .navigation-hint {
  transition-delay: 0s, 0s, .8s, 0s;
}

body.presentation-mode.bottom-bar-hidden .viewport-status,
body.presentation-mode.bottom-bar-hidden .navigation-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 18px;
}

@media (prefers-reduced-motion: reduce) {
  .viewport > .slice-control {
    transition-duration: .68s, 0s, .68s, .8s, .3s !important;
  }
  .mobile-floor-dock {
    transition-duration: .68s, 0s, .68s !important;
  }
  .viewport-status, .navigation-hint {
    transition-duration: .8s, .8s, 0s, .68s !important;
  }
  body.presentation-mode.bottom-bar-hidden .viewport > .slice-control,
  body.presentation-mode.bottom-bar-hidden.mobile-floor-layout #mobile-floor-dock {
    transition-delay: 0s, .68s, 0s, 0s, 0s;
  }
  body.presentation-mode .viewport-status,
  body.presentation-mode .navigation-hint {
    transition-delay: 0s, 0s, .8s, 0s;
  }
}