/* V1.102: one restrained local entrance per major app scene, never per poll/render. */
html body:not(.maintenance-mode) #appRoot.view-scene-enter > #roomLobby:not([hidden]),
html body:not(.maintenance-mode) #appRoot.view-scene-enter > #identitySelect:not([hidden]),
html body:not(.maintenance-mode) #appRoot.view-scene-enter > #characterSelect:not([hidden]),
html body:not(.maintenance-mode) #appRoot.view-scene-enter > #battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.view-scene-enter > #sidePanel:not([hidden]) {
  animation: view-scene-panel-enter 480ms cubic-bezier(.16, .82, .24, 1) both;
  transform-origin: 50% 12%;
  will-change: opacity, transform;
}

html body:not(.maintenance-mode) #appRoot.view-scene-enter[data-view-transition-to="battle"] > #battle:not([hidden]) {
  animation-duration: 560ms;
}

html body:not(.maintenance-mode) #appRoot.view-scene-enter[data-view-transition-to="battle"] > #sidePanel:not([hidden]) {
  animation-delay: 70ms;
  animation-duration: 500ms;
}

@keyframes view-scene-panel-enter {
  0% { opacity: 0; transform: translateY(12px) scale(.992); }
  58% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

body[data-vfx-quality="low"] #appRoot.view-scene-enter > #roomLobby:not([hidden]),
body[data-vfx-quality="low"] #appRoot.view-scene-enter > #identitySelect:not([hidden]),
body[data-vfx-quality="low"] #appRoot.view-scene-enter > #characterSelect:not([hidden]),
body[data-vfx-quality="low"] #appRoot.view-scene-enter > #battle:not([hidden]),
body[data-vfx-quality="low"] #appRoot.view-scene-enter > #sidePanel:not([hidden]) {
  animation-duration: 240ms;
  transform: none;
  will-change: opacity;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.view-scene-enter > #sidePanel:not([hidden]) {
    animation-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #appRoot.view-scene-enter > #roomLobby:not([hidden]),
  html body:not(.maintenance-mode) #appRoot.view-scene-enter > #identitySelect:not([hidden]),
  html body:not(.maintenance-mode) #appRoot.view-scene-enter > #characterSelect:not([hidden]),
  html body:not(.maintenance-mode) #appRoot.view-scene-enter > #battle:not([hidden]),
  html body:not(.maintenance-mode) #appRoot.view-scene-enter > #sidePanel:not([hidden]) {
    animation: none !important;
    transform: none !important;
  }
}