/* Only a confirmed sign-in arms this cross-document transition. */
@view-transition { navigation: auto; }

:root { --nx-auth-wipe-start: 62vw; }
.nx-auth-outgoing .nx-signin-form-wrap { view-transition-name: nx-auth-form; }
.nx-auth-outgoing .nx-auth-divider { view-transition-name: nx-auth-divider; }

/* The destination is already at rest while the boundary reveals it. Keep
   these entry animations settled for this page visit after the wipe ends. */
html.nx-auth-arrived #nexus-player-cabinet .nx-overview,
html.nx-auth-arrived #nexus-player-cabinet .nx-overview *,
html.nx-auth-arrived #nexus-player-cabinet .nx-overview *::before,
html.nx-auth-arrived #nexus-player-cabinet .nx-overview *::after {
  animation-duration: 1ms !important;
  animation-delay: -1ms !important;
  animation-iteration-count: 1 !important;
}

html.nx-auth-incoming::view-transition-group(root) { animation: none; z-index: 1; }
html.nx-auth-incoming::view-transition-image-pair(root) { isolation: auto; }
html.nx-auth-incoming::view-transition-old(root),
html.nx-auth-incoming::view-transition-new(root) { mix-blend-mode: normal; }
html.nx-auth-incoming::view-transition-old(root) {
  animation: nx-auth-old 620ms 80ms cubic-bezier(.35,0,.12,1) both;
}
html.nx-auth-incoming::view-transition-new(root) {
  animation: nx-auth-new 620ms 80ms cubic-bezier(.35,0,.12,1) both;
}
html.nx-auth-incoming::view-transition-group(nx-auth-form) { animation: none; z-index: 2; }
html.nx-auth-incoming::view-transition-old(nx-auth-form) {
  animation: nx-auth-form-out 120ms ease-out both;
}
html.nx-auth-incoming::view-transition-group(nx-auth-divider) {
  z-index: 3;
  animation: nx-auth-line 700ms cubic-bezier(.35,0,.12,1) both;
}
html.nx-auth-incoming::view-transition-old(nx-auth-divider) { animation: none; }

@keyframes nx-auth-old {
  from { clip-path: inset(0 calc(100% - var(--nx-auth-wipe-start)) 0 0); opacity: 1; }
  to { clip-path: inset(0 100% 0 0); opacity: 1; }
}
@keyframes nx-auth-new {
  from { clip-path: inset(0 0 0 var(--nx-auth-wipe-start)); opacity: 1; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes nx-auth-form-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nx-auth-line {
  0%, 11.4% { transform: translateX(var(--nx-auth-wipe-start)); opacity: 1; filter: brightness(1.3); }
  88% { opacity: 1; }
  100% { transform: translateX(-8px); opacity: 0; filter: brightness(1); }
}

/* Narrow screens use the same short fade as unsupported browsers. */
html.nx-auth-fallback-in body { animation: nx-auth-arrival 160ms ease-out both; }
html.nx-auth-fallback-out .nx-signin-form-wrap { opacity: .3; transition: opacity 120ms ease-out; }
@keyframes nx-auth-arrival { from { opacity: .65; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.nx-auth-fallback-in body { animation: none; }
  html.nx-auth-fallback-out .nx-signin-form-wrap { opacity: 1; transition: none; }
  html.nx-auth-incoming::view-transition-group(*),
  html.nx-auth-incoming::view-transition-old(*),
  html.nx-auth-incoming::view-transition-new(*) { animation: none !important; }
}