/* Shared by the original document and every React page. */
@view-transition {
  navigation: auto;
}

:root {
  --page-dissolve-duration: 900ms;
}

::view-transition-group(root) {
  animation-duration: var(--page-dissolve-duration);
  animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
  animation: page-departure var(--page-dissolve-duration) ease-in-out both;
}

::view-transition-new(root) {
  animation: page-arrival var(--page-dissolve-duration) ease-in-out both;
}

@keyframes page-departure {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Keep the theme/view controls out of the dissolving page snapshot. */
.sticky-controls {
  view-transition-name: portfolio-controls;
}

::view-transition-group(portfolio-controls),
::view-transition-old(portfolio-controls),
::view-transition-new(portfolio-controls) {
  animation: none;
}

::view-transition-old(portfolio-controls) {
  display: none;
}

@keyframes page-arrival {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Older browsers still get a gentle arrival without delaying navigation. */
@supports not (view-transition-name: none) {
  .page-shell,
  .work-page:not(.page-shell) {
    animation: page-arrival var(--page-dissolve-duration) ease-in-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --page-dissolve-duration: 1ms; }
  ::view-transition-group(*) { animation-duration: 1ms; }
  .page-shell,
  .work-page:not(.page-shell) { animation: none; }
}