/* Smooth same-site navigation (main cross-fades; header/chat morph when supported). */

@view-transition {
  navigation: auto;
}

.site-header-themed {
  view-transition-name: tide-topbar;
}

#site-chat-column,
.site-chat-stack {
  view-transition-name: tide-chat;
}

.site-page-shell > main,
.site-main-canvas {
  view-transition-name: tide-main;
}

::view-transition-old(tide-main),
::view-transition-new(tide-main) {
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(tide-main) {
  animation-name: tide-main-out;
}

::view-transition-new(tide-main) {
  animation-name: tide-main-in;
}

::view-transition-old(tide-topbar),
::view-transition-new(tide-topbar),
::view-transition-old(tide-chat),
::view-transition-new(tide-chat) {
  animation-duration: 0.32s;
  animation-timing-function: ease;
}

@keyframes tide-main-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes tide-main-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

html.site-nav-in .site-page-shell > main,
html.site-nav-in .site-main-canvas {
  opacity: 1;
  transform: none;
  transition: none;
}

html.site-nav-out .site-page-shell > main,
html.site-nav-out .site-main-canvas {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

html.site-nav-soft-out .site-page-shell > main,
html.site-nav-soft-out .site-main-canvas,
html.site-nav-game-out .site-page-shell > main,
html.site-nav-game-pending .site-page-shell > main,
html.site-nav-game-in .site-page-shell > main {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(tide-main),
  ::view-transition-new(tide-main),
  ::view-transition-old(tide-topbar),
  ::view-transition-new(tide-topbar),
  ::view-transition-old(tide-chat),
  ::view-transition-new(tide-chat) {
    animation: none !important;
  }

  html.site-nav-in .site-page-shell > main,
  html.site-nav-in .site-main-canvas,
  html.site-nav-out .site-page-shell > main,
  html.site-nav-out .site-main-canvas,
  html.site-nav-game-out .site-page-shell > main,
  html.site-nav-game-pending .site-page-shell > main,
  html.site-nav-game-in .site-page-shell > main {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none !important;
    filter: none !important;
  }
}