/* Hand-written additions that replace behaviour of the old Semplice theme. */

/* Page transitions. Semplice "fade" preset: the old page fades out while the new one
   fades in, 1s each with Expo.easeInOut, over the black transition background. */
@view-transition { navigation: auto; }
::view-transition { background-color: #000000; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Loading bar shown while the next page loads (Semplice used NProgress). */
#nprogress { pointer-events: none; }
#nprogress .bar {
  background: #FC8B19;
  position: fixed; z-index: 1031; top: 0; left: 0;
  width: 100%; height: 0.2777777777777778rem;
  transform: translateX(-100%);
  animation: smp-progress 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes smp-progress { to { transform: translateX(-20%); } }

/* The old <body bgcolor="#000000"> attribute: a presentational hint, i.e. the weakest possible
   rule. :where() gives the same zero specificity. */
:where(body) { background-color: #000000; }