@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(.2, .75, .25, 1);
}

::view-transition-old(root) {
  animation-name: spark-page-out;
}

::view-transition-new(root) {
  animation-name: spark-page-in;
}

@keyframes spark-page-out {
  to { opacity: 0; }
}

@keyframes spark-page-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation-duration: 0s; }
}

/* Sign-in and sign-out. The leaving page plays first, then the next page arrives. */
:root { --auth-leave-ms: 440ms; }

@media (prefers-reduced-motion: no-preference) {
  html.auth-leave-in,
  html.auth-leave-out { pointer-events: none; }

  html.auth-leave-in .auth-panel {
    animation: spark-auth-card-out var(--auth-leave-ms) cubic-bezier(.4, 0, .2, 1) both;
  }
  html.auth-leave-out .sidebar {
    animation: spark-auth-sidebar-out var(--auth-leave-ms) cubic-bezier(.4, 0, 1, 1) both;
  }
  html.auth-leave-out .main-shell {
    animation: spark-auth-main-out var(--auth-leave-ms) cubic-bezier(.4, 0, 1, 1) both;
  }

  html[data-auth-enter="in"] .sidebar {
    animation: spark-auth-sidebar-in 640ms cubic-bezier(.16, 1, .3, 1) both;
  }
  html[data-auth-enter="in"] .main-shell {
    animation: spark-auth-main-in 700ms 70ms cubic-bezier(.16, 1, .3, 1) both;
  }
  html[data-auth-enter="in"] .auth-shell .auth-panel,
  html[data-auth-enter="out"] .auth-panel {
    animation: spark-auth-card-in 560ms cubic-bezier(.16, 1, .3, 1) both;
  }
}

@keyframes spark-auth-card-out {
  to { opacity: 0; transform: translateY(-12px) scale(.985); }
}
@keyframes spark-auth-sidebar-out {
  to { opacity: 0; transform: translateX(-20px); }
}
@keyframes spark-auth-main-out {
  to { opacity: 0; transform: translateY(10px); }
}
@keyframes spark-auth-sidebar-in {
  from { opacity: 0; transform: translateX(-22px); }
}
@keyframes spark-auth-main-in {
  from { opacity: 0; transform: translateY(14px); }
}
@keyframes spark-auth-card-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --auth-leave-ms: 0ms; }
}