:root {
  --theme-transition-duration: 260ms;
  --theme-transition-easing: cubic-bezier(.45, 0, .55, 1);
}

html {
  scrollbar-gutter: stable;
  background: #f0eeea;
}

html body {
  opacity: 1;
  transition: opacity 170ms var(--theme-transition-easing);
}

html.page-leaving body,
html.page-entering body {
  opacity: 0;
  pointer-events: none;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: var(--theme-transition-duration);
  animation-timing-function: var(--theme-transition-easing);
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root) {
  z-index: 2;
  mix-blend-mode: normal;
  animation: page-fade-out var(--theme-transition-duration) var(--theme-transition-easing) both;
}

::view-transition-new(root) {
  z-index: 1;
  mix-blend-mode: normal;
  animation: none;
}

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

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity var(--theme-transition-duration) var(--theme-transition-easing);
}

html.theme-inverted::after {
  opacity: 1;
}

/* The page chrome is inverted, while project media keeps its source colours. */
html.theme-inverted .project-preview,
html.theme-inverted .project-image,
html.theme-inverted .project-video,
html.theme-inverted #bunny-frame {
  filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --theme-transition-duration: 1ms; }
}