/* Finite, state-triggered CSS motion. No animation loop while menus are idle. */
@keyframes pa245-menu-enter {
  from { opacity: .25; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes pa245-ready-change {
  0% { scale: .96; border-color: #7cffd5; }
  45% { scale: 1.025; border-color: #ffd15c; }
  100% { scale: 1; }
}
@keyframes pa245-member-enter {
  from { opacity: .35; translate: 14px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes pa245-detail-enter {
  from { opacity: .4; translate: 8px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes pa245-result-enter {
  0% { opacity: .5; scale: .985; }
  50% { opacity: 1; border-color: #ffd15c; }
  100% { opacity: 1; scale: 1; }
}
body.pa245-motion #pa-lobby:not([hidden]).pa245-enter > div {
  animation: pa245-menu-enter 280ms cubic-bezier(.2,.75,.25,1) both;
}
body.pa245-motion #pa-heroes .pa243-detail.pa245-detail-enter {
  animation: pa245-detail-enter 220ms ease-out both !important;
}
body.pa245-motion #pa211-battle[data-active="true"].pa245-result-enter .pa211-panel,
body.pa245-motion :is(#pa-raid-result, #pa-lift-result):not([hidden]).pa245-result-enter > div {
  animation: pa245-result-enter 460ms ease-out both !important;
}
body.pa245-motion #pa188-shell[data-open="true"].pa245-enter #pa210-lobby,
body.pa245-motion #pa211-battle[data-active="true"].pa245-enter .pa211-hud,
body.pa245-motion :is(#pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-raid-prep):not([hidden]).pa245-enter > div {
  animation: pa245-menu-enter 280ms cubic-bezier(.2,.75,.25,1) both !important;
}
body.pa245-motion.pa210-expedition-lobby #pa188-shell[data-open="true"][data-page="match"] #pa210-lobby .pa210-slot.pa245-member-enter {
  animation: pa245-member-enter 260ms ease-out both !important;
}
body.pa245-motion.pa210-expedition-lobby #pa188-shell[data-open="true"][data-page="match"] #pa210-lobby .pa210-slot.pa245-ready-change {
  animation: pa245-ready-change 380ms ease-out both !important;
}
body.pa245-motion :is(#pa-lobby, #pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-lift-result, #pa-raid-prep, #pa-raid-result) button,
body.pa245-motion #pa188-shell[data-open="true"][data-page="match"] :is(.pa210-btn, .pa188-btn, .pa188-tab, .pa188-close),
body.pa245-motion #pa211-battle[data-active="true"] .pa211-btn {
  transition: translate 140ms ease-out, scale 100ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out !important;
}
@media (hover: hover) and (pointer: fine) {
  body.pa245-motion :is(#pa-lobby, #pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-lift-result, #pa-raid-prep, #pa-raid-result) button:not(:disabled):hover,
  body.pa245-motion #pa188-shell[data-open="true"][data-page="match"] :is(.pa210-btn, .pa188-btn, .pa188-tab, .pa188-close):not(:disabled):hover,
  body.pa245-motion #pa211-battle[data-active="true"] .pa211-btn:not(:disabled):hover {
    translate: 0 -2px;
    border-color: #ffd15c !important;
  }
}
body.pa245-motion :is(#pa-lobby, #pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-lift-result, #pa-raid-prep, #pa-raid-result, #pa188-shell, #pa211-battle) button:not(:disabled):active {
  translate: 0 1px;
  scale: .98;
}
body.pa245-motion :is(#pa-lobby, #pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-lift-result, #pa-raid-prep, #pa-raid-result, #pa188-shell, #pa211-battle) :is(button, input):focus-visible {
  outline: 2px solid #7cffd5 !important;
  outline-offset: 3px;
}
body.pa245-motion #pa188-shell[data-page="match"] button:disabled {
  cursor: not-allowed;
  translate: none !important;
  scale: none !important;
}
body.pa245-motion #pa211-battle .pa211-chip { transition: border-color 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  body.pa245-motion #pa-lobby:not([hidden]).pa245-enter > div,
  body.pa245-motion #pa-heroes .pa243-detail.pa245-detail-enter,
  body.pa245-motion #pa211-battle[data-active="true"].pa245-result-enter .pa211-panel,
  body.pa245-motion :is(#pa-raid-result, #pa-lift-result):not([hidden]).pa245-result-enter > div,
  body.pa245-motion #pa188-shell[data-open="true"].pa245-enter #pa210-lobby,
  body.pa245-motion #pa211-battle[data-active="true"].pa245-enter .pa211-hud,
  body.pa245-motion :is(#pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-raid-prep):not([hidden]).pa245-enter > div,
  body.pa245-motion.pa210-expedition-lobby #pa188-shell[data-open="true"][data-page="match"] #pa210-lobby .pa210-slot.pa245-member-enter,
  body.pa245-motion.pa210-expedition-lobby #pa188-shell[data-open="true"][data-page="match"] #pa210-lobby .pa210-slot.pa245-ready-change {
    animation: none !important;
  }
  body.pa245-motion :is(#pa-lobby, #pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-lift-result, #pa-raid-prep, #pa-raid-result, #pa188-shell, #pa211-battle),
  body.pa245-motion :is(#pa-lobby, #pa-book, #pa-warehouse, #pa-forge, #pa-heroes, #pa-lift, #pa-lift-result, #pa-raid-prep, #pa-raid-result, #pa188-shell, #pa211-battle) * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    translate: none !important;
    scale: none !important;
  }
}