/* Shared background for every page: the steady bgv1.webp
   stretched over the screen, with PNG layers above it (built by stage.js).
   Layers rest in black and white, mostly transparent; one at a time comes to
   the front in full colour. Each layer covers the screen and places its image
   with background-position/size. */
body {background: #000000 url(bgv1.webp) no-repeat fixed center / cover}
html, body {overscroll-behavior: none}	/* no elastic bounce past the edges */
html, body, body > center {height: 100%}	/* lets the 100%-high centring tables work in standards mode */
#stage {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden}	/* behind all page content */
#stage .layer {position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background-repeat: no-repeat; filter: grayscale(1); opacity: .2; z-index: 1}
/* Every layer gets a colour twin above all the grey ones. Twins cross-fade, and
   the incoming one is moved to the top while still invisible, so the change in
   stacking order never shows (z-index itself can't fade). */
#stage .twin {filter: none; opacity: 0; z-index: 2; transition: opacity 6s}
#stage .twin.active {opacity: 1; z-index: 3}

/* Page changes cross-fade instead of flashing (browsers that support it) */
@view-transition {navigation: auto}