/* The background, in two animated formats so the browser fetches only the
   one it understands. Measured on this clip: AVIF 116KB, WebP 655KB --
   against 2.6MB as a GIF. Chromium 141, Firefox 142 and WebKit 26 all
   picked the AVIF.
 *
 * An animated image rather than a <video>: it needs no element in the
 * page, so nothing can collide with the React app that owns #root, and it
 * does not depend on autoplay policy at all.
 *
 * The plain url() above image-set() is the fallback for a browser too old
 * for image-set (Safari below 17). It names the WebP deliberately -- a
 * still frame would have been smaller, but this way those browsers get the
 * animation rather than a picture of it. A browser that understands
 * image-set overrides the line and never fetches it.
 *
 * Nothing here applies until edge-bg-ready is set; see custom.js. Until
 * then the page is the theme's own background, which is why the theme is
 * oled: black, and the right thing to look at for the moment before the
 * background arrives. */
body {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.edge-bg-ready {
  background-image: url("/background.webp");
  background-image: image-set(
    url("/background.avif") type("image/avif"),
    url("/background.webp") type("image/webp"));
}