/* public/CSS/theme-transition.css
   The blob animation of the light/dark switch (public/JS/theme-transition.js).
   Loaded with the switch by views/_Components/header.ejs and admin_nav.ejs. */

/* The page before (old) and after (new) the switch, shown as two images by the
   browser's View Transitions.
   - animation: none, because the browser's own fade between the two images
     would show through the blob; the blob replaces it.
   - mix-blend-mode: normal, because the browser blends the two images by
     default, which would mix light and dark at the blob's edge. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* To light, the dark page is the old image, and it is the one that shrinks. The
   browser puts the new image on top by default, so the old one is raised above
   it; otherwise the shrinking blob would be hidden underneath. To dark, the new
   (dark) image is already on top, so nothing is needed. */
:root[data-theme-transition="to-light"]::view-transition-old(root) {
  z-index: 1;
}