/* Only project pages opt in to cross-document navigation. */
@view-transition { navigation: auto; }

.project-hero-nav-row .project-hero-nav { view-transition-name: project-navigation; }
.project-hero-nav-row [data-nav-section="0"] { view-transition-name: project-nav-main; }
.project-hero-nav-row [data-nav-section="1"] { view-transition-name: project-nav-seasons; }
.project-hero-nav-row [data-nav-section="2"] { view-transition-name: project-nav-cast; }
.project-hero-nav-season-surface { view-transition-name: project-season-surface; }
.project-hero-nav-child-label { view-transition-name: project-season-number; }


/* Render each persistent surface once. Two opaque snapshots with the default
   plus-lighter blend caused the navigation to flash on every page change. */
::view-transition-old(root) { display: none; }
::view-transition-new(root) { mix-blend-mode: normal; }

::view-transition-group(project-navigation),
::view-transition-group(project-nav-main),
::view-transition-group(project-nav-seasons),
::view-transition-group(project-nav-cast),
::view-transition-group(project-season-surface),
::view-transition-group(project-season-number) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(project-navigation),
::view-transition-old(project-nav-main),
::view-transition-old(project-nav-seasons),
::view-transition-old(project-nav-cast),
::view-transition-old(project-season-surface),
::view-transition-old(project-season-number) {
  animation: none;
  opacity: 0;
}

::view-transition-new(project-navigation),
::view-transition-new(project-nav-main),
::view-transition-new(project-nav-seasons),
::view-transition-new(project-nav-cast),
::view-transition-new(project-season-surface),
::view-transition-new(project-season-number) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* During split/merge one vector path paints the parent, neck and daughter.
   The browser must not rescale separate translucent raster snapshots. */
html[data-season-surface-motion]::view-transition-group(project-season-surface) {
  animation: none !important;
  transform: translate(var(--season-frame-x), var(--season-frame-y)) !important;
  width: var(--season-frame-width) !important;
  height: var(--season-frame-height) !important;
  background: var(--season-frame-image) center / 100% 100% no-repeat;
}

html[data-season-surface-motion]::view-transition-old(project-season-surface),
html[data-season-surface-motion]::view-transition-new(project-season-surface) {
  opacity: 0;
}

::view-transition-old(project-season-number):only-child {
  animation: episode-gallery-fade-out 45ms linear both;
}

::view-transition-new(project-season-number):only-child {
  animation: episode-gallery-fade-in 100ms 140ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(project-navigation),
  ::view-transition-group(project-nav-main),
  ::view-transition-group(project-nav-seasons),
  ::view-transition-group(project-nav-cast),
  ::view-transition-group(project-season-surface),
  ::view-transition-group(project-season-number) { animation: none; }
}