/* Xbox motion pass. Weight comes from momentum, stagger, and depth rather
   than expensive layout animation. Transform and opacity keep it smooth. */
:root{
  --x-motion-spring:cubic-bezier(.16,1,.3,1);
  --x-motion-heavy:cubic-bezier(.2,.88,.2,1);
  --x-motion-snap:cubic-bezier(.34,1.56,.64,1);
}

html.xbox-motion-ready .stage.xbox-motion-stage{
  animation:xboxStageIn .8s var(--x-motion-heavy) both;
}
@keyframes xboxStageIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready .xbox-view-enter{
  animation:xboxViewIn .34s ease-out both;
}
@keyframes xboxViewIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready .xbox-item-enter{
  animation:xboxItemIn .24s ease-out both;
  animation-delay:calc(var(--x-motion-index,0) * 12ms);
}
@keyframes xboxItemIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready [data-nav],
html.xbox-motion-ready button,
html.xbox-motion-ready .store-game,
html.xbox-motion-ready .console-poster{
  transition:
    opacity .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .24s ease!important;
  backface-visibility:hidden;
}

html.xbox-motion-ready .focus-ring{
  transition:
    top .3s var(--x-motion-spring),
    left .3s var(--x-motion-spring),
    width .3s var(--x-motion-spring),
    height .3s var(--x-motion-spring),
    border-radius .3s var(--x-motion-spring),
    opacity .15s linear!important;
}

html.xbox-motion-ready .backdrop-layer{
  transition:opacity 1.05s ease,transform 13s linear!important;
  will-change:opacity,transform;
}
html.xbox-motion-ready .backdrop-scrim{
  transition:background .7s ease,opacity .7s ease;
}

html.xbox-motion-ready .home-game-preview-card,
html.xbox-motion-ready .detail-card,
html.xbox-motion-ready .modal-card,
html.xbox-motion-ready .guide-panel,
html.xbox-motion-ready .time-drawer{
  animation:xboxPanelIn .28s ease-out both!important;
}
@keyframes xboxPanelIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready .guide:not([hidden]) .guide-panel{
  animation-name:xboxGuideIn!important;
}
@keyframes xboxGuideIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready .launch:not([hidden]) .launch-center{
  animation:xboxConnectIn .3s ease-out both;
}
@keyframes xboxConnectIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready .player.cloud-player:not([hidden]){
  animation:xboxPlayerIn .24s ease-out both;
}
@keyframes xboxPlayerIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

html.xbox-motion-ready .toast{
  animation:xboxToastIn .48s var(--x-motion-spring) both!important;
}
@keyframes xboxToastIn{
  from{ opacity:0; transform:translate3d(4rem,0,0) scale(.9); }
  to{ opacity:1; transform:none; }
}

html.xbox-motion-ready .stage.xbox-motion-stage .sysnav-btn,
html.xbox-motion-ready .stage.xbox-motion-stage .profile,
html.xbox-motion-ready .stage.xbox-motion-stage .sysstatus > *{
  animation:xboxChromeDrop .62s var(--x-motion-spring) both;
  animation-delay:calc(var(--x-motion-index,0) * 34ms);
}
@keyframes xboxChromeDrop{
  from{ opacity:0; transform:translate3d(0,-2.5rem,0) scale(.9); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html.xbox-motion-ready *,
  html.xbox-motion-ready *::before,
  html.xbox-motion-ready *::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}